Skip to content

Nasty IE6 CSS bug

Probably not new, but I can’t find mention of it anywhere so I’ll post it here:

#foo.bar,
#foo.baz {
 background: blue;
}

In the CSS above, #foo.baz effectively neutralises #foo.bar in Internet Explorer 6. It will never be applied. The same happens even if you separate the grouped selector into two statements like this:

#foo.bar {
 background: blue;
}
#foo.baz {
 background: blue;
}

Anyone seen this before? It’s hard to think of a short description, or something to Google for. “IE6 grouped selector with combined id and class selector bug”.

I worked around it by removing the classes from the selector (which was fortunately possible in this case.)

And before you ask, one of our largest clients is a multinational corporation whose internal IT policy has standardised on IE6.

[Update: As usual, spelling out the problem helped me find other mentions of it here and here.]