Main Content

The Problem: IE 7, IE6

When you open this page in Firefox, Opera or Apple Safari, and use the links above, the pages are loading normally. All three pages use same CSS and images.

When you open this page in Internet Explorer 6 or 7, the background of the header color quickly 'flashes' (you may see it as flickering), and a fraction of the second later the background image loads.

The strange things is that after the first page loads, the background image should be in the cache of Internet Explorer, so the background color of the header (it is red on puspose, so the flashing can be seen easier) should not be visible, because the background images and the CSS are cached.

But still, somehow IE shows first the background color, and 0.01-0.2 sec later -- the background image.

Of course, another color can be selected for the header - a color, which will blend better with the background image. Still, even in this case, a sort of 'flash' will be seen, before the image covers the background color.

Not all designs experience this problem in IE7 or IE6. I wonder, why it appears in this particular case?

This page uses XHTML 1.0 Transitional Doctype and consists only of 3 DIVs: #header, #main, #footer. The CSS rules are very simple.

If you have any idea, why IE behaves so strangely, and what might be the cause for the 'flashing' of the (supposedly) cached background image, every time pages are loading, please, leave a comment in the related blog entry.

Thanks! :-)