Grow your CSS skills. Land your dream job.

Body background gap in FF (fine in IE)

  • # June 6, 2009 at 2:11 am

    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.

    # June 6, 2009 at 9:41 am

    looks like the shadow is part of container and in FF, firebug shows the container only extending down to about
    a third the way down the bottom boxes. bottom is outside the container. not sure why container stops on
    firebug when its does.

    perhaps bottom could be included in container.

    Al

    p.s. if you don’t have firebug for FF, you need to get it, great option for viewing web pages. another option I just
    saw suggested is to put a border around the boxes on your page using * {border: 1px solid red !important;}.
    try one of these and perhaps you will see a solution.

    # June 6, 2009 at 4:23 pm

    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?

    # June 8, 2009 at 10:13 am

    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… :)

    # June 8, 2009 at 12:34 pm

    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!

    # June 8, 2009 at 10:59 pm

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

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".