Hi, 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!
-
Seems I was a bit quick,
just saw that this just happens if i use
.LeftContent .MenuButton.Orange{} and such.
If I use (like I wrote in the question), tag-specific rules,
like .LeftContent a.MenuButton.Orange, it works... -
IE6 doesn't support multiple class selectors. The reason you see a change with the
Orangeclass is becausea.MenuButton.Orangeis interpreted by IE6 asa.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.
-
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.
Borgar : +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.bobince : lol, don't go overboard on the shame, it's only SO :-) -
Dean Edwards' IE7 script adds multiple class support for IE6. See http://code.google.com/p/ie7-js/
0 comments:
Post a Comment