Current Windows Internet Explorer versions do not support multiple class selectors in style sheets. This has been well known for a while; this article shows a technique I have used to work around this limitation.
Windows Internet Explorer version 5.0, 5.5 and 6.0 see only the last class name in any CSS rule that uses multiple class selectors. For example, the selector p.blue.green is interpreted exactly as if it read p.green. Here’s an example.
<html>
<head>
<title>Test</title>
<style type="text/css">
p.blue { color: blue; background-color: #ccf; }
p.red.blue { color: magenta; }
p.green.blue { color: cyan; }
</style>
</head>
<body>
<p class="blue">class="blue" (should be blue with light blue background)</p>
<p class="red blue">class="red blue" (should be magenta with light blue background)</p>
</body>
</html>Firefox (for example) renders this page correctly, with the first line blue and the second line magenta. Windows Internet Explorer (versions 5, 5.5 and 6) display both lines as cyan, because they see all three stylesheet rules as applying to p.blue, and the last one takes precedence.
You can work around this in a systematic (though ugly) way as follows. Replace each multiple class selector rule with a single class selector, where the class name is a combination of the multiple class names. Then in the HTML , add the new combined class name to the class list of the applicable elements. Note you have to add the new class, not replace the existing ones, because otherwise any single-class selector rules will no longer apply to the element. Here is an example of a page extract.
<style>
element.class1.class2.class3 { }
</style>
...
<element class="class1 class2 class3">And here is the extract after applying the transformation.
<style>
element.class1-class2-class3 { }
</style>
...
<element class="class1 class2 class3 class1-class2-class3 ">Applying the transformation to the initial example yields the following, which works in Internet Explorer as well as Firefox and other browsers.
<html>
<head>
<title>Test</title>
<style type="text/css">
p.blue { color: blue; background-color: #ccf; }
p.red-blue { color: magenta; }
p.green-blue { color: cyan; }
</style>
</head>
<body>
<p class="blue">class="blue" (should be blue with light blue background)</p>
<p class="red blue red-blue">class="red blue red-blue" (should be magenta with light blue background)</p>
</body>
</html>This could quickly become confusing and inflexible, so it’s best to keep it to a minimum. No doubt it gets more complex when combining it with other selectors (ID selectors, pseudo-class, etc.). The technique shown here can at least help in the common multiple-class case.
Thanks Bennett…
Saved me pulling my hair out 🙂
Typical IE behaviour init.. *almost* to spec but never quite there.
Great !
I was going mad with IE !
Kewl trick !
I haven’t yet tried this in IE7, but I would expect that the new IE will do the right thing. By the time I have enough spare time to test it on IE7, version 8 will be near…
I can confirm that, at least in strict mode, IE7 does the right thing.
Thanks for that Jeremy Dunck! Was trying to figure out where this is supported.
BTW – Here is a greate javascript library that solves this particular problem, and a bunch of others, if you are willing to force IE6 users to download another script file. 🙂
http://dean.edwards.name/IE7/
Thank you, thank you, thank you.
I was pulling my hair out trying to figure out a hack. It worked like a charm.
PS: IE6 sucks and shame on those who still use it!