I use JQueryUI for various aspects of my site, and a small tab menu works fine except for firefox. The figure below shows the same code that displays in firefox above and IE9 below. Pay attention to the space under the tabs and (maybe?) Increase the filling inside the tab. I deleted all my stylesheets from the site (second image), leaving only the basic JQuery UI alone, but spaces still appear and only in firefox.
The js call is as basic as possible:
$("#menuTabs").tabs();
I don’t often have problems displaying where IE is better than firefox ... Having deleted all the CSS I created and made sure that the styles don’t apply there, I don’t understand where to look next!
If you can offer any suggestions as to what might be causing this, I would be a happy chappie!
[EDIT] After scaling the code as far as I could, and using only the "known good" libraries, it turns out that it is caused by the fact that it is in the table cell!
Here is the code you can play with! http://jsfiddle.net/XVHTk/
However, it works when "Normalized CSS" is checked, so it could be a cell-inherited add-on, maybe?
[EDIT # 2]
Right
So.
It turns out that CSS styles applied to the table to remove padding, margins and borders, etc., are not enough. You must enable cellpadding = "0" and cellspacing = "0" in the table definition, otherwise jQuery tabs will have an extra padding around them.
.
jsFiddle : http://jsfiddle.net/XVHTk/1/
jsFiddle / : http://jsfiddle.net/XVHTk/2/
HTML , . , !