Question

I am attempting to build a UI such that a JQuery Accordion is contained within a scrolling div. This works fine under FF and IE8 but is a complete travesty on IE7. Specifically: whenever you scroll up or down, the entire accordion doesn’t slide up and down properly (parts of it scroll, but other parts do not) and parts of the accordion extend outside of the div. Clicking on some of the accordion header results in a javascript error deep in JQuery.

Here is code that exhibits this issue (pardon its inelegance, as I have reduced it down from the full UI code in my application):

JavaScript Code:

var contDiv = 'foobar'
var accordionId = 'my_accordion'

contDiv.html(    "<div id='" + accordionId + "'>" +
                    "<h3><a href='#'>First Section</a></h3>" +
                    "<div><p>foo<br>bar<br>baz<br>qux</p></div>" +
                    "<h3><a href='#'>Second Section</a></h3>" +
                    "<div><p>foo<br>bar<br>baz<br>qux</p></div>" +
                    "<h3><a href='#'>Third Section</a></h3>" +
                    "<div><p>foo<br>bar<br>baz<br>qux</p></div>" +
                    "<h3><a href='#'>Fourth Section</a></h3>" +
                    "<div><p>foo<br>bar<br>baz<br>qux</p></div>" +
                  "</div>");

var accordionDiv = $('#' + accordionId);
accordionDiv.accordion({autoHeight: false});

HTML:

<div style="height:100px;overflow:auto;"><div id="foobar"></div></div>

Answer 1

Ok, I don’t have IE7 to test this, but I think the main problem is the overflow:auto. Try this style for your HTML

<div style="height:100px; overflow-x:hidden; overflow-y:auto; position:relative; left:0; top: 0;">
 <div id="foobar" style="width:98%"></div>
</div>

Another problem (and I’m guess it’s just a typo in the code above since you said it worked in other browsers is that contDiv need to be a jQuery object:

var contDiv = $('#foobar');

Update: Ok, IE does need the position:relative to work properly. I updated the HTML above with left:0;top:0; as well, I remember IE didn’t set those positions, but I can’t find the reference. Additionally, I set the width of foobar to 98% because IE does not adjust to the width of the scroll bar. Here is a demo of what I have done so far.