How do I get my header to line up at the top of the browser?

Question

When I insert my header background image it does not line up exactly to the top of the browser. There is a space between the header image and the top of the browser showing the background color. I want the Header to go all the way up to the top of the screen, and to not show any background color.

   /* CSS Document */

html, body, {
    margin: 0;
    padding: 0;
}

body {
       font: 12px/16px Verdana, Geneva, sans-serif;
       color: #000;
       background-color:#426fac;

}

/*** header
****************************************/
#header {
    background: url(images/header-bg.png) no-repeat center top;
    overflow: hidden;
}

ANy ideas on how to do this?

Answer 1

There is an element with non-zero margin/padding that you're not accounting for. If you post your markup, I may be able to help identify it. This could easily be a default value that you're not setting yourself... even for the tag.

Or you could use firebug. Just select the #header element and review the CSS definitions that the browser is applying to it. It may be #header or it may be a parent/ancestor of header.

Answer 2

You may want to define whatever element your header is (h1/div/?) has having 0 margin also -- many elements have margin built in, and that may be causing the space you're seeing, as #header is obviously attached to something

Answer 3

Try adding #header to the list html, body, which get margin: 0; padding: 0.

Answer 4

That is because you have an error in your css

you need to remove the last comma (,) from the html,body, { and make it html,body {

Currently the first css rule about html and body fails due to it ..