[jQuery] [accordion] Accordion overflow problems in IE6 (maybe also 7)
Hi all,
the accordion won't work properly in ie6 (works perfectly in ff 3).
the structure:
<div class="container">
<div id="test-accordion" class="accordion">
<div class="accordion-item">
<div class="accordion-toggle"></div>
<div class="accordion-content"></div>
</div>
<div class="accordion-item">
<div class="accordion-toggle"></div>
<div class="accordion-content"></div>
</div>
...
</div>
</div>
Jquery ver 1.3, ui 1.64c .
I trigger the accordion in this way:
jQuery(document).ready(function () {
jQuery("#test-accordion").accordion({
header: "div.accordion-toggle",
clearStyle: false,
fillSpace: true
});
The problems:
- once clicked in the toggle, the content will show over the other
accordion items - happens mainly if the content is made by images or
mixed text + images.
-overflow will not keeps the contents inside the accordion container
proberly, they will flow out the container.
- when contents are bigger then the container, and the container size
is fixed, the overflow won't work properly. I got a big image, ff
shows scrollbars perfectly, ie just shows the whole image screwing the
whole accordion.
Here what I had to do to kinda fix it, in a .css file visible only by
ie:
div.container{
float:left;
width:580px;
background:#f0f0f0;
height:450px;
color:#333333;
overflow:hidden; /*needed for accordion */
position:relative;/* needed for accordion */
}
div.accordion-item{
position:relative; /*needed for accordion */
overflow:auto; /*needed for accordion */
}
div.accordion-toggle{
width:100%;
}
div.accordion-content{
overflow:auto; /*needed for accordion */
}
Now it works almost like ie, except when the accordion-content
contains a big images (ie crops it while ff shows the scrollbars).
Sample page: www.alu.com/entest/index_test.php (still working on it).