Margin or padding where there shouldn't be

CaldwellYSR

CaldwellYSR

Member
I have some code that's giving me about 10px of blank space at the top of the page and I'm not sure why. I've put margin: 0; padding: 0; on my body so that shouldn't effect anything. I just want my header to be flush with the top of the viewport and it isn't. I know I could easily put a negative margin-top on there but I don't think that's the best way to go about it.

HTML: 
<body>
    <div class="wrapper">
        <header>
            <hgroup>
                <h1>Snippet<br />Publishing</h1>
                <h5>This is a tagline</h5>
            <hgroup>
            <form action="" method="post">
                <input type="text" id="search" value="Search" onfocus="this.value=' '" />
            </form>
        </div>
    </header>
    ...
    ...
    ...
</body>

Code: 
.wrapper {
    margin: 0 auto;
    width: 960px;
}
#head {
    background: url(images/header-bg.jpg);
}

This should result in the header background image stretching 100% of the screen but the content staying within the 960px box to fit the rest of the content and width-wise it does but I'm having the problem of around 10px of whitespace at the top :/ Here's a screenshot.

screenshot20120412at113.png


The grey pattern should stretch to the top but it doesn't
 
ronaldroe

ronaldroe

Super Moderator
Staff member
That would likely be a browser default. Try a CSS reset to fix it. A quick thing to try to see if that's the issue is the universal selector:

*{margin:0;padding:0;}

Don't use that as your reset, because it messes a few things up, namely list items, but it works to troubleshoot.
 
CaldwellYSR

CaldwellYSR

Member
ronaldroe said:
That would likely be a browser default. Try a CSS reset to fix it. A quick thing to try to see if that's the issue is the universal selector:

*{margin:0;padding:0;}

Don't use that as your reset, because it messes a few things up, namely list items, but it works to troubleshoot.
Click to expand...

Interesting.... that fixed it but I'm not sure what has the margin on it. I'm using the html5 boilerplate and it has a pretty big CSS reset but I've looked through it and don't see anything that could be causing the problem. Maybe it's something that reset doesn't have in it.

FYI: It was the h1 tag that had extra margin on it.
 
ronaldroe

ronaldroe

Super Moderator
Staff member
IIRC, Boilerplate doesn't use a reset in the traditional sense. I think the reset it uses takes browser defaults and makes them match across the board instead of just wiping them out. Also, IIRC, there's a version of Boilerplate that has a different reset built in, and if not, you can just build a custom package without their reset in it.

I generally prefer to write my own reset. That way, I know exactly what it will do. They really aren't that difficult either.
 
You must log in or register to reply here.
Top