Body background gap in FF (fine in IE)

[test_user]

I’m trying to put a shadow around the main content area of my homepage. I created a background image and set it to run down the center of the body of the page, but it gets cut off in Firefox – it works fine in IE6. Can anyone help?

Here’s the site: http://solanochurch.org/test1/

Here’s the CSS: http://solanochurch.org/test1/style.css

It seems like the shadow appears only around what is initially displayed in the browser – if I have to scroll down, the portion of the page below the initial "fold" does not have the shadow. If I zoom out, the shadow image will appear. Weird.

[test_user]

Thanks for your reply. I saw that the container only went down halfway down the page too. But, I’m applying the drop shadow image as a background image to the "body" tag in CSS, so it’s not tied to the container or the footer div. If I apply a background image to the "body" tag, shouldn’t it apply regardless of what’s going on with my divs?

[hizuka007]

instead of putting the shadow in the body{}, why not create another wrapper (far-outer-wrap)?
that will surely solves your problem.

it will look like this in html:

Code:

…….

AND BY THE WAY, the culprit of your problem is the HEIGHT: 100% inside body… look:

html, body {
background-color:#F4E1BB;
height:100%;
margin:0;
padding:0;
}

just remove it and your page will be happy… :)

[test_user]

Thanks for your reply. I have the "height:100%" in there because I want to make the container div stretch all the way to the bottom regardless of browser height. I figured out that the reason my container div was not going all the way down the page was because I forgot to add "clear:both" at the bottom. I had some "float:left" for some of my inner divs that was causing them to float outside the confines of the container div. Thanks everyone!

[hizuka007]

actually, the BODY will automatically stretch even if you dont specify height: 100% inside body.
so, remove the 100% and you can use CLEAR…

[Author]

Posts