IE ignoring CSS even though it has higher specificity.

Question

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!

Answer 1

have you tried adding !important to it? i.e.

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

Answer 2

Did you try looking at the image itself? Using colours instead of images, ie8 seems to display the .gray class fine:

http://screencast.com/t/YzA4MGEx

Answer 3

As per my 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! What is IE's issue with button:disabled as it completely stops listening to the entire declaration?

Answer 4

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.