The two CSS Selector bugs in IE6 (original) (raw)

Internet Explorer 6’s CSS selector support is a far cry from every other A-Grade browser. It doesn’t handle attribute tags, adjacent or child selectors, or the :first-child psuedo-selector. And yes, it sucks. We deal with it.

But beyond selectors not being implemented, there are two BUGS when it comes to selectors in IE6:

The multiple class bug

When you define rules like:

1 p.disclosure.warning { text-align: center; color: red; }

Most browsers will apply this to any P tags with both the class disclosure and warning. IE6, however, will only apply this to P tags with the last class mentioned; in this case, P tags with the class warning. so IE6 pretends like you wrote:

1 p.warning { text-align: center; color: red; } /* no .disclosure */

Workarounds are typically not hard, but staying aware of this fact will save you time debugging.

The ID-class bug

When you define a block like:

1 2 #tooltip.red { background: white; color: red; } #tooltip.yellow { background: black; color: red; }

IE will ignore the the second rule. So even if you have a

1 <div id="tooltip" class="yellow">I'm on a black background in yellow text!

, IE will not apply the CSS styles you had defined for it. If you have laid our rules for the same ID but different classes, it will ignore all CSS rules defined after the first one. (Your red tooltip will be fine).

Solutions: