Gaps under tabs using JQuery UI in Firefox

Question

I have been using JQueryUI for various aspects of my site, and a small tabbed menu set was working well, except in firefox. The image below shows the same code rendered in firefox on top, and IE9 below. Note the gap under the tabs and the (possible?) increase in padding inside the tab. I have removed all my stylesheets from the site (the 2nd image) leaving just the base JQuery UI one, but the gaps still appear, and only in firefox.

The js call is as basic as it can be:

    $("#menuTabs").tabs();

It's not often I have display issues where IE is better than firefox... Having removed all the CSS I generated, and made sure there's no styles being applied, I'm at a loss as to where to look next!

If you can offer any suggestions as to what might be causing it, I'd be a happy chappie!

[EDIT] After scaling back the code as far as I could, and using only 'known good' libraries, it turns out that it is caused by it being in a table cell!

Here's some code you can have a play with! http://jsfiddle.net/XVHTk/ It does however work when "Normalized CSS" is checked, so it could be padding inherited from the cell maybe?

[EDIT #2]

Right.

So.

It turns out that CSS styles applied to a table to remove padding and margins and borders and so forth are not enough. You have to include cellpadding="0" and cellspacing="0" in the table definition otherwise the jQuery tabs have some extra padding around them.

Odd.

jsFiddle with table and no extras: http://jsfiddle.net/XVHTk/1/

jsFiddle with table spacing/padding stripped: http://jsfiddle.net/XVHTk/2/

Why the HTML cell properties are being transferred into the tabs, I have no idea. I'm just happy to have fixed it!

Answer 1

This is caused by a bug in the ui-helper-clearfix class. See ticket #8442 and the associated fix. As you can see from the ticket, this was fixed in 1.10.1. I've created a fiddle showing this working properly with 1.10.1 and using 1.8.x with additional CSS to fix the issue. The latter shows that if you can't upgrade to 1.10.1+ right now, you can just include the following CSS:

.ui-helper-clearfix:after {
    border-collapse: collapse;
}