March 12, 2008

Reason #1,818,342 IE6 sucks: Multiple classes

Let’s say I have CSS like so:

    body.two-col.HomeFinancing.top #col1 { ... }
    body.two-col.SecurityCenter.top #col1 { ... }

I’m building up my two-column layout, I’m in the HomeFinancing section of the site, and it’s the top of the section. Essentially it’s a scenario for a unique background header image.

IE6 ignores .HomeFinancing and .SecurityCenter. It just sees .top on the last stated rule, for .SecurityCenter.

I haven’t seen this documented elsewhere, but I’ve run into it multiple times doing cleanup on a site, not just with this set of rules. I’ve not seen a case where referring to two classes has broken in IE6, not ruling it out as a problem, though.

Consider yourself warned.

•