Multiple Background Images Not Showing in Firefox, Safari or Netscape

I am trying to use 2 background image via CSS in a layout. They appear correctly in IE 6 and 7 (go figure). In Netscape, Safari and Firefox only one appears.

You can see the page at: http://72.41.26.63/dev2/index.php

The CSS is here: http://72.41.26.63/dev2/dejesusstyles.css

Important is that the background image under the navigation cannot extend below the black footer bar.

I have tried every iteration I can think of. Any thoughts on this would be greatly appreciated. I am starting to pull my thinning hair out...:)

Thank you!
dionysus999Asked:
Who is Participating?
 
TNameConnect With a Mentor Commented:
As GreenGhost said, or, if you prefer not to set a fixed height, just clear the float, e.g. by specifying "overflow:hidden"  for #containermain:

#containermain { overflow:hidden; }
0
 
Göran AnderssonCommented:
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; }
0
 
Göran AnderssonCommented:
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
0
Cloud Class® Course: Microsoft Azure 2017

Azure has a changed a lot since it was originally introduce by adding new services and features. Do you know everything you need to about Azure? This course will teach you about the Azure App Service, monitoring and application insights, DevOps, and Team Services.

 
dionysus999Author Commented:
Thank you to all 3 of you! I will try these now and post my findings afterwards.
0
 
Göran AnderssonCommented:
Eventhough I have written two comments, I am still only one person. ;)
0
 
dionysus999Author Commented:
yeah...I realized that after pushing the SUBMIT button...;)
0
 
TNameCommented:
@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...
0
 
dionysus999Author Commented:
#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.
:)
0
 
Göran AnderssonCommented:
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...
0
 
TNameCommented:
>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


0
 
Göran AnderssonCommented:
> 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
0
 
Göran AnderssonCommented:
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.
0
 
TNameCommented:
>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)"
0
 
Göran AnderssonCommented:
> 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.
0
 
TNameCommented:
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.
0
 
chriscady311Commented:
@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!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.