5

I have the following HTML markup:

<div class="drag a"></div>
<div class="drop a"></div>

I also have the following CSS rule, which should only be applied to my 2nd div:

.drop.a
{
   background-color:red;
}

This is working fine, except in Internet Explorer 9 the CSS rule is being applied to both elements.

Why is this? I thought this kind of CSS was universally compatible with all browsers?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Curtis
  • 101,612
  • 66
  • 270
  • 352

1 Answers1

10

I thought this kind of CSS was universally compatible with all browsers?

Nope. IE up to and including version 6 ignores all class selectors in a chain except the last one. IE9 may be rendering your page in quirks mode, meaning it'll act like its predecessors, and treat your .drop.a selector as .a instead.

Try adding a doctype declaration to your page and see if that fixes it. If you already have one on your page and you're still seeing this behavior, something else is wrong.

Community
  • 1
  • 1
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • 3
    +1 Thanks! I'm adding drag/drop functionality to a page which must have been created around early 2000's, and theres no doctype at the top, I didn't think to check. This has resolved my issue. I'll mark as answer in 6 mins – Curtis Apr 12 '12 at 13:18