css crosstalk with nested tabpanels in LayoutManger

[christocracy]

there's css crosstalk between .ytabs-top and .ytabs-bottom with nested regions.

if you nest a BorderLayout having region with {tabPosition:top} within a region that has {tabPosition:bottom}, the nested top tabs will experience crosstalk from the parent's bottom tabs.

as a quick fix, I modified the css for .ytabs-top in tabs.css.
my fix will only work for 1 level of recursive tabs (and it's still not perfect).


/* new style tabs on top */
.ytabs-top .tabset, .ytabs-bottom .ytabs-top .tabset{
border-bottom:1px solid #6593cf;
border-top: 0;
}
.ytabs-top .tabset .hd li,#comment-cn .tabset .hd em,#comment-cn .tabset .hd strong {
font-size:9px !important;
font-family:tahoma,arial,helvetica;
}
.ytabs-top .tabset .hd em, .ytabs-bottom .ytabs-top .tabset .hd em {
padding-left:10px;padding-right:10px;
}
.ytabs-top .tabset .hd li.on em{
color:#083772;
}

.ytabs-top .tabset .hd li.on strong, .ytabs-bottom .ytabs-top .tabset .hd li.on strong {
background-color:none;
background: url(../images/grey/tabs/tab-right-bg.gif) no-repeat top right;
}
.ytabs-top .tabset .hd li.on em, .ytabs-bottom .ytabs-top .tabset .hd li.on em {
background-color:none;
background: url(../images/grey/tabs/tab-left-bg.gif) no-repeat;
}
.ytabs-top .tabset .hd li.on, .ytabs-bottom .ytabs-top .tabset .hd li.on{
position: relative;
top: 0px;
}
.ytabs-top .tabset .hd li a, .ytabs-bottom .ytabs-top .tabset .hd li a{
background-color:none;
background: url(../images/grey/tabs/tab-inactive-right-bg.gif) no-repeat top right;
}
.ytabs-top .tabset .hd li em, .ytabs-bottom .ytabs-top .tabset .hd li em {
background-color:none;
background: url(../images/grey/tabs/tab-inactive-left-bg.gif) no-repeat;
}

[jack.slocum]

Thanks for posting. I'm sure this will save someone many a headache.

[christocracy]

here's a better version:

* this is just the css for .ytabs-top / .ytabs-bottom -- not the whole file.


/* new style tabs on top */
.ytabs-top .tabset, .ytabs-bottom .ytabs-top .tabset{
border-bottom:1px solid #6593cf;
border-top: 0;
}

.ytabs-top .tabset .hd li,#comment-cn .tabset .hd em,#comment-cn .tabset .hd strong {
font-size:9px !important;
font-family:tahoma,arial,helvetica;
}
.ytabs-top .tabset .hd li, .ytabs-bottom .ytabs-top .tabset .hd li {
border-bottom: 1px solid #6593cf;
}

.ytabs-top .tabset .hd em, .ytabs-bottom .ytabs-top .tabset .hd em {
padding-left:10px;padding-right:10px;
}
.ytabs-top .tabset .hd li.on em{
color:#083772;
}
.ytabs-top .tabset .hd li,.ytabs-top .tabset .hd em,.ytabs-top .tabset .hd strong,
.ytabs-bottom .ytabs-top .tabset .hd li, .ytabs-bottom .ytabs-top .tabset .hd em, .ytabs-bottom .ytabs-top .tabset .hd strong {
font:bold 12px tahoma,arial,helvetica;
}

.ytabs-top .tabset .hd li.on strong, .ytabs-bottom .ytabs-top .tabset .hd li.on strong {
background-color:none;
background: url(../images/grey/tabs/tab-right-bg.gif) no-repeat top right;
}
.ytabs-top .tabset .hd li.on em, .ytabs-bottom .ytabs-top .tabset .hd li.on em {
background-color:none;
background: url(../images/grey/tabs/tab-left-bg.gif) no-repeat;
}
.ytabs-top .tabset .hd li.on, .ytabs-bottom .ytabs-top .tabset .hd li.on{
position: relative;
top: 1px;
border-bottom: 0;
}
.ytabs-top .tabset .hd li a, .ytabs-bottom .ytabs-top .tabset .hd li a{
background-color:none;
background: url(../images/grey/tabs/tab-inactive-right-bg.gif) no-repeat top right;
}
.ytabs-top .tabset .hd li em, .ytabs-bottom .ytabs-top .tabset .hd li em {
background-color:none;
background: url(../images/grey/tabs/tab-inactive-left-bg.gif) no-repeat;
}

/* Tabs on the bottom */
.ytabs-bottom .tabset{
border-bottom: 0px none;
border-top: 1px solid #6593cf;
}

.ytabs-bottom .tabset .hd{
margin:0px;
}

.ytabs-bottom .tabset .hd li {
margin-right: 2px;
padding: 0;
}

.ytabs-bottom .tabset .hd li,.ytabs-bottom .tabset .hd em,.ytabs-bottom .tabset .hd strong {
font:bold 9px tahoma,arial,helvetica;
}
.ytabs-bottom .tabset .hd em{
padding-left: 10px;
padding-right: 10px;
}

.ytabs-bottom .tabset .hd li.on em{
color: #083772;
}
.ytabs-bottom .tabset .hd li.on{
position: relative;
top: -1px;
}
.ytabs-bottom .tabset .hd li.on strong{
border-bottom: 0px none;
margin-bottom: 0px;
white-space: nowrap;
background-color: none;
background: url(../images/grey/tabs/tab-btm-right-bg.gif) no-repeat bottom left;

}
.ytabs-bottom .tabset .hd li.on em{
border-bottom: 0px;
white-space: nowrap;
background-color: none;
background: url(../images/grey/tabs/tab-btm-left-bg.gif) no-repeat bottom right;
}
.ytabs-bottom .tabset .hd li a{
white-space: nowrap;
background-color: none;
background: url(../images/grey/tabs/tab-btm-inactive-right-bg.gif) no-repeat bottom left;
}
.ytabs-bottom .tabset .hd li em{
background-color: none;
background: url(../images/grey/tabs/tab-btm-inactive-left-bg.gif) no-repeat bottom right;
}