Small CSS issue

omairt · 21-11-08, 11:12 PM

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:

Code:

body {
background:#e6f3ff url(http://www.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- · 22-11-08, 12:48 AM

Code:

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

omairt · 22-11-08, 12:53 AM

Still not working

Ilikefree · 22-11-08, 01:02 AM

i barely know css so i doubt this will help:

Code:

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

omairt · 22-11-08, 01:04 AM

Quote:

Originally Posted by Ilikefree

i barely know css so i doubt this will help:

Code:

#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 · 22-11-08, 01:15 AM

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

Quote:

body {
background:#e6f3ff url(http://www.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 · 22-11-08, 01:18 AM

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 · 22-11-08, 01:25 AM

Quote:

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 · 22-11-08, 01:27 AM

argh I was close.
Have a look on here

css-tricks.com

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

omairt · 22-11-08, 01:58 AM

Finally!

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

22-11-08, 12:48 AM	#2
-null- Mini Mac Join Date: Feb 2008 Posts: 3,135	Code: #header { background: #ff0000; width: 800px; height: 300px; position: top center; margin: auto; margin-top: 0; padding: 0; }

22-11-08, 01:02 AM	#4
Ilikefree Mini Mac Join Date: Jul 2008 Location: London Posts: 5,087	i barely know css so i doubt this will help: Code: #header { background: #ff0000; width: 800px; height: 300px; position: top center; margin-top: 0; padding: 0; } __________________ *Help an old friend wrap up his freebie-ing by signing up for me in a trade on either Apple FJ or PS3 Kudos! £15 per green!* (pm me and I'll set it up in the trade centre)

22-11-08, 01:27 AM	#9
beezer123 Mini Mac Join Date: Dec 2006 Location: Aberdeenshire Posts: 4,038	argh I was close. Have a look on here css-tricks.com It's extremely helpful to me and hopefully to anyone else. __________________ My Sites Free Nintendo DSi Free Macbook Pro Free Galaxy Nexus Free iPhone 4S Free iPad 2 open spoiler to see what im doing Spoiler currently working on: Verifying: Ordered: Received: Macbook 13 inch from Apple incentives £570 Amazon Voucher instead of second MacBook from Apple.real incentices Netgear DG834N Router from Apple.freebiejeebies £26 Rollersnakes voucher from Apple.freebiejeebies iPod Touch 8Gb from Apple.Freebiejeebies iPod Nano 8gb from Apple.Freebiejeebies £150 Amazon Voucher from gifts.real-incentives £180 amazon voucher from Nextgen.giveaway. 2 x Apple iPhone from Apple incentives COD World at war from Apple Incentives Silver Apple iPod Nano 4gb from Apple incentives Nintendo Ds lite White from forfree4u Noise Magnets x2 forfree4u

21-11-08, 11:12 PM	#1
omairt 1 new message Join Date: Jul 2007 Location: Omicron Persei 8 Posts: 2,518	Small CSS issue 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: Code: body { background:#e6f3ff url(http://www.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.

22-11-08, 12:53 AM	#3
omairt 1 new message Join Date: Jul 2007 Location: Omicron Persei 8 Posts: 2,518	Still not working

22-11-08, 01:18 AM	#7
corky20 Free The Gadgets Join Date: Jan 2007 Location: NI Posts: 4,776	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; }

22-11-08, 01:58 AM	#10
omairt 1 new message Join Date: Jul 2007 Location: Omicron Persei 8 Posts: 2,518	Finally! I added margin:0 to the body. The header CSS was fine, it's the body that had default padding.