Search code examples
csscss-specificity

IE ignoring CSS even though it has higher specificity

I have some sliding door button css.. I use a button tag and two inner spans.

I have this to specify the background image of a normal button;

button span {
 background: url(button_right.png) no-repeat top right;
}

Which is the default button colour. I then have a 'gray' button (i give the button a class of 'gray').

button.gray span {
 background: url(button_right_gray.png) no-repeat top right;
}

For some reason .. IE(8) doesn't like this and ignores the gray css keeping the original image as the background. However, the following "hover" css DOES work in IE;

button.gray:hover span span {
      color: #6c6c6c;
      background-position: left -29px;
  }

I thought that 'button.gray span' has higher specificity than just 'button span' (it does in all other browsers).

EDIT: Ok, so I've discovered the problem. In my CSS declaration I had the following

button.gray span,
  button:disabled span {
background: url(button_right.png) no-repeat top right;
}

If I remove the button:disabled span from the declaration list, it works!

Solution

  • IE does not support the :disabled pseudo class selector. IE's behaviour is to skip the entire rule when it encounters an invalid or unrecognised selector (which is actually in line with the specification - even if not supporting :disabled in the first place is not!), so that would explain what you're seeing.