Priority on multiple classes

[GoogleCodeExporter]

You can see the problem here : http://essais.pierrebertet.net/IE7/test1.htm

The script used is IE7.js.

CSS :
.test.test2{background:#ccc;}
.test2{background:none;}

HTML :
<div id="group-2" class="test test2">
[...]
</div>

In all browsers, the second element has a grey background.

In IE6 with the script, the background is "none".

Original issue reported on code.google.com by pierre6...@gmail.com on 10 Jan 2008 at 11:47

[GoogleCodeExporter]

If you change the order of your css, then your page will work in IE6:
chnage:
.test.test2{background:#ccc;}
.test2 {background:none;}

into:
.test2 {background:none;}
.test.test2{background:#ccc;}

Original comment by hans.ver...@uniway.be on 15 Jan 2008 at 3:05

[GoogleCodeExporter]

This is related to CSS specificity. IE7 replaces unknown selectors with an IE7 
class
so that:

.test.test2 --> .ie7_class0

The trouble is that this changes the specificity of the rule. IE7 attempts to 
keep as
much of the rule's specificity as it can. I've improved the algorithm slightly 
in the
next release and this particular bug will be fixed by the change, However, there
where still be occasional situations where this bug will still show up.

Original comment by dean.edw...@gmail.com on 15 Jan 2008 at 8:23

• Changed state: Started

[GoogleCodeExporter]

Original comment by dean.edw...@gmail.com on 15 Jan 2008 at 8:26

[GoogleCodeExporter]

This is now as fixed as is possible but still not 100% fixed. :-(

Original comment by dean.edw...@gmail.com on 4 Feb 2008 at 6:29

• Changed state: Fixed