Yahoo YUI TabView IE Render Bug

There's a bug in the Yahoo YUI TabView 2.7.0 component that seems to affect Internet Explorer 6/7/8. In my experience, I had a TabView control with tables in each of the tab panels with borders on the tr elements. This caused a weird corruption where the tr borders from tables on non-active tabs appeared floating around in random places of the document, normally somewhere below the tab component.

This behavior appears to be related to this bug which I came across via this blog post. The blog post lists a whole bunch of CSS for stripping the YUI styling from TabView controls, but the interesting bit are the three lines at the bottom, namely:

/* YUI TabView 2.7.0 Bug Fix (#2527894) */
.yui-skin-sam .yui-navset .yui-content .yui-hidden,
.yui-skin-sam .yui-navset .yui-navset-top .yui-content .yui-hidden {
display: none;
}

Just put these in a style-sheet that overrides the YUI styles, or add it inline to the HTML page that uses the TabView control. This little hack solved my floating table boarders problem (and possibly other weird behavior that I hadn't come across in my implementation). Hope it works for you too!

Comments

Popular posts from this blog

Wkhtmltopdf font and sizing issues

Import Google Contacts to Nokia PC Suite

Can't delete last blank page from Word