Changing a class does not apply the new class rules in IE6?

Question

I have one image with 9 different states and corresponding background position rules set as classes for displaying different states. I cannot use the: hover pseudo-selector because the mutable background image is not the same element that is hanging. I defined classes as follows:

#chooser_nav {width:580px; height:38px; background:transparent url(/assets/images/chooser-tabs.jpg) 0 0 no-repeat; margin-left:34px;}
#chooser_nav.feat {background-position:0 0;}
#chooser_nav.inv {background-position:0 -114px;}
#chooser_nav.bts {background-position:0 -228px;}
#chooser_nav.featinv {background-position:0 -38px;}
#chooser_nav.featbts {background-position:0 -76px;}
#chooser_nav.invfeat {background-position:0 -152px;}
#chooser_nav.invbts {background-position:0 -190px;}
#chooser_nav.btsfeat {background-position:0 -266px;}
#chooser_nav.btsinv {background-position:0 -304px;}

Then, using jQuery, I have a series of hover rules based on a previous click event (the unedited "cur" variable is properly declared elsewhere):

  $("#featured_races a").hover(function(){
    cur == "feat" ? $("#chooser_nav").attr("class", cur) : $("#chooser_nav").attr("class", cur+"feat");
  }, function(){
    $("#chooser_nav").attr("class", cur);
  });

  $("#invitational_races a").hover(function(){
    cur == "inv" ? $("#chooser_nav").attr("class", cur) : $("#chooser_nav").attr("class", cur+"inv");
  }, function(){
    $("#chooser_nav").attr("class", cur);
  });

  $("#behind_the_scenes a").hover(function(){
    cur == "bts" ? $("#chooser_nav").attr("class", cur) : $("#chooser_nav").attr("class", cur+"bts");
  }, function(){
    $("#chooser_nav").attr("class", cur);
  });

, Moz WebKit . , . IE7. IE6 . , DOM MS -. , jQuery . , .

... , Crackoverflow... ...

EDIT: className vs. setAttribute... . attr ( "class", cur) . , , ... .

2: jQuery- : , . , , ... , . , , , - CSS, ...

Answer 1

: 1

, hasLayout . , , , position = relative z-index = 1, hasLayout. + .

/* fix hasLayout bug for IE */
div#id {
  _height : 0;
  min-height : 0;
}

: Rendering bug 2

, , . DOM , :

document.body.className += '';

:

IE6 , , ID + Class, .

div.class1.class2 {
  border : 1px solid red; /* this will normally not work in IE6 */
}

IE # id.class ( , ), IE6. .

, , .

, :

.inv#chooser_nav { background-position : 0 -114px; }

:

#someparent .inv { background-position : 0 -114px; }

IE6 , .

, . , , IE6 , , .

Answer 2

IE6 "" CSS, .

#chooser_nav.bts {background-position:0 -228px;}

chooser_nav class bts. ( ) IE6. - , :

.bts {background-position:0 -228px;}

#chooser_nav_parent .bts {background-position:0 -228px;}

Answer 3

className DOM. setAttribute() IE < 8.

Answer 4

; , , , . , , .

DD_belatedPNG.

Answer 5

I had this problem in ie7.

Basically, I changed the class to the parent element to hide some elements and show others. the class has changed, and the element that was shown when the page was loading was hiding and showing fine, but the element that was not showing when the page was loading was never shown.

I noticed that this happened only in some scenarios (God only knows to predict it).

My solution was to hide elements only after the page was loaded using javascript.