Paul Irish

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:

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:

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:

#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

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

, 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:

• Don't let the #id.class combo be the last selector: Multiple selectors of this type #tooltip.yellow div will be fine.
• Move the class to a parent container: div.yellow #tooltip will not mess up anything.
• Make your classes be superspecific and dont use an ID in your selector: div.yellowtooltip. You'll have to repeat yourself with duplicate CSS definitions, but you can thank IE6 for making your day miserable, yet again. :)

Paul Irish front-end development