Combating browser margin at the top?

[RobertD63]

I'm building a test page just to learn the whole process from start to finish, rather than little bits of tutorials. I've hit a stop though, I can't seem to get the margin at the top of the page to go away. I'd like to be filled with my header color. This is HTML5 by the way.
I have nothing in my header as of now:

<header></header>

And this is the CSS:

header {
height: 110px;
width: 100%;
background-image: url(images/header.png);
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(43,62,253)), to(rgb(63,117,255)));
}

I plan on making this work in everything but IE for now. I just want to get CSS down, and worry less about IE. Also, I can't figure out how to get it to span the whole page. I'd like the nav bar to go from edge to edge. Any help is appreciated.

 

[design-is]

Hi

Have you tried margin:0; in there? Or a margin:0;padding:0; on body? not sure if these will help in your case ... but worth a shot.

Can you give us a link to the page so we can have a fiddle, or post attach the page + css?

Cheers

/Doug

 

[RobertD63]

Sure, heres a link to the page. I never thought about adding it to the body. I tried and it worked for the most part. Now there is a slight gap on the right side on the header. Any clue?
Thanks!

 

[design-is]

Sorry, you've lost me - I see the attached - uniform margin (8px) around the items, not more on the right.

/Doug

 

[RobertD63]

Ah, if you look now, I updated the CSS to what I'm looking at.

 

[angelwatt]

Add "display: block;" to your header tag. Browsers are not HTML5 ready just yet so they don't know header is a block level tag.

 

[design-is]

Yeh, the site only displays correctly in Safari at the moment.

Also, margin: -16px; for your nav is pulling the right side out of the box, giving you the impression there is a right margin on the header. Change it to margin-top: -16px;

/Doug

 

[RobertD63]

Add "display: block;" to your header tag. Browsers are not HTML5 ready just yet so they don't know header is a block level tag.

Ahh makes sense, thanks for that!

Yeh, the site only displays correctly in Safari at teh moment.

Also, margin: -16px; for your nav is pulling the right side out of the box, giving you the impression there is a right margin on the header. Change it to margin-top: -16px;

/Doug

Ooops! I over looked that, thanks for that. I was wondering why it was overflowing.

 

[manueld]

I've always used a reset for my stylesheets to better control things and it looks like html 5 won't be any different:

http://html5doctor.com/html-5-reset-stylesheet/