[thelist] Multiple className problem
MoMad
momad_no at hotmail.com
Thu Mar 13 14:08:26 CST 2003
Hi, Im new to this group but recently ive been working on a TabPane
control that I downloaded from webFX, and I noticed that their
control heavily relies on the multiple classNames.
They have something like:
obj.className = "tab selected hover";
or some similar structure. But in internet explorer, I noticed that
if you have multiple kind of tabs and you are trying to apply
the "selected" and/or "hover" classes, it will only go with the last
instance that it finds it in the CSS.
All im trying to do is have different kinds of tabs, so what I did
was, I duplicated the CSS for the original tab and made them tabstat:
here's the source:
[code]
.dynamic-tab-pane-control .tab-row .tabstat {
width: 70px;
height: 16px;
background-image: url( "images/tabstat.png" );
position: relative;
top: 0;
display: inline;
float: left;
overflow: hidden;
cursor: hand;
margin: 1px -1px 1px 2px;
padding: 2px 0px 0px 0px;
border: 0;
z-index: 1;
font: 11px Tahoma;
white-space: nowrap;
text-align: center;
}
.dynamic-tab-pane-control .tab-row .tabstat.selected {
width: 74px !important;
height: 18px !important;
background-image: url( "images/tabstat.active.png" ) !important;
background-repaet: no-repeat;
border-bottom-width: 0;
z-index: 3;
padding: 2px 0 0px 0;
margin: 1px -3px -3px 0px;
top: -2px;
font: 11px Tahoma;
cursor: hand;
}
.dynamic-tab-pane-control .tab-row .tabstat a {
font: 11px Tahoma;
color: Black;
text-decoration: none;
cursor: hand;
}
.dynamic-tab-pane-control .tab-row .tabstat.hover {
font: 11px Tahoma;
width: 70px;
height: 16px;
background-image: url( "images/tabstat.hover.png" );
background-repaet: no-repeat;
cursor: hand;
}
.dynamic-tab-pane-control .tab-row .tab {
width: 70px;
height: 16px;
background-image: url( "images/tab.png" );
position: relative;
top: 0;
display: inline;
float: left;
overflow: hidden;
cursor: hand;
margin: 1px -1px 1px 2px;
padding: 2px 0px 0px 0px;
border: 0;
z-index: 1;
font: 11px Tahoma;
white-space: nowrap;
text-align: center;
}
.dynamic-tab-pane-control .tab-row .tab.selected {
width: 74px !important;
height: 18px !important;
background-image: url( "images/tab.active.png" ) !important;
background-repaet: no-repeat;
border-bottom-width: 0;
z-index: 3;
padding: 2px 0 0px 0;
margin: 1px -3px -3px 0px;
top: -2px;
font: 11px Tahoma;
cursor: hand;
}
.dynamic-tab-pane-control .tab-row .tab a {
font: 11px Tahoma;
color: Black;
text-decoration: none;
cursor: hand;
}
.dynamic-tab-pane-control .tab-row .tab.hover {
font: 11px Tahoma;
width: 70px;
height: 16px;
background-image: url( "images/tab.hover.png" );
background-repaet: no-repeat;
cursor: hand;
}
[/code]
But what I get is, everytime I do a mouseOver, the javascript appends
a "hover" to the className and I only get the ".tab.hover" class.
But if I took the ".tabstat.hover" class and moved it to the bottom
of the page, it will be the hover class.
My question is this, does anybody know a workaround for this problem,
is this a known problem with IE, and how can I get around it.
Also, is there a limit as to how many classNames you can have on one
element?
More information about the thelist
mailing list