CSS Transparent Voodoo?

By Deane Barker on June 14, 2008

Here’s a question for you all: is there anything magic about the CSS value “transparent”? Does this value change a selector’s specificity?

I had a class with this rule:

a.SomeClass
{
  background-color: transparent;
}

Below that, I had another rule:

ul#SomeId li.SomeClass a.SomeClass
{
  background-color: [some specific color];
}

This is a much more specific rule, obviously, and on IE6 and Firefox, it override the prior background color of “transparent,” as expected.

But on IE7 it wouldn’t. I have no idea why, but IE7 would not override the “transparent” background color. Weird thing was, if I changed the first rule to this…

a.SomeClass
{
  background-color: [some other specific color];
}

…then it would override it. So IE7’s CSS implementation refused to override “transparent,” but it would override any specific color.

Why would this be? And why only IE7, of all browsers? It worked correctly in IE6, which is always something of a miracle. I’m mystified.

Gadgetopia