Grow your CSS skills. Land your dream job.

Body Border Problem

  • # October 28, 2009 at 5:04 am

    Just started as a content manager (pr person) for a website. I upgraded WordPress and now the body border-bottom of 5px appears more than halfway up the page. I’ve set the border to 0px so it doesn’t show up (as it’s a live commercial site). I’ve checked my local install and everything seems to match up, except my page bottom-border is fine!

    If you go to http://www.ailnz.co.nz, open up firebug to css mode and set the body border-bottom to 5px, you’ll see the border doesn’t sit at the bottom. I’m working hard to learn CSS myself, but I want to fix this asap. Could anyone give me a lead?

    As I’m still green, the post regarding w3 validation was welcome, except my site got an error. sigh. A warm welcome to the web for me. haha…off hunting for the answer to that one. Any advice would be much appreciated.

    # October 28, 2009 at 12:05 pm

    Well would you look at that, what an interesting problem. Normally I would say something about clearing your floats, but I’m not sure that applies in the case of styles applied to the body.

    I’ll have to ponder this one for a sec.

    # October 28, 2009 at 12:07 pm

    The height of the body seems to be defaulting to 100% (you’ll notice if you add the border thickness in that it will always appear just below the visible area of the window it loads in). The only thing I can think of is to take the properties off the body tag and instead apply them to a big all-encompassing container div and give it a min-height of 100%. Might work.

    # October 28, 2009 at 12:28 pm
    "dvdgoss" wrote:
    The height of the body seems to be defaulting to 100% (you’ll notice if you add the border thickness in that it will always appear just below the visible area of the window it loads in). The only thing I can think of is to take the properties off the body tag and instead apply them to a big all-encompassing container div and give it a min-height of 100%. Might work.

    Nice find!

    Simply removing this style:

    Code:
    html, body {
    height: 100%;
    }

    Seemed to do the trick for me, give that one a go.

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

You must be logged in to reply to this topic.

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