Class not being applied in IE6 using addClass()

Question

I have the following DIV in my HTML which holds a large background image:

<div id="widget-image" class="tyreinfo1"></div>

Depending on which select box on a form on the page is selected, the background image will scroll to a different point. These positions are defined like so:

#widget-image.tyreinfo1 { background-position: 0px -105px }
#widget-image.tyreinfo2 { background-position: 0px -210px }
#widget-image.tyreinfo3 { background-position: 0px -315px }
#widget-image.tyreinfo4 { background-position: 0px -420px }
#widget-image.tyreinfo5 { background-position: 0px -525px }

The code on the select boxes is:

onfocus="$('#widget-image').removeClass().addClass('tyreinfo1');"

5 select boxes, each one adding a different tyreinfo class.

Surprise, surprise it's not working in IE6. I've checked using the debug toolbar and the classes are definitely being applied, however the background position resets to 0px 0px each time.

Any help appreciated!

Answer 1

Maybe it is because you css definition is missing a semi-colon ;

#widget-image.tyreinfo1 { background-position: 0px -105px; }

Otherwise you could try changing classes by changing the value of the attribute, like:

onfocus="$('#widget-image').attr('class','tyreinfo1');"

In some occasions this worked for me, were other methods failed. But posting a little more example code could help, of course.

Answer 2

Try this: You have just simply specified the .removeClass() , you didnt specify which class to remove. I think your trying to remove the existing class and add a new class to it. so this is what i suggest.

$('#widget-image').removeAttr('class').addClass('tyreinfo1');

Answer 3

Are you using a PNG and a PNG fixer script? If so, background positioning will not work in IE6. You must also add the image URL every time you update the position.

Answer 4

manually write the html and css first to check if the CSS is working, I suspect that this is caused by IE6's buggy CSS implementation.

I imagine you are setting the background image on the #widget-image (perfectly reasonable) but IE6 will read '#widget-image.tyreinfo1' as '.tyreinfo1' (perfectly flawed) which means the positioning on the #widget-image takes preference. You could try

#widget-image.tyreinfo1 { background-position: 0px -105px !important }

but you might be better off setting the background style in it's entirety for each class.

Answer 5

I agree with @Inrbob. First write out the CSS to make sure it works that way. Then, if it does, then try this:

You have a selection right? Give each selection an id. Then attach a separate javascript file and just call it with the ID.

$('#id1').click(function() {
  $('#widget-image').removeAttr('class').addClass('.whatever');
});

You can also try another way, which is using the focus().

$('#id1').focus(function() {
  $('#widget-image').removeAttr('class').addClass('.whatever');
});

I suspect either solution should work.

If it doesn't, then I suggest posting your entire HTML and CSS with http://jsfiddle.net and have us take a close look at the entire situation.

Good luck.