Question

I’m trying to get started with Jquery UI tabs and I’m running into an issue with the demo they have on their site. It runs fine for me on the site itself, but when I download the source and all the other files to run it on my machine, it initially renders correctly like this:

but when i click on any of the other tabs, they render like this:

Clicking the leftmost tab always makes things look correct, but clicking the other tabs cause the lines I have circled not to be rendered. It works fine for me in Firefox and Chrome.
Has anyone else seen something like this before?

I’d be really grateful for some advice.

Thanks,
-Mark

Answer 1

I found the issue. Its in the JQueryUI CSS. Its defining the .ui-tabs .ui-tabs-nav li elements like this:

.ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 1px; margin: 0 .2em 1px 0; border-bottom: 0 !important; padding: 0; white-space: nowrap; }

when it should be

.ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 1px; margin: 0 .2em -1px 0; border-bottom: 0 !important; padding: 0; white-space: nowrap; }

i.e. 1px should be -1px for the margin