Grow your CSS skills. Land your dream job.

Unintended WordPress Header Padding

  • # March 9, 2009 at 2:48 pm

    Hello Everyone!

    This is my first post, so please be kind and thanks in advance.

    I am working on styling wordpress as inspired by Chirs’ video cast series. I have been following his instructions loosely to fit my own needs, and have been having a decent amount of success until I realized that my images within the header are not sitting snugly at the top of the browser. I suspected this being some type of padding issue, but when I tried declaring padding: 0px; on all of my CSS divs/etc., nothing changed. . . any help or suggestions would be awesome.

    Here is a link to the page in progress: http://www.potlatchpresents.com/test/
    Here are the relevant parts of the header.php and my CSS:

    Code:
    Code:
    #wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    width: 960px;
    margin: 0 auto -150px;
    padding: 0px;
    }

    #logo {
    height: 240px;
    width: 960px;
    margin: 0 auto;
    padding: 0px;
    background: url(images/logo.jpg) no-repeat;
    }

    #banner { background: url(images/banner.jpg) no-repeat;
    padding: 0px;
    height: 30px;
    }

    ul#nav {
    list-style: none;
    overflow: hidden;
    padding: 0px;
    margin: 0 auto;
    width: 840px;
    }

    # March 9, 2009 at 3:16 pm

    You can get rid of the gap by declaring:

    Code:
    body { padding:0; margin: 0; }

    or better still, reset margin and padding on all elements:

    Code:
    html * { padding:0; margin: 0 }
    # March 9, 2009 at 5:40 pm

    Thank you so much! kind of a newbie mistake, I know!

    This is my first well-thought-out and serious webpage attempt. I will make sure to post it when it is finalized.

    Take care!
    -Darren

    # March 9, 2009 at 7:40 pm

    No problem, we’ve all been there!

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".