We shall all have JQuery vertical tabs, forthwith! And ones that work well too.
Have you seen the bug on JQuery’s site when you switch between vertical tabs on this page (http://jqueryui.com/tabs/#vertical)? The button below the one you press moves up or down just a little bit. It’s not much (a couple of pixels) but it’s noticeable.
Well, here is a fix (underlined in green) which should be applied to the CSS JQuery.com has you add to the <head> of your web page:
.ui-tabs-vertical .ui-tabs-nav li
{ clear: left;
width: 100%;
border-bottom-width: 1px !important;
border-right-width: 0 !important;
margin: 0 -1px -1px 0; }
It changes this: Image may be NSFW.
Clik here to view.
Into this: Image may be NSFW.
Clik here to view.
Obviously it doesn’t change the text… just the noticeable gap between the second and first tab from the first picture.
Capt. Rochefort (Don’t worry if you couldn’t see the difference, it’s really small and only an anal retentive web developer would notice)
Filed under: CSS, JQuery Tagged: Error, JQuery, JQuery Vertical Tabs, Jumps, Moves, Shifts, Tab Jumps, Tab Moves, Tab Shifts, Tabs, Vertical Tabs Image may be NSFW.
Clik here to view.
Image may be NSFW.Clik here to view.
