CSS Not Working (IE 6)

Okay, this code works fine in both FF2 and IE7. However, in IE6, it will only display the random background for the first option. I don't get it.


#sidebar {
width: 250px;
height: 250px;
position: absolute;
right: 0;
top: 183px;
}
#sidebar.rand1 { background: url(../imgs/rand1.gif) left top no-repeat; }
#sidebar.rand2 { background: url(../imgs/rand2.gif) left top no-repeat; }
#sidebar.rand3 { background: url(../imgs/rand3.gif) left top no-repeat; }
#sidebar.rand4 { background: url(../imgs/rand4.gif) left top no-repeat; }
#sidebar.rand5 { background: url(../imgs/rand5.gif) left top no-repeat; }


The HTML looks like this:


<div id="sidebar" class="rand2">
<h3 class="rnd3"><a href="http://kiswa.com/work" title="View my work">My Work</a></h3>
<p><a href="http://kiswa.com/work" title="View my work">See how my designs can help you.</a></p>
</div>


As you can see, I do the same thing for the h3 within that 'sidebar' div. That one works in all tested browsers, no problem. This makes me even more confused.

Here's the CSS for the h3:


#sidebar h3 {
position: absolute;
bottom: 42px;
right: 10px;
width: 158px;
height: 32px;
}
#sidebar h3.rnd1 { background: url(../imgs/side_h3_1.gif) left top no-repeat; }
#sidebar h3.rnd2 { background: url(../imgs/side_h3_2.gif) left top no-repeat; }
#sidebar h3.rnd3 { background: url(../imgs/side_h3_3.gif) left top no-repeat; }
#sidebar h3.rnd4 { background: url(../imgs/side_h3_4.gif) left top no-repeat; }
#sidebar h3.rnd5 { background: url(../imgs/side_h3_5.gif) left top no-repeat; }


These code examples should give me the second random background, and the third random h3 image. And they do, except on IE6 which doesn't show any background other than the first random background (the h3 works fine in all).

Also, the rand# and rnd# are generated by PHP to change every page load.

Any ideas?

Sounds strange? Do you have a link? Maybe that will enlighten us somehow.

Sure thing: http://kiswa.com

This is an IE6 bug. Perhaps Nathan Smith was the first to report the bug: IE6 Multi-Class Bug (http://sonspring.com/index.php?id=102). His example is very similar to yours, but the bug is more general than the article indicates.

You need to be careful when combining class and id in a selector. webdevout.net is a good source for learning about CSS parsing bugs. The IE6 bug you are affected by is listed there too:

http://www.webdevout.net/browser-support-css#support-css2selectors

It is phrased as follows:
When a simple selector containing a class selector and an ID selector isn't matched, all of the following selectors that end with a simple selector containing a class selector and the same ID are treated as unmatching.
With that knowledge it should be possible for you to find a workaroud. Find another construction for your selectors that does the same.

Thanks!

I think I have an idea on how to make it work, now that I know what the problem is.