mtcodex

Multiple CSS classes and IE6

• home
• work
• about
• journal
• contact

Multiple CSS classes and IE6 Tuesday evening, 22 August 2006

You’ve written some clean XHTML using unordered lists for that navigation, you’ve created devastatingly efficient CSS to render all the different states using multiple classes, and then you open it up in Internet Explorer 6. What went wrong!?

Many people have documented the effects of rendering multi-class elements but I haven’t read many explanations of how to make your designs work in IE6. This short post will hopefully explain that.

I recently had to do a somewhat complicated (graphically) multi layered nav system for a web app. Because each top level link had an individual icon I had to apply the correct background to show whether it had children or not to the list (li) element (the icon went on the anchor):

<li class="complaints"><a href="#">Complaints</a></li>
<li class="unsubscribes"><a href="#">Unsubscribes</a>
  <ul>
    <li><a href="#">By Email</a></li>
    <li><a href="#">By Clicks</a></li>
  </ul>
</li>

The complication comes from the fact that there are four background styles that could be applied to any given list element. Unselected - no children, Selected - no children, Unselected - children, Selected - Children. These can be seen in a composition of the nav from the code example above.

Now, one would think that by adding a class to each li that has children (a javascript function does this dynamically) one would be able to represent each of the background states for the lis using CSS. e.g.

/* No Arrow, Blue*/
#sidebar ul li {background :#EEF1F2;}

/* No Arrow, White*/
#sidebar ul li.selected {background: #FFF;}

/* Arrow pointing right, Blue*/
#sidebar ul li.children {background: #EEF1F2 url(../images/interface/nav_arrowuptop.gif) 4px 8px no-repeat;}

/* Arrow pointing down, White */
#sidebar ul li.children.selected {background: #FFF url(../images/interface/nav_arrowdown.gif) 4px 8px no-repeat;}

Looks good to me, a standard li element won’t have an arrow image as it does not contain the children class and a selected li element with children will get the background arrow image due as it has higher specificity. However what actually happens in IE6 is that all selected li elements who a background image, wether they have the children class or not. After much toying and experimenting I got to the crux of the matter. The specificity is irrelevant in this instance...

In Internet Explorer 6 the last class name in a CSS style declaration is applied to the the html element with that class REGARDLESS of whether the rest of the class names match.

This means that in some instances you will have to be slightly less efficient with your code and add some extra class names to the HTML in order for your designs to work properly. In this instance I applied a class named single to all those li elements with no children via javascript and rewrote the CSS as follows:

#sidebar ul li.children {background: #EEF1F2 url(../images/interface/nav_arrowuptop.gif) 4px 8px no-repeat;}

#sidebar ul li.children.selected {background: #FFF url(../images/interface/nav_arrowdown.gif) 4px 8px no-repeat;}

/* li.single.selected would overwite the previous style!*/
#sidebar ul li.selected.single {background: #FFF;}

#sidebar ul li.single {background: #EEF1F2;} 

Notice that the last class name in each declaration is unique, this way they can all work harmoniously in IE6 without having to calculate specificity, which as I mentioned earlier becomes irrelevant in IE6 under these circumstances. Well, maybe not definitely irrelevant but too complicated for me to calculate! The final generated HTML looks as follows.

<li class="complaints single"><a href="#">Complaints</a></li>
<li class="unsubscribes children"><a href="#">Unsubscribes</a>
  <ul>
    <li class="single"><a href="#">By Email</a></li>
    <li class="single"><a href="#">By Clicks</a></li>
  </ul>
</li>

 

Comments