[thelist] Multiple className problem

[MoMad]

 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?