CSS Bug in MSIE 6 - Selector with an ID and a Class on the Same Element

I ran into an interesting CSS bug in MSIE 6 recently while coding up a dynamic portion of the new Yahoo! Games pages. I wasn’t able to find any information about it online, except for one message board entry from last year which was less than helpful. (This is the one that I mentioned yesterday.)

If you’d like to skip my analysis, feel free to go to the example page.

Let’s say that you have an element with an ID of “id.” You want to style this element differently based on its class. This could be because it has different classes on different pages, or, as in my case, you’re switching the className via javascript. Either way, you might set up your CSS like this:

#id.classOne { some styles… }
#id.classTwo { some different styles }

The problem is that, in IE, the second CSS declaration will not be applied when you swap the className.

I found that, for some reason, if you put the two declarations in two different style declarations, or in separate stylesheets, it will work just fine.

It’s interesting to note that, when you tell the document to spit out its CSS information, it returns different stuff in Mozilla vs. IE. In IE, the info gets switched around, so that the className is first, and the ID second. So, once the CSS is parsed, it looks like this:

.classOne#id { some styles… }
.classTwo#id { some different styles }

Either way, it should be completely valid CSS, and should be applied properly. But, for some reason, the IE CSS engine never applies the second rule — if they’re in the same styleSheet object.

So, how to get around the problem?

Well, I was using two different stylesheets. However, that got hairy, and fast. It wasn’t so bad when we had only two states, but then UED told me that we need a hover state, as well as normal and ascending/descending. So, three stylesheets… What happens when we want to style “ascending” and “descending” differently? Add a fourth? Ugh. The mark of a bad design is when you get that feeling that you’re going to have to keep tweaking it forever.

Since I was swapping out a background image, I changed things around. First of all, I set it up to use sprites instead of three separate images. Then, I set up rules to use a different background-position rule for .hover, .asc (ascending), and .desc (descending). The only thing that had to hang in the ID was thus the background-image, so I was able to get rid of any and all #id.className selectors.

Check out the example page, and compare the behavior of IE vs Mozilla (or any other browser, really.) Also note the way that the parsed CSS looks different in different browsers.

4 Responses to “CSS Bug in MSIE 6 - Selector with an ID and a Class on the Same Element”

  1. On April 14th, 2006 at 08:34:39, Isaac Said:

    PPK was nice enough to publish this bug on the quirksblog.

  2. On July 12th, 2006 at 19:25:45, Kelly Taylor Said:

    I’m very glad that you figured out the work-around for this. Thanks for posting it, I’m working on automating the process now.

  3. On July 13th, 2006 at 10:10:28, Isaac Said:

    The page that I was building where I encountered this is now live. Check it out:

    http://games.yahoo.com/hub/goto?gn=all

    In particular, look at the TH elements that you can click to sort the table.

  4. On January 23rd, 2007 at 02:43:08, sodamnmad Said:

    I’m hosting Kelly’s automated fix at: http://thedeanda.com/ie-multi-selector

Leave a Reply

Comments are moderated like crazy using a variety of plugins. There is a very high likelihood that your comment won't show up right away, especially if you have never commented here before, but it was not deleted.

Please be patient, and do not post your comment more than once. It will show up once it is approved.

You must be logged in to post a comment.