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:

enter image description here

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?

Do you have document to try this?

c-smile
– c-smile

2011-05-19 18:07:24 +00:00
Commented May 19, 2011 at 18:07 — c-smile
– c-smile, Commented May 19, 2011 at 18:07

Community · Accepted Answer · 2017-05-23 12:30:38Z

5

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.

edited May 23, 2017 at 12:30

CommunityBot

11 silver badge

answered May 19, 2011 at 18:06

BoltClock

728k165 gold badges1.4k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

NGLN Over a year ago

Always add a doctype declaration, regardless the browser. ;)

diurnalist Over a year ago

Just saved me some headache... thank you! IE9 is incredibly pessimistic to fall back to IE6 selector parsing >.<

Brett Hannah Over a year ago

Just what I was looking for! For hours I was wondering why ie9 was as cccccr@p as ie6!

Collectives™ on Stack Overflow

multiple-class CSS inheritance problem in IE

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related