Background images disappearing in IE6

Question

I've seen a lot of IE6 bugs, but this one beats everything.

A page will display fine, but if I start loading a Table tag on the page sometime, most of the background images will disappear.

I'm not 100% sure that it's because of the Table tag per se, but the only pages that break are the one with tables in them. I'm creating these tables using a loop and sometime I have to add some JS Script tags inside of this. I'm not sure but it could be related even thought it shouldn't.

EDIT: I tested adding a table on a random page and it didn't break anything. I also removed the javascript I was generating and I still got the same error.

This is happening only on my live server, I can't reproduce it on my local machine for some reason. It also makes debugging crazy annoying.

Of course my code is working fine in Chrome, FF and Opera. The layout is pretty simple and works fine in IE6 except for this bug on some pages. I'm using a pngfix.js for IE, but I've never run into issues with it before so I don't think it's related.

I don't think that posting code would be helpful since I would have to post the entire website... I'm just asking if someone already saw this issue and found a way to fix it.

Thanks

Answer 1

I would try a few things, the first would be to add some css to any of the elements whos backgrounds are disappearing.

I would add hasLayout: true;

Alternatively I would try having all the background-disappearing elements be declared in css by a class or id.

Where you might have had this before...

div{ background: url(whatever); }

Try making it...

div#header{ background: url(whatever); }

Answer 2

Seeing the code or a link to the website would be helpful otherwise we are just guessing.

Content can disappear in IE6 for a number of reasons such as the Peek-a-boo bug or the Absolute-Float bug or the Guillotine bug.

Answer 3

Make the position 'relative' for the element if possible.

I just had this same issue, the problem is not just the background, it's a screen redrawing problem, scrolling the element off the screen and then back on the screen, had the effect of showing/hiding the background.

for some reason setting the elements position to relative causes IE to render it differently, and much more consistently.

Answer 4

I ended up refactoring a big chunk of the HTML to get it to work... I don't know what was going on.