This is a convoluted problem that I was able to solve, I'm posting it in case anyone else experiences the same.

I'm using Views Tabs on a Drupal 6 site, which was running Jquery 1.2x and Jquery UI 1.6. Basically, in internet explorer 7 (on at least 3 computers, perhaps not all), when a user clicks another tab from Views Tabs the container div changes to the right size, but the content does not appear. The first tab loads fine, any subsequent tab does not. Curiously enough, if I changed the "internet security settings" AFTER clicking on this tab (doesn't matter what I changed them to), the information would then appear.

Long story short, Every combination fails to solve this issue EXCEPT running Jquery Update 2.x (which updates jquery to 1.32) and jquery ui 1.6 (do NOT update to 1.7). This worked with the current .dev versions of jquery ui, tabs, views tabs, jquery update, and views.

Comments

Could you please explain in more detail how you got the tabs working in IE 6 & 7 please?

At the moment my first and last tab work but the 3 in between don't. I'm running jquery 1.2.6 and jquery ui 1.6 but if I upgrade to jquery 1.3.2 the website breaks.

Thanks!

Status:Closed (fixed)» Active

Changing the status to active.

I've since moved away from this module, this bug being one reason why. Like I said above, the way I got it working was by using JQuery 1.32. If jq1.32 breaks your site, my solution won't work for you.

Thank you for replying. I actually managed to get the module to work by enabling the fade on the tabs.

For future reference which module do you use instead now?

Am currently not using tabs at all =) Although, for a slightly different purpose, I've found the quicktabs module to be very stable and useful

Quicktabs++

Thinking of moving my sites away from this in to Quicktabs. Too many niggling problems every time. Quicktabs, so far, seems pretty bullet-proof.

I'm also experiencing this problem. I have some minimum steps to reproduce:

My systems

  • Client computer (an IE7 test machine):
  • Server (a development box):
    • Debian 5.0.8 on a i486-pc-linux-gnu
    • Apache/2.2.9 (Debian) modfastcgi/2.4.6 PHP/5.2.6-1+lenny9 with Suhosin-Patch modssl/2.2.9 OpenSSL/0.9.8g modperl/2.0.4 Perl/v5.10.0
    • PHP 5.2.6-1+lenny9 with memorylimit=256M
    • MySQL 5.0.51a
    • Drupal 6.22
    • Tabs 6.x-1.3
      • Tabs panel style (panels_tabs) 6.x-1.0-rc6
        • Panels 6.x-3.9
          • Chaos tools (ctools) 6.x-1.8

Steps to reproduce

  1. drush pm-download drupal-6.22
  2. mv ./drupal-6.22 ./public_html
  3. Set up Drupal from the web interface; use default settings.
  4. cd ./public_html
  5. drush pm-download tabs-6.x-1.3 ctools-6.x-1.8 panels-6.x-3.9 panels_tabs-6.x-1.0-rc6
  6. drush pm-enable tabs ctools panels panels_tabs page_manager
  7. Log in to the web interface
  8. At admin/build/pages (Administer -> Site building -> Pages):
    1. Click Add custom page:
      1. Administrative title = "Front page"
      2. Machine name = "frontpage"
      3. Path = frontpage (i.e.: http://yoursite.example.com/frontpage)
      4. Make this your site home page = TRUE
      5. Variant type = "Panel"
      6. Click Continue to move to the Choose layout screen
      7. Category = "Columns: 1"
      8. Select the "Single column" layout
      9. Click Continue to move to the Panel settings screen
      10. Without changing anything on the Panel settings screen, click Continue to move to the Panel content screen
      11. Click the gear icon in Middle column. Under Style, click Change. A dialog will appear.
        1. Style = "Tabs"
        2. Click Next to move to the Style settings for style Tabs (Region "Middle column") screen
        3. Without changing anything on the Style settings for style Tabs (Region "Middle column") screen, click Save
      12. Back on the Panel settings screen, click the gear icon in Middle column. Click Add content
        1. In the left column, click New custom content to move to the Configure new New custom content screen
        2. Administrative title = "Test content 1"
        3. Title = "Test content 1"
        4. Body = <table><tr><th>Quarter</th><th>Budget</th><th>Surplus (Deficit)</th></tr><tr><td>2011Q1</td><td>123,456,789</td><td>100</td></tr><tr><td>2011Q2</td><td>123,654,789</td><td>(100)</td></tr><tr><td>2011Q3</td><td>123,456,987</td><td>10</td></tr></table>
        5. Input format = "Full HTML"
        6. Click Finish
      13. Back on the Panel settings screen, click the gear icon in Middle column. Click Add content
        1. In the left column, click New custom content to move to the Configure new New custom content screen
        2. Administrative title = "Test content 2"
        3. Title = "Test content 2"
        4. Body = <table><thead><tr><th>Date</th><th>Location</th><th>Event</th></tr></thead><tbody><tr><td>2011-09-20</td><td>Waterloo, ON</td><td>Event 1</td></tr><tr><td>2011-09-21</td><td>Waterloo, ON</td><td>Event 2</td></tr><tr><td>2011-09-22</td><td>Waterloo, ON</td><td>Event 3</td></tr></tbody></table>
        5. Input format = "Full HTML"
        6. Click Finish
      14. Back on the Panel settings screen, click Finish
    2. On the Front page page configuration, click Save at the very bottom of the page
  9. In Internet Explorer 7, navigate to frontpage (i.e.: http://yoursite.example.com/frontpage)
    1. Note that the first table (budget table in my example) appears fine in the first tab.
    2. Click the second tab.
    3. Note that the second table (event table in my example) does not appear in the second tab.
    4. Click the first tab.
    5. Note that the first table does not appear in the first tab anymore.
    6. Using the IE Developer Toolbar, inspect the page DOM to find the element with the id="tabs-middle" (easiest way to find it is to inspect the panel display div (class="panel-display panel-1col clear-block"), and navigate through the DOM tree to it's great-grandchild with the classes "drupal-tabs js-hide tabs-processed" and id="tabs-middle")
      1. Note that one of the classes on the div is js-hide.
      2. Double-click the list of classes in the "value" column in the "Attribute" pane of the developer toolbar to edit. Use Backspace to delete the "js-hide" class one letter at a time (double-clicking the word and pressing delete/backspace/space doesn't always work). Press enter to save.
      3. Note that the table appears
      4. Turn off element inspection if you haven't done so already
    7. Click the second tab, then the first tab again.
    8. Note that the first table has disappeared again
    9. Through further playing, note that removing the js-hide class on various elements causes things to work again, but moving between tabs breaks things again.

Conclusions

The problem may be related to the .js-hide class defined in the core system module's system.css file, but that seems weird, as nobody seems to have noticed it before (search 1, search 2), and AFAIK it seems to work for other modules.

As a note, changing the IE7 System Security Settings works because the IE Javascript engine seems to get re-run on the page when you set the "Security level for this zone" to "High".