Flashes of colour in Safari when loading background images

[arachnoid]

Has anyone seem this before? I have a site which has a couple of layers of background images to create the required effect and when the last of these background images are loading in Safari (it doesn't happen in any other browser), there is a momentary flash of a green background, the size of the background image area only, just before the image renders. The images are gifs and are specified as background images for the div inline rather than in CSS since they're different on every page. I can't figure out where this green is coming from. It's a colour used in the site but not as background-color. It's only specified as (text) color (h1, h2, h3 and pseudoclasses).

I fixed it by specifying the same background colour for the column div it's occuring in as the main div containing it, but I'm curious about why it was happening and where Safari was getting the big idea. Anyone?

As a matter of good practice, should you always specify some sort of background colour (even if transparent) for all principal container divs?

[tedster]

As a matter of good practice, should you always specify some sort of background colour (even if transparent) for all principal container divs?

That makes sense to me. I know that it used to be important to declare background color for block level elements whenever a color rule existed. I'm not familiar enough with the innards of the redering engine to know how this works. Opera used to do something similar, especially when the page load hit a snag of some kind, just ost packets or whatever - but I haven't seen that for several browser verions.

[arachnoid]

Ah rats. That didn't fix it. Thought it had (and yes, I did empty my cache before testing it). If I could just figure out where that green was coming from, I'd be half way to fixing it.

Are there any particular quirks in how the various browsers render different image types? (Thinking of experimenting with a jpg or png instead of a gif).

[Marshall]

In the <div> which contains the image, you said you specified the background color the same as the <div> below. Try specifying the text color too as the same as the background, just for that <div>

Marshall

[arachnoid]

Thanks Marshall. I'll give it a go (got to go out now, so when I get back), but isn't that a no-no as far as validation is concerned? Text same colour as background?

[Marshall]

You'll get a warning, but the world won't end :)

Marshall

[arachnoid]

Marshall -- I tried your suggestion. No joy I'm afraid, and the server was being obligingly slow when I tested it so not much doubt there. Interestingly, given that it was slow tonight, I was able to get a better look at the green background and it's definitely #006600 which is used in h1 to h3, a:link, and .colour.

When the background green appears, it's not solid -- there are horizontal lines of varying thickness of the correct background colour (#f2efe3) within it. The images it's occuring with are the background images of the second column div, which is the main content div (nav to the left is the other). The first item of text in this div is a heading (h2, hence #006600), though it's enclosed within a subdiv .text, so is not directly entered in columnTwo itself.

Have you known browsers pick up a text colour and display it as background to a loading image before, or was this just a shot in the dark?

[Marshall]

I only have a minute, but are there any gaps in your code, e.g:

<div><img> </div> or

<div><img>
</div>

Sometimes white space in code causes a problem. If there are gaps, try:

<div><img></div> without any spaces or returns.

The other possibility is set the line-height to zero pixels for that <div> only.

Marshall

[arachnoid]

It's a background image, so the code is:

<div id="columnTwo" style="background-image:url(../images/layout/xyz.gif);background-repeat:no-repeat">
div content -- two further divs, one containing images, one containing text
</div>

There's probably white space somewhere in the div. I'll check tomorrow, remove any, and try that out. Thanks for your time.