CODEWITHSUNDEEP
jqueryinternet-explorerjquery-uiinternet-explorer-7jquery-ui-accordion
Dismissile
Dismissile

Reputation: 33071

IE7 Issue with jQuery Accordion and background color

I am having an issue with jQuery Accordion Control in IE7.

The accordion works fine until I add a background-color style to the containing element.

Does anyone have IE7 still that can figure out why this is a problem?

I created a jsFiddle to test the problem:
http://jsfiddle.net/SrQUM/10/

When I click one of the top accordions the animation is all screwed up. When I click one of the bottom accordions everything animates just fine. It basically looks like the second h3 doesn't move to the proper location when I expand one of the elements.

(I am using an accordion for each section because I want to be able to expand multiple items at once).

Upvotes: 1

Views: 896

Answers (1)

Dismissile
Dismissile

Reputation: 33071

I was able to get this resolved. I'm not in love with the solution but it works, and hopefully IE7 support will be phased out soon here.

The issue was that the FIRST element after the accordion was never getting pushed down when the accordion was expanded. The fix was to add a dummy div with a 0 height after the accordion:

<div id="accordion">
    <h3><a href="#">Header</a></h3>
    <div>
        <p>Some Content</p>
    </div>
</div>

<p>Some Content Here</p>
<p>Some More Content</p>

This first paragraph was never moved, but the second one was. So I added this to my code:

<script type="text/javascript">
    $(function() {
        $('#accordion').accordion().after('<div class="accordion-clear"></div>');
    });
</script>

And include a style:

.accordion-clear { height: 0px; clear: both; }

This seemed to make everything work okay.

Upvotes: 1

Related Questions