Wed

07

Jan '09

IE6 & Multiple CSS selector support

The situation

An ordered list of pagination links (numbers 1-5 for example which indicate which ‘page’ of image thumbnails is currently visible on a page), using CSS sprites with 3 states (normal, hover and active)

The thumbnails & pagination links are generated dynamically depending on how many images there are in the current section and each pagination link is marked up as follows:

<ol id='thumbnailPaginationList'>
	<li><a href='#' class='index1'>1</a></li>
	...
	<li><a href='#' class='index5'>5</a></li>
</ol>

with a class ‘index#’ to allow targeting of the links1

When the page is initialised the class ‘active’ is added to the 1st link:

<ol id='thumbnailPaginationList'>
	<li><a href='#' class='index1 active'>1</a></li>
	<li><a href='#' class='index2'>2</a></li>
	...
	<li><a href='#' class='index5'>5</a></li>
</ol>

When any of the links is clicked the ‘active’ class is removed and added to the newly clicked link (using jQuery in this particular case) – the reason for this is that the thumbnails scroll within the same page and don’t actually link to a new page2

The CSS for styling the 1st link is as follows:

#thumbnailPaginationList a.index1 {
	background-position: 0 0;
}
#thumbnailPaginationList a.index1:hover {
	background-position: 0 -20px;
}
#thumbnailPaginationList a.index1.active {
	background-position: 0 -40px;
}

The problem

Works fine in all browsers except IE6 – where each of the pagination links gets the last ‘active’ state image when active – i.e. if any page (1-5) is active that link shows the image for number ‘5’ – so if page 2 is active the list of links reads ’1 5 3 4 5’.

The solution

It turns out that IE6 (and IE/Mac/5.x but who cares about that) support multiple classes on an element just fine (i.e. classes separated by spaces like class='index1 active' applies styles defined by .index1 { style rules } and .active { style rules }) without a problem. Where it fails is supporting multiple CSS selectors on a single element – something like

#thumbnailPaginationList a.index1.active {
	background-position: 0 -40px;
}

which should select any element with classes index1 and active doesn’t work in IE6.

More information

I found this post by Sam Brown on incutio.com which explains what is happening:

[in IE6] The multiple selector will select every element with the last class in the selector (order in the selector is important, order of the classes in the HTML is not), regardless of the presence of the other classes. In other words, IE treats .one.two.three exactly as it does .three.

Which is why my last link was always being styled with the last rule in the stylesheet to contain the ‘active’ class (within the confines of the cascade above the element):

#thumbnailPaginationList a.index5.active {
	background-position: 0 -40px;
}

Following the advice in the post I re-jigged the code to put the ‘active’ class on the list element rather thank the link which means just one class per element:

<ol id='thumbnailPaginationList'>
	<li class='active'><a href='#' class='index1'>1</a></li>
	<li><a href='#' class='index2'>2</a></li>
	...
	<li><a href='#' class='index5'>5</a></li>
</ol>

then updated the jQuery and CSS, which fixes the problem – but as IE6 market-share continues to decline, I would also considering not bothering, depending on the job…

1 If there is only one gallery on the page it would probably be better to make these Id’s, then we wouldn’t run into the problem…

2 The demonstration code shown here uses null links, in production code these would point to a javascript-free alternate method of browsing the gallery to make sure it is accessible to all.

3 Comments

gravatar#1 Matt

“I found this post by Sam Brown on incutio.com which explains what is happening”

... wow, I hadn’t realised my girlfriend had a secret double life!

posted by Matt, Jan 9, 09:04 AM

gravatar#2 James

Seriously? Does this mean Sam has more CSS-foo than you?

posted by James, Jan 9, 10:32 AM

gravatar#3 Chris Patterson

If you’re using jQuery on your site and are running aground on selector issues, you might be interested in the SuperSelectors plugin I just did: http://skulljackpot.com/2009/04/19/super-css-selector-support-with-jquery/

It goes through your site’s stylesheets, dynamically adding classes to elements so that even IE6 can bask in the glow of properly supporting CSS selectors like ul li:first-child li:nth-child(odd) a:hover

posted by Chris Patterson, Apr 21, 08:58 PM

Leave your comment

Please keep all comments and opinions polite and on topic. Consider signing up for a Gravatar (Globally Recognized Avatar) to make the web a more personable place. Your email address is required to post, but it won't be displayed to anyone else.

your comment