Use double classes in IE6 CSS?

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.

Answer 2

Dean Edwards' IE7 script adds multiple class support for IE6. See http://code.google.com/p/ie7-js/