Solved

Multiple Background Images Not Showing in Firefox, Safari or Netscape

Posted on 2007-12-06
16
3,597 Views
Last Modified: 2013-12-08
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!
0
Comment
Question by:dionysus999
  • 7
  • 5
  • 3
  • +1
16 Comments
 
LVL 29

Expert Comment

by:Göran Andersson
ID: 20425862
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
 
LVL 28

Accepted Solution

by:
TName earned 500 total points
ID: 20426573
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
 
LVL 29

Expert Comment

by:Göran Andersson
ID: 20426851
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
 

Author Comment

by:dionysus999
ID: 20427889
Thank you to all 3 of you! I will try these now and post my findings afterwards.
0
 
LVL 29

Expert Comment

by:Göran Andersson
ID: 20428237
Eventhough I have written two comments, I am still only one person. ;)
0
 

Author Comment

by:dionysus999
ID: 20428294
yeah...I realized that after pushing the SUBMIT button...;)
0
 
LVL 28

Expert Comment

by:TName
ID: 20428445
@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
 

Author Comment

by:dionysus999
ID: 20428648
#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
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
LVL 29

Expert Comment

by:Göran Andersson
ID: 20429150
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
 
LVL 28

Expert Comment

by:TName
ID: 20429580
>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
 
LVL 29

Expert Comment

by:Göran Andersson
ID: 20431230
> 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
 
LVL 29

Expert Comment

by:Göran Andersson
ID: 20431270
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
 
LVL 28

Expert Comment

by:TName
ID: 20433739
>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
 
LVL 29

Expert Comment

by:Göran Andersson
ID: 20433759
> 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
 
LVL 28

Expert Comment

by:TName
ID: 20433935
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
 

Expert Comment

by:chriscady311
ID: 22483210
@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

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Several part series to implement Internet Explorer 11 Enterprise Mode
Today, still in the boom of Apple, PC's and products, nearly 50% of the computer users use Windows as graphical operating systems. If you are among those users who love windows, but are grappling to keep the system's hard drive optimized, then you s…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
Google currently has a new report that is in beta and coming soon to Webmaster Tool accounts. This Micro Tutorial will highlight new features for Google Webmaster Tools.

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now