Question

is there any way to make IE6 understand double classes, say I have a class MenuButton with a color class and possibly a clicked class; like :

.LeftContent a.MenuButton {..general rules..}   .LeftContent a.MenuButton.Orange {..sets background-image..}   .LeftContent a.MenuButton.Clicked {...hum ta dum...} 

Now, IE6 understands <a class='MenuButton Orange'>, but when adding Clicked, like <a class='MenuButton Orange Clicked'>, IE just ignores the Clicked rule.

Of course, I could rewrite my CSS, and have own rules for .MenuButtonOrange
and such (and it’d probably taken a lot shorter time than asking this question ;-),
but golly, it just so unappealing and Web 0.9…

Cheers!

Answer 1

IE6 doesn’t support multiple class selectors. The reason you see a change with the Orange class is because a.MenuButton.Orange is interpreted by IE6 as a.Orange.

I recommend structuring your markup in such a way that you can work around this:

<div class='leftcontent'>    <ul class='navmenu'>      <li><a class='menubutton orange' href='#'>One</a></li>      <li><a class='menubutton orange clicked' href='#'>Two</a></li>    </ul> </div> 

By grouping by a more specific ancestor you can create variation with classes scoped by that ancestor (in this example navmenu):

.leftcontent .navmenu a { /* ... basic styles ... */ } .leftcontent .navmenu a.orange { /* ... extra orange ... */ } .leftcontent .navmenu a.clicked { /* ... bold text ... */ } 

It’s not as good as multiple classes, but I’ve used it to work around the lack of support in IE.