Jquery Accordion issues with ie 6

Question

I have implemented a Jquery accordion on one of my pages using the following options

$("#accordion").accordion({ header: "h3", alwaysOpen: false, active: false, autoHeight: false});

This works brilliantly in Firefox and in ie7 (now that I've upgraded to v1.7 of jquery ui)

However in ie6, pretty much all the contents of each accordion disappear (I'm left with a single <select> tag showing?!)

If I change the AutoHeight option to true as per this answer, then it's all fine again, except that I lose the nice benefit of having the accordions sized nicely, and some of them have loads of white space in them.

Does anyone know a fix so that I can still have AutoHeight = false?

Answer 1

I'm having the same issue. The accordion works great with ul though so I found this article about how to make a table without using .

http://mindrulers.blogspot.com/2008/03/create-table-using-css.html

Hope this helps.

Answer 2

My workaround for this was to use autoHeight true for IE6 and false for all other browsers.

var autoHeight = false;
if($.browser.msie && parseFloat($.browser.version) <= 7.0) { autoHeight = true; }
$("#accordion").accordion({ autoHeight: autoHeight });

Answer 3

Hi Rob_Y,

Facing the same problem I found a solution that works across all browsers without having to change the autoHeight parameter.

just add a class to your css like this:

* html .clearfix { height: 1%; }

And then add it to the content div following the h3 (like this: )

<h3>Header</h3>
<div class="clearfix">Whatever</div>

The problem is actually an IE6 issue with invisible text rendering. I have tested it on content containing unordered lists and complex nested divs and more, all working fine. Let me know if that did the trick!

Answer 4

Adding .ui-accordion-content{ zoom: 1; } to my CSS fixed the problem for me:

<link type="text/css" href="css/dark-hive/jquery-ui-1.7.2.custom.css" rel="stylesheet" />   
<style type="text/css">
        .ui-accordion-content{ zoom: 1; } 
</style>

Answer 5

The issue seems to be related to an IE6 rendering bug. This fixed the problem for me.

// This is required for IE6.
if (jQuery.browser.msie && jQuery.browser.version.substr(0,1)<7)
    jQuery('#accordion *').css('zoom', '1');