24

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!

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Morten Bergfall
  • 2,296
  • 4
  • 20
  • 35
  • Is the !important property available on IE6 and under? Can be also a possible fix depending on the situation. – artdias90 Feb 10 '14 at 11:53

3 Answers3

39

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.

Borgar
  • 37,817
  • 5
  • 41
  • 42
17

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

Squig
  • 862
  • 6
  • 15
7

If I use (like I wrote in the question), tag-specific rules, like .LeftContent a.MenuButton.Orange, it works...

It only matches them if the classes in the selector are in the same order as the classes on the element.

This isn't quite true. IE6 (and IE7 in Quirks Mode) only remembers one class per selector-part. If you write two, the second one overrides the first. So ‘a.MenuButton.Orange’ is identical in effect to ‘a.Orange’.

So multiple class selectors do still have to be avoided for now.

Community
  • 1
  • 1
bobince
  • 528,062
  • 107
  • 651
  • 834
  • +1. This is what I had originally written, but the internets had other things to say and I foolishly believed it without testing. I have rolled back my edits and hung my head in shame. – Borgar Nov 23 '08 at 18:33