jQuery UI accordion issue

Question

I use the jQuery UI accordion widget, and between every item I have some space. The issue is that in IE 8 , when you slide an item, it slides fine, but it removes the space between it and the upward item. It works good in FF and other browsers, though.

When I over with the mouse on that item, though, it creates that space.

I use the HTML5 doctype, but it doesn't work with others doctypes either.

Thanks.

Edit: Here's a live example.

Answer 1

Try applying margin-bottom:5px; to .ui-accordion-header.

This will cause a gap between the open header and it's content, but you can fix that by removing the margin on .ui-accordion-header.ui-state-active and applying it to .ui-accordion-content-active instead.

So your css would look like this:

.ui-accordion-header {
margin-bottom:5px;
}
.ui-accordion-header.ui-state-active {
margin-bottom:0;
}
.ui-accordion-content-active {
margin-bottom:5px;
}

That might need a bit of tweaking, but should get you mostly there.