Question

I’m using a jQueryUI accordion that needs to go into an embedded IE7 browser that’s part of a 3rd party software.

My problem is the left margin doesn’t line up correctly on initial load. The margin fixes itself when I hover over the collapsed items, or when I click the expanded item, but this causes some strange shifting to occur while using the control.

Here’s a few images showing the problem:

Calling $(".jqueryui-accordion").accordion("resize"); corrects the margin of the expanded item on first load, but not the collapsed items. Minimizing the application and maximizing the window also will cause the items to correctly redraw themselves.

What can I do to have the margins render correctly on first load in IE7?

Answer 1

Try to add the following css style:

div, span {
    zoom: 1;
}

This sometimes helps to resolve such layout issues in IE7.