Internet Explorer ID-Class Bug

Over at ryanbrill.com, I’ve previously written about the multiple class bug in IE6. Today, we’re going to look at another similar IE6 bug: the ID-Class bug.

It seems that IE6 chokes when you have an element with an ID and several different class states. A common example is when you add a page class to your #content div. Take this example:

Home page:

<div id="content" class="home">
	<p>Home page</p>
</div>

About page:

<div id="content" class="about">
	<p>About page</p>
</div>

CSS:

#content.home {
	background: blue;
}
#content.about {
	background: red;
}

Given that code, IE will only ever add the styles to the #content.home div. #content.about or any subsequent styles following the #id.class paradigm will not get applied. Note that the order of the classes in the CSS is key here. If you move the #content.about rule above the #content.home rule, then the #content.home rule will no longer work.

So, how to fix this?

There are two options. The easiest one is to simply remove #content from the selectors, leaving you with:

.home {
	background: blue;
}
.about {
	background: red;
}

This may not necessarily be the best solution, as now you have generic classes that could be applied elsewhere (for instance, <a href="index.html" class="home">).

That brings us to another key part of this bug. This is only relevant if the #id.class is the last item in the selector. So, another option is to move the class higher up in the source, perhaps to a #container div:

#container.home #content {
	background: blue;
}
#container.about #content {
	background: red;
}

That will work fine, as the #id.class is no longer last in the selector. This is the solution I recommend, as you won’t have to worry about a generic class being added to un-intended elements.

Posted by R. Brill
Tags: Bug, Class, ID, IE, IE6

This entry was posted on Friday, February 15th, 2008 at 2:36 pm and is filed under HTML / CSS, Technology. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.