Multiple Classes in IE
Monday, June 4, 2007 at 11:57 pm | Comments off
I'm going to explain the use of multiple classes, and where IE6 chokes. When writing CSS, I find that it is often very nice to use multiple classes, so you can have a base CSS class to set up some default styles and then add an additional class to add more meaning. This is a technique I often use, setting up my base module as
div.box and then adding additional classes to that base CSS to create new modules. Take this CSS, for instance:
So, if I have
<div class="box featured">, the classes for
div.box.featured will be applied to the
div, giving it a "featured" style.
Working with IE6
IE6, however, has an interesting caveat with multiple classes. IE6 does not make a distinction between the following rules:
How these rules should work is like this:
div.box.featured applies to
<div class="box featured">
div.featured applies to
<div class="box featured"> OR
However, in IE6,
div.box.featured works the same way as
div.featured. IE6 doesn't understand the chain of classes within a CSS selector, but rather only reads the last class. So, IE6 reads
div.featured, while Firefox and IE7 will only apply the "featured" styles if the
div also has a class of "box". For the most part, this isn't a big problem, as usually when you apply multiple classes, you want them all to apply. Let's look at an example of where this goes wrong. In this example, I have a table with zebra rows, and also want a darker "selected" state if the checkbox is checked.
The HTML would look something like this:
And this is the CSS:
IE 6 does not understand the difference between
td.alt.selected, meaning your selected state cannot have zebra rows, using this technique. You would have to create them as separate classes,
.selected_alt, which means you would have to do more computing with you JS or PHP (or other server side language).
I've created a demo of the zebra rows example.
Comments are automatically closed after 45 days