Hi,
I’m wondering if anyone can help – I’m trying to put a header on a site but I'm having difficulty tracking why it wont display properly – I have just put a test header on the site to see how it will look - it looks ok in IE – but, if you view it in Firefox, however, it is offset – same for Google chrome and Opera . Anyone got any ideas?
I have been trying all morning to trace this without luck.
Is this some sort of bug?
The site was based around an origional design and i didn't write all the css - whaich makes it even more fun!

Cheers

do we get to see it? or take a guess at no DTD

oh sorry - it should have been www.uk-computers.co.uk/main.asp

Get rid of that hideous and deprecated <center> tag. Put a "wrapper" div around the entire layout, set the width to 970px, and set it to margin: 0 auto; to center the entire layout. Also set the wrapper div to position:relative in case you want to position anything inside it, those get positioned relative to the centered wrapper instead of the body.

You have a 960px header, centered inside a 970px #mainheader - so of course it's not going to line up exactly with the rest of your page. You also need to understand the box model and how it works because your ADDING width to the box with margins and padding - which will push things out.

You're also triggering the doubled-float margin bug in IE6 with the float:right with a right margin on the nav in your header.

1 more thing - z-index ONLY works on elements that are absolutely or relatively positioned - putting it on anything else is a waste of time.