IE6/Win id & class combo bug

IE6/Win (I don't know about other versions) has a bug that prevents perfectly valid CSS declarations from being applied. When you declare multiple rules of the form #idName.className { /* . . . */ }, IE only remembers the first one for each set of rules with the same #idName.

Example CSS

	#buggydiv.highlighted
	{
		background-color: #ffe;
		color: #f00;
	}
	#buggydiv.lowlighted
	{
		background-color: #eee;
		color: #aaa;
	}

Example HTML

	Test case 1: <div id="buggydiv" class="highlighted">This <div> should be red on yellow</div>
	Test case 2: <div id="buggydiv" class="lowlighted">This <div> should be dark gray on light gray</div>

Workaround

Drop the #idName part of the declaration:

	.highlighted
	{
		background-color: #ffe;
		color: #f00;
	}
	.lowlighted
	{
		background-color: #eee;
		color: #aaa;
	}