Some IE6 ‘niggles’….

Been working with IE6 recently, (yes, the browser even MS has shunned) and have amazingly come across some issues!

I thought I would share some of them with anyone who cares to read this blog, as you may well come across them too!

Concatenated classes in CSS selectors? No Thankyou says IE6!

Spent a while the other day trying to prove that it’s “really easy” to skin dojo dijits for use on a clients system recently, and wrote some efficient CSS to enable the application of different classes for size, colour and type etc… Trouble is, I couldn’t get the bloody thing to work! Tried everything, but alas, hit the IE6 CSS selector brick wall.  Turns out, that IE6 only sees the last class you apply! So something like the following:

.dijitButton.Big.Red {
	//make this button big and red
}

.dijitButton.Small.Red {
	//make this button small and red
}

Kept making all of my “Red” buttons go small, no matter what code I put in the first CSS section. Now this may not seem like a big problem in this case, but take a look at the following:

.dijitButton.Big.Red {
	background: red;
}

.dijitTextBox.Red {
	color: red;
}

In this case, when you apply this CSS to your IE6 page, it cannot tell the different between the two selectors. All it sees is the class “Red” and will match both rules to anything with this class. The result, a useless dijitTextBox with a red background AND a red foreground!
The way around this seems to be to use large, unruly, nasty, horrible, unmaintainable, slow, inefficient combined classes… ie.

//when mouse out
<div class="outerDivBlue">
	<span class="innerSpanLarge"></span>
</div>

//when mouse over (after some JS)
<div class="outerDivBlueHover">
	<span class="innerSpanLarge"></span>
</div>

Thus meaning that you CSS needs to cover every base when defining selectors. ie.

div.outerDivBlue span.innerSpanLarge,
//shouldn't need this second line!!!
div.outerDivBlueHover span.innerSpanLarge {
	float: left;
	background: blue;
	min-width: 200px;
}

Anyway.. hopefully you can see my point! Luckily, it turns out that some dijits like dijit.form.Button allow you to override the baseClass, thus giving you this class concatenation for free.

<div dojoType="dijit.form.Button" baseClass="tomButton">Text</div>

<!-- Now I have access to exciting classes such as:
	tomButtonHover, tomButtonActive and tomButtonFocused -->

So someone’s done the hard work for us! Oh, and if you’re wondering why I didn’t just use Pseudo Classes like :hover etc.. I laugh in your general direction…IE6 knows not of such useful ‘Pseudo classes’…Oh, and final thought… IE6 seems to prefer CSS ordering to selection specificity, brilliant…!

So Thank-you MS..you are a winner!