Jquery addClass function fails in IE7 for td element

Question

For the following HTML:

<td class="width2 padLeft" id="loading_45">&nbsp;</td> 

the following JQuery:

$('#loading_45').addClass('loading');

With the following css definition:

td.loading
{
    background-image:url("../images/icon_loading_circle.gif");
    background-position:left center;
    background-repeat:no-repeat;
    height:auto; 
    position:absolute;
    text-align:center;
}

does not cause the background-image to appear in IE7 (works fine in FF)

Does anyone have an idea what I am doing wrong?

As Pointy noted the problem was in the css the position:absolute; definition should be removed Thanks all for answering so fast

Answer 1

make sure the code runs after the DOM is loaded using

$(function(){
   $('#loading_45').addClass('loading');
});

or

$(document).ready(function(){
   $('#loading_45').addClass('loading');
});

Also make sure the elements has a width/height that will fit the background image.

Demo: http://www.jsfiddle.net/9PZZB/2/

Answer 2

I'm sure that "addClass" is working, in that it's adding the class to the element, if (as @Gaby notes) you're doing it at the right time. Since it works in Firefox, you probably are.

I suspect that the problem might simply be that your stylesheet is freaking IE7 out. Putting "position: absolute" on a table cell is likely to cause problems, like making the table cell render in completely the wrong place. When I try it, table cells always render in the upper left corner of the page, even though the stylesheet doesn't specify a "top" or "left".

Try testing your page with that class hard-coded onto the table cell and see what happens.