jQuery addClass() not working in IE6

Question

If you look at this screenshot, I am trying to have the red image show under a link when you click it. If you click Link 2, it will show under link 2.

It is working in all majore browser except IE 6. When I click a link in IE 6 it loads the on class for the ul, but the image does not show.

Can anyone see a problem with the code I have?

Thanks in advance for your help!

Here is the HTML:

<ul id="slider-links">
 <li class="on"><a href="#">Link 1</a><img src="img/slider-handle.png" width="316" height="42"></li>
 <li><a href="#">Link 2</a><img src="img/slider-handle.png" width="316" height="42"></li>
 <li><a href="#">Link 3</a><img src="img/slider-handle.png" width="316" height="42"></li>
</ul>

Here is the jQuery:

$("#slider-links a").click(function(){
 $(this).parent().siblings(".on").removeClass("on");
 $(this).parent().addClass("on");
});

Here is the CSS:

#slider-links li {
 position: relative;
 z-index: 8000;
 background: #bed2d9;
 border-bottom: 1px solid #69868f;
}
#slider-links li.on a {color: #dbdbdb;}
#slider-links li a {
 padding: 10px 15px;
 display: block;
 color: #234a5b;
 font-size: 16px;
 font-weight: bold;
 text-decoration: none;
 position: relative;
 z-index: 10000;
}
#slider-links li.on img {display: block;}
#slider-links img {
 position: absolute;
 top: -1px;
 left: 0;
 z-index: 9000;
 display: none;
}

Answer 1

The problem is with IE6, not your code. I would start to debug this by alerting who is the parent and who is the sibling in IE6.

Answer 2

IE6 has trouble with transparent pngs. You'll have to use a png fix - there are lots of options out there. Perhaps try with a non .png first just to be sure.

If that's not the issue perhaps try removing the 'on' class for all li elements in the ul instead of making the .siblings() call.

You should probably close off that image tag as well.