CODEWITHSUNDEEP
javascriptjquerycssimageinternet-explorer-6
Placoplatr
Placoplatr

Reputation: 480

removeAttr / addClass issue on IE6

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 :

Does someone know a workaround ?

Upvotes: 2

Views: 268

Answers (2)

Galled
Galled

Reputation: 4206

@bobince is right. I'm make a jsfiddle and run it in IEtester and I see that IE6 does not accept the selector:

#sprite.pos1

but accepts:

.pos1

I think basically is that and I recommend you that make an alternative selector for IE6, something like this:

#sprite.pos1 { background-position: -120px 0; }
.pos1 { _background-position: -120px 0; }
#sprite.pos2 { background-position: -240px 0; }
.pos2 { _background-position: -240px 0; }

Upvotes: 0

bobince
bobince

Reputation: 536509

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>

Upvotes: 6

Related Questions