What Could Cause Intermittent Issues with Images Loading in Internet Explorer 6?

Question

I am having issues with a website that I am working on in which images and background-images fail to load in Internet Explorer 6.

Here is an example of a page on which you might experience this issue:

Example Page

So far I have looked at the following possible issues and pretty much ruled them out:

• XML/Extraneous data in the image files (google photoshop 7 internet explorer)
• Corrupt image files

I have not ruled out invalid markup.

I have noticed that there are validation errors in most of the pages where this problem has been reported and I am working on getting those fixed where appropriate.

The behavior I see is that the page will load and all elements other than the background image render. There are no javascript errors thrown. When using Fiddler, no request for the image is made. If the browser is pointed directly to the background-image, the cache is cleared and then the browser is pointed back at the HTML page, the background-image will load inside the HTML page.

Does anyone have any additional suggestions for ways to attack this issue?

Answer 1

is it only ie6 and not ie7 too? IE is pretty strict with html sometimes, versus firefox lets you get away with more. Not sure if this helps, but I just debugged weird IE6/7 bugs by slowly taking away content. But if it's only intermittent, as in happens with the same code on and off, that's a really weird one.

Answer 2

Twice now I've had people have problems with photos not showing up, and it was because they were in an incorrect colorspace, using CMYK instead of RGB.

Answer 3

this is a weird issue with IE6. I just right click on the image and select "Show Picture" then the image loads properly.

Answer 4

The problem is the "IE6" part ;-)

Answer 5

I'm looking at this in IE6 and trying to replicate the problem, but I can't seem to get it to happen - it always seems to load.

Some thoughts on things to try though as there appears to be another two classes that the background is over-riding is to try adding !important after the background assignment, so:

div.gBodyContainer {
background-image:url(/etc/medialib/europe/about_infiniti/environment.Par.7366.Image.964.992.direct.jpg); !important
}

Another thing to try is getting rid of all the . in the filename and cut down the length of it, shouldn't matter, but it may be causing some problems, doesn't hurt to try it anyway.

The other thing you could try is making gBodyContainer an ID instead of a class, or give it an ID as well as a class and assign the background to the ID. Again, it shouldn't matter, but it doesn't hurt to try and see if it works, IE6 does a lot of funny things.

Answer 6

i think in some cases you could solve this issue by loading the full size image before the request and hide it with style "display: none;" so IE6 will load the image from cache