Layered CSS Inheritance Issue in IE

Question

I have a class called ".spr" (for image sprite) and many classes that change the width, height and background-position attributes to display the different parts of the sprite.

I also have .on classes for switching between images appearing in the on or off state.

The problem is that in IE the “on” class, which must be associated with a particular class, is applied to a button that does not have a corresponding class (but another).

Screenshot:

CSS:

.spr.burst.been {background-position: -241px -89px; .spr.burst.on { background-position: -301px -89px !important; } .spr.radiobutton {background-position: -250px -249px; } .spr.radiobutton.on { background-position: -250px -218px; border: 3px dashed red; } 

As you can see, IE9 interprets the class

 .spr.radiobutton.on 

a

 .spr.on 

and since it comes later in the stylesheet, it overrides the properties

 .spr.burst.on 

though

 .spr.burst 

doesn't have a class

 .radiobutton 

How to apply these composite styles in IE?

Answer 1

If your page does not have a proper doctype declaration, IE9 will enter quirks mode and process the class selector chains just like IE5 / IE6: it will only read the last class and apply the rules accordingly.

As a result, the .spr.radiobutton.on selector .spr.radiobutton.on indeed interpreted as simply .on (and not .spr.on ), overriding the old rule that, in his opinion, only the .on selector .on .

Just give your document a doctype declaration, and IE9 will behave as expected.