Accordion header margins disappear in IE 8

[ji1337]

The default accordion as shown in ​http://jqueryui.com/demos/accordion/ has a display issue under Internet Explorer 8. I haven't tested under IE 6 & 7.

When expanding a panel, the margin above the header of the expanded panel is ignored, therefore the expanded panel collides with the previous panel. Somehow the problem goes away when hovering the mouse in and out of the header of the expanded panel.

[m4olivei]

I'm having this same issue on a site I'm developing and have seen at least one post directly related. Here is the example I am dealing with:

​http://vibro.websitebeta.net/application-solutions/roof-top-units

Here is the post I stumbled across:

​http://forum.jquery.com/topic/problem-with-margin-top-for-first-accordion-header-in-ie8

Any progress on this bug?

Thanks, Matt

[m4olivei]

After a bit of playing around, I found a workaround. I set a change event for the accordion to trigger a blur on my accordion headers. eg:

$("#accordion").accordion({
  active: false, 
  autoHeight: false, 
  collapsible: true, 
  change: function() { 
    $(this).find('h3').blur(); 
  }
});

That got rid of the disappearing margins issue.

[Alex Dovenmuehle]

Accordion: Fixed weird behavior on accordion animations in IE. Fixed #5421 - Accordion header margins disappear in IE 8

Changeset: 497ec8588c177645082ab9ac08972b16afd1b3e8

[Scott González]

Fixed in 1-8-stable in 3471bd66e0ff5d96c8ac867dbecd2290a4708385.

[perosb]

this "fix" seem to break accordions;

"Uncaught TypeError: Cannot read property 'className' of undefined"

jquery-ui.js:6035 this.toHide.parent()[0].className = this.toHide.parent()[0].className;

[Scott González]

That error has already been fixed.