Multiple Background Images Not Showing in Firefox, Safari or Netscape

As always, if a page renders differently in IE and other browsers, IE gets it wrong.

Your containermain div doesn't have any height specified, and it only contains floating elements, so there is nothing that gives it any height. The reason that it is visible in IE, is that IE has a rendering error that expands the div to the size of it's content, eventhough it should not.

Just specify a height for the div, and it shows up just fine:

#containermain { height: 300px; }

Strangely enough, setting overflow:hidden also works, although it's rather counter intuitive. A little causion may be in place, as I haven't found anyone who can explain why it works.

http://www.sitepoint.com/blog-post-view?id=238086
http://www.quirksmode.org/css/clearing.html

Thank you to all 3 of you! I will try these now and post my findings afterwards.

Eventhough I have written two comments, I am still only one person. ;)

yeah...I realized that after pushing the SUBMIT button...;)

@GreenGhost
Setting the overflow property of a wrapper that only contains floated children to hidden will make that element expand to hold it's floated children in FF too.  See e.g.:
http://blue-anvil.com/archives/experiments-with-floats-whats-the-best-method-of-clearance
http://www.ejeliot.com/blog/59

And I would think this behaviour does make sense - after all, the reason why standard compliant browsers do not expand wrappers to hold floated children, is (was originally?) so that floated elements can "drop out" of their original container (a nice example on the page from the second link - the image with the 2 text paragraphs wrapping around it). But if you hide the overflow, no content can drop out anyway, and so it makes more sense to expand the container, I'd say...

#containermain { overflow:hidden; }

Worked like a charm...Mac/PC, FF, IE 6&7, Opera, Netscape, Safari all look the same on this issue now...thank you! Now we just have to tweak the other things on the page and we are off to finish the rest of it.

Your help is greatly appreciated.
:)

TName, the pages that you linked to doesn't give any more information than the ones that I linked to earlier. Noone really explains why this happens.

> the reason why standard compliant browsers do not expand wrappers to hold floated children, is (was originally?) so that floated elements can "drop out" of their original container

Not really. The reason is that floated elements doesn't affect elements that doesn't float (unless they use a clear).

> But if you hide the overflow, no content can drop out anyway, and so it makes more sense to expand the container, I'd say...

I'd say that setting the overflow property should only affect how the overflowing content is handled, not how the size of the element is calculated. The element doesn't have any height when overflow is set to visible (the default), so it should not magically get a height when overflow is set to hidden.

Until someone can give an explanation based on the css specification, it's just another hack. It looks more stable than most hacks, but still...

>The reason is that floated elements doesn't affect elements that doesn't float...

Oh, and why have the people who have conceived the CSS specs decided that floats should behave that way?
I was refering to the "real" reason, the reason why (I believe) the notion (and the behaviour) named "float" was introduced in the first place in CSS!  

See:
   http://www.complexspiral.com/publications/containing-floats/
Quote:
"So, in order to keep with Web design tradition and author expectation, CSS is written to allow floated elements to stick out of the bottom of their containing elements."

As quite a few other people apparently, I understand the CSS2.1 specification §10.6.7 to justify the "overflow:hidden" behaviour discussed here. See:
http://www.w3.org/TR/CSS21/visudet.html#root-height  (see also §10.6.6)

   See a few interesting (in my opinion at least) discussions:
http://www.456bereastreet.com/archive/200502/simple_clearing_of_floats/
http://css-discuss.incutio.com/?page=ClearingSpace
http://www.csschat.com/showthread.php?t=4788
http://www.quirksmode.org/blog/archives/2005/03/clearing_floats.html

> I was refering to the "real" reason

No, you were talking about the reson why some choises were made when specifying the css. Although interresting, it's not directly relevant.

http://support.microsoft.com/kb/294714

Ignore the link in the previous post, it's for a different thread.

> As quite a few other people apparently, I understand the CSS2.1 specification §10.6.7 to justify the "overflow:hidden" behaviour discussed here.

That paragraph is not relevant at all, unless you consider §10.6.6. Together, they form the explanation that I was looking for.

>That paragraph is not relevant at all, unless you consider §10.6.6. Together, they form the explanation that I was looking for.

Then it might be fair, when quoting my post, to also mention that I *did* point to §10.6.6 ...
>"(see also §10.6.6)"

> I *did* point to §10.6.6

Yes, in a parentheisis... That was a little vague considering that the paragraph that you did link to doesn't apply at all without that information.

I think we should simply acknowledge that we have quite different opinions on what's relevant or vague and on what makes an argument valid - and leave it at that.

@TName,

Worked like a charm!

I too had this same problem but also now in Google's Chrome, as well as Safari & Firefox. A workaround for a while was to insert the background image as a style in each div, but that totally defeated the purpose of CSS. Rather than having to specify a fixed height in px, I simply added the "overflow:hidden" to my #wrapper and the site passed validation and now renders in every browser I've tested it in!