Question

The JQuery UI Accordion widget doesn’t work with longer scrollable content in IE7 when any parent container div has overflow:auto; set on it. I tried setting the innermost child div of the Accordion to overflow:visible !important; but it didn’t work. Works fine in IE8, IE9, IE9 compatibility mode, Chrome, FF, Opera, and Safari.

Test this fiddle in IE7. Be sure to explicity set IE to use “Browser mode: IE7” and “Document Mode: IE7 standards”.

How to fix?

<div style="overflow:auto;">
  <div id="accordion" style="overflow:visible;float:right;height:400px;width:500px;border:2px solid red;float:right;">
    <h3>Section 1</h3>
    <div>
      <script type="text/javascript">
        for (var i=0; i<10; i++)
        {
        document.write("<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>");
        document.write("<ul>");
        document.write("<li>List item one</li>");
        document.write("<li>List item two</li>");
        document.write("<li>List item three</li>");
        document.write("</ul>");
        }
      </script>
        </div>
        <h3>Section 2</h3>
        <div>
          <p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
        </div>
      </div>
</div>

Answer 1

So it turns out it’s a bug in the current version of jqueryui accordion.
See the jqueryui bug report here.