9 replies [Last post]
rhoda
rhoda's picture
Offline
newbie
New Jersey
Last seen: 12 years 6 weeks ago
New Jersey
Joined: 2006-07-25
Posts: 5
Points: 0

I'm having an issue with my layout where the div background image is not showing up in Firefox but is working fine in IE. The one with the issue is the "Content" div.

The CSS looks like this:

#Header{width: 1006px; padding: 32px 0 0 0px; height:86px; margin-right:auto; margin-left:auto; clear:both; background-color: #BABEDB; background-image: url(images/bg_header.jpg); background-repeat: no-repeat; }

#Content{
width: 1006px;
margin:auto;
clear:both;
background-image:#dbdbe3 url(images/tableBg.jpg);
background-repeat: repeat-y; }

#Content .Wrapper{
width: 900px;
margin:auto; }

#Left_side{
float: left;
width: 200px;
padding: 0px 0 0 0;
display: block;
padding-bottom: 3em; }

#Right_side{
float: right;
padding: 0px;
margin: 0;
width: 520px; }

#FOOTER{
height:108px;
clear:both;
width:1006px;
margin-left:auto;
margin-right:auto;
padding: 30px 0px 0px 0px;
background-color: #BABEDB;
background-image: url(images/footer.jpg);
background-repeat: no-repeat;
text-align:center; }

and this is the HTML structure. I've checked everywhere but I still can't figure out what's wrong.








I'm using the "Wrapper" div as a "class" instead of an "id" because I'm editing an existing website that has many many pages with that structure that are defined by this stylesheet.
Help would be greatly appreciated.

drhowarddrfine
Offline
Leader
Last seen: 11 years 5 days ago
Timezone: GMT-6
Joined: 2005-05-21
Posts: 764
Points: 0

I don't feel like

I don't feel like cut/pasting to recreate this so I'm assuming you are wondering why the content div is not expanding to contain the floated divs. This is not to happen. IE does it due to a bug. Firefox is performing correctly. Add 'overflow:auto' to the content div and see if that fixes it. Never use IE as a reference as to how things should work.

IE7 is 10 years behind the standards or wrong.
But it works in IE!
IE is a cancer on the web -- Paul Thurott

rhoda
rhoda's picture
Offline
newbie
New Jersey
Last seen: 12 years 6 weeks ago
New Jersey
Joined: 2006-07-25
Posts: 5
Points: 0

Thank You

Thanks a bunch for the info. That worked. Greatly appreciated!

pla_christis
Offline
newbie
Last seen: 12 years 28 weeks ago
Joined: 2008-05-18
Posts: 1
Points: 0

Hi

hello! i am having the exact same problem .If you preview the following site http://www.tikatrip.com/enoikiaseis using IE it works perfectly but not in Firefox. None of the background-images in the divs are shown in Firefox. I've read many posts but none of the solutions seem to work. Any ideas?

dragons_own
Offline
newbie
Sheridan AR
Last seen: 12 years 17 weeks ago
Sheridan AR
Joined: 2008-08-08
Posts: 3
Points: 0

Suggestion

If your problem is the same as the one above you might try adding a height attribute to your CSS. without a height the page doesn't know how big the image truly is so it stays at 0px.

-JeSs-

roblem
Offline
newbie
Last seen: 12 years 16 weeks ago
Joined: 2008-08-13
Posts: 1
Points: 0

the real problem....

IN CSS.. (with the exception being IE) background-images are not really supported in div's - unless the image is as big as the div.. and that can really slow down a website..

So.. you need to use a table.. the table can just have a single row and col where all your div's live, but it will then support a background image that can repeat.

(WHAT IS WRONG WITH THIS PICTURE)

the firefox folks argue for divs and css, but their favorite browser can't support development this way. It still requires tables for some very basic formatting.

Personally I find that the basic width and alignment properties work better in IE. BUT>.. you need to make sure that the minority (who is always loud) is supported as well. ANd if you think that things don't work well in IE - try the same code in Safari and Opera and all the other browsers.

For some reason they all believe that html should be rendered to their standards.

My 2c.

Rob
lynchtek.com

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 40 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

roblem, I'm afraid you have

roblem,
I'm afraid you have a lot of studying to do. You're giving out false information and suggesting bad obsolete fixes.

the above posts simply need to contain floats, as previously mentioned. There are multiple ways of accomplishing this. Most every browser follows the specs (and no, it's not their own specs, but the W3C's) and has no problem rendering properly. It's IE that has been the problem.

cos
Offline
newbie
Australia
Last seen: 12 years 3 weeks ago
Australia
Timezone: GMT-1
Joined: 2008-11-12
Posts: 1
Points: 0

I had the same issue - thank

I had the same issue - thank you for the answer! :thumbsup:

Drain0
Drain0's picture
Offline
newbie
Last seen: 10 years 31 weeks ago
Timezone: GMT+1
Joined: 2008-09-05
Posts: 6
Points: 5

Two floating divs within a div with a background image

I had two floating divs within a div with a background image and the image did not repeat in FF until I added overflow: auto; to it - Thanks for the tip.

ngolay
Offline
newbie
Last seen: 11 years 51 weeks ago
Joined: 2008-12-14
Posts: 1
Points: 0

Thanks a million!

I have been going bananas trying to figure out why FF wouldn't display my placeholder background image and why I couldn't get the corresponding border to come up either.

'overflow:auto' fixed both problems.

Much obliged!