multiple-class CSS inheritance problem in IE

Question

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

I also have ".on" classes to toggle between images appearing in an "on" or an "off" state.

The problem is that, in IE, the "on" class that should be associated with a certain class is being applied to a button that doesn't have that associated class (but a different one).

Screenshot:

The 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 

as

.spr.on

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

.spr.burst.on

even though

.spr.burst

does not have the class

.radiobutton

How can I properly apply these composite styles in IE?

Answer 1

If your page doesn't have a proper doctype declaration, IE9 will go into quirks mode and treat chained class selectors exactly like IE5/IE6 does: it'll only read the last class and apply rules accordingly.

As a result, the selector .spr.radiobutton.on is really being interpreted as just .on (rather than .spr.on), overriding the earlier rule that it thinks also has just the .on selector.

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