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. alt text http://img208.imageshack.us/img208/5074/along.jpg

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.

Answer 2

I had the same issue, it is a weird bug that only happens when the direction of the element the margin is applied to is right to left. The solution that worked for me is to give it direction: ltr and then apply direction: rtl to it's descendents.

Again, I have no idea whatsoever why this is, but if i'd try and understand microsoft i'd kill myself. It was a lucky guess on my part, and I hope it helps someone else.