Wednesday, February 9, 2011

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

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?

  • 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.

    J5 : Yes, only IE6, not IE7 (not reported or seen by me, anyway).
  • 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.

    J5 : That is something that I had not thought to check specifically. I will do so now with a few of the images that have failed to load.
    J5 : Looks like RGB at least on this page and some other images I had saved locally from another page that had problems.
  • this is a weird issue with IE6. I just right click on the image and select "Show Picture" then the image loads properly.

    J5 : That's sometimes correct (I am not sure that the context menu gives the option for background-images) but that doesn't solve the problem from a programming perspective, only from a user perspective.
    cruizer : I think it's an IE6 bug, and something that web programming cannot address.
    From cruizer
  • The problem is the "IE6" part ;-)

    From webmat
  • 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.

    J5 : Thanks for taking the time to get into the code to that degreee, Matt. The filename is generated by a CMS so I can't really get into it. I think the background-image overriding is something to look into, though.
    From Matt
  • 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

    From Sorin

0 comments:

Post a Comment