Combining class and id selectors - IE6 anomaly?

Hi there, 

I am attempting to structure a css file using ID selectors for the page
architecture and then use class selectors to vary the style of these
areas on a contextual basis. 

The following works in every browser except IE 6 it seems (including IE5
and IE 5.5):

<style type="text/css">
	#content.aboutUs {color: blue;}
	#content.products {color: red;}
</style>

<div id="content" class="products">
Test Text
</div>

For some reason if you declare a combined id and class selector *within
the same style block or stylesheet* ie 6 will only listen to the one
that is declared first. Even if this selector is not present within the
html document!

Does anyone know why this is?

I have alternatives of couse, but this one is more mark up and is
uglier:

<div id="content">
	<div class="products">
	Test Text
	</div>
</div>

.... Or just using class selectors

<div class="content products">
	Test Text
</div>

The last one might have worked except div.content.products in IE applies
automatically to *anything* with products as class attribute, for
example:

<div class="products">test</div>

Div.somethingimadeup.products {color: red;}

Looking forward to your thoughts, 

Keith

Received on Tuesday, 14 September 2004 02:38:31 UTC