Small CSS issue

[omairt]

I'm making a site and the header doesn't show right , it doesn't seem to stick to the top. It's appears to be 8px below the top in Firefox and 15px in IE.

This is what's happening, but I want the that red rectangle to stick to the top.

These are the CSS properties:

body {
background:#e6f3ff url(http://cdn1.exceem.co.uk/forums/images/bg.gif) repeat-x;
color:#102840;
text-align:center;
}

#header {
background: #ff0000;
width: 800px;
height: 300px;
position: top center;
margin: auto;
padding: 0;
}

Would appreciate any help.

Thanks,
Omair.

[-null-]

#header {
background: #ff0000;
width: 800px;
height: 300px;
position: top center;
margin: auto;
margin-top: 0;
padding: 0;
}

[omairt]

Still not working

[Ilikefree]

i barely know css so i doubt this will help:

#header {
background: #ff0000;
width: 800px;
height: 300px;
position: top center;
margin-top: 0;
padding: 0;
}

[omairt]

Originally Posted by Ilikefree

i barely know css so i doubt this will help:

#header {
background: #ff0000;
width: 800px;
height: 300px;
position: top center;
margin-top: 0;
padding: 0;
}

Nope, didn't work, it just moved it to the left. I think I need the margin: auto to keep it centred, which means that my position bit may be wrong.

[beezer123]

Set the margin to -15px, that'll bring it up to the top in ie and firefox I think

body {
background:#e6f3ff url(http://cdn1.exceem.co.uk/forums/images/bg.gif) repeat-x;
color:#102840;
text-align:center;
}

#header {
background: #ff0000;
width: 800px;
height: 300px;
margin:auto;
margin-top: -15px;
padding: 0;
}

Hopefully that should work for you

[corky20]

Don't really know CSS but try...

#header {
position: static;
background: #ff0000;
width: 800px;
height: 300px;
position: top center;
margin: auto;
margin-top: 0;
padding: 0;
}

or

#header {
display: inline;
background: #ff0000;
width: 800px;
height: 300px;
position: top center;
margin: auto;
margin-top: 0;
padding: 0;
}

[omairt]

Originally Posted by beezer123

Set the margin to -15px, that'll bring it up to the top in ie and firefox I think

Hopefully that should work for you

Shows fine in IE but not in Firefox. It's 8px below in Firefox for me, so if I do -8px, it fixes it in Firefox, but then moves it in IE.

@corky20: position: static doesn't make a difference, and display: inline makes it disappear

[beezer123]

argh I was close.
Have a look on here

css-tricks.com

It's extremely helpful to me and hopefully to anyone else.

[omairt]

Finally!

I added margin:0 to the body. The header CSS was fine, it's the body that had default padding.