Question

This question was asked here but the issue wasn’t resolved.

Please see this jsfiddle on IE6 : http://jsfiddle.net/RnsxM/2/

Basically a sprite image (not png fixed) won’t update correctly in IE6. The class seems to be applied (and works without javascript) but the combinaison removeAttr + addClass seems broken.

I tried :

• !important css statement
• use of background-position-x or background-position-y

Does someone know a workaround ?

Answer 1

Not to do with scripting, this is a simple CSS brokenness. Something in IE6’s selector engine can’t cope with the idea of there being two #id.class rules with the same #id on a single stylesheet. This shorter example demonstrates:

<style type="text/css">
    #sprite.pos1 { background: red; }
    #sprite.pos2 { background: yellow; }
</style>
<div id="sprite" class="pos2">Hello</div> <!-- White in IE6! -->

You can avoid it by putting the IDs and classes on different elements, or just breaking the stylesheet up into two:

<style type="text/css">
    #sprite.pos1 { background: red; }
</style>
<style type="text/css">
    #sprite.pos2 { background: yellow; }
</style>
<div id="sprite" class="pos2">Hello</div>