IE and firefox issue with div positioning

[hicksmcb]

Hi there i'm i've laid out a page so that the top of the 'content' div is inline with the bottom of a menu to make it appear like they are joined. As you can see i've set top:-6px to achieve this. This code is causing problems in firefox. i don't know if it is because of the minus value but any input would be appreciated, thanks. The code is below.
regards, Tom.

body {
margin:0px auto;
padding:0px;
text-align:center;
font: 75% arial,verdana,helvetica,sans-serif;
background-image: url(images/background2.jpg);
}

#page {width:764px;text-align:left;}
#header {height:100px;}
#content {
top:-6px;
width:764px;
height:200px;
text-align:left;
border-bottom:1px solid #484a4a;
border-left:1px solid #484a4a;
border-right:1px solid #484a4a;
border-top:2px solid #484a4a;
background-color:#6896D3;
position:relative;
}

<div id="page">

<div id="header">
<div style="float:left;width:800px;text-align:center;">
<div style="height:46px;padding-top:10px;"><img src="images/logo.jpg" width="51" height="60" alt="Castle Leisure Bingo" border="0"><img src="images/name.jpg" width="455" height="60" alt="" border="0"><img src="images/logo.jpg" width="51" height="60" alt="Castle Leisure Bingo" border ="0">
</div>
</div>
</div>

<div style="float:left;width:800px;text-align:center;padding-top:5px;">

<a href="howtoplay.aspx"><img src="images/tabHomePage.jpg" width="96" height="42" alt="" border="0">
<a href="clubs.aspx"><img src="images/tabContact.jpg" width="50" height="37" alt="" border="0"></a>
<a href="about.aspx"><img src="images/tabDMP.jpg" width="50" height="37" alt="" border="0"></a>
<a href="albums.aspx"><img src="images/tabIVA.jpg" width="60" height="37" alt="" border="0"></a>
<a href="winners.aspx"><img src="images/tabBank.jpg" width="60" height="37" alt="" border="0"></a>
<a href="managers.aspx"><img src="images/tabLoans.jpg" width="50" height="37" alt="" border="0"></a>
<a href="whatson.aspx"><img src="images/tabAdmin.jpg" width="50" height="37" alt="" border="0"></a>

</div>
</div>

<div id="content"></div>

[simonuk]

My advice is get it working in Firefox and then fix for IE. The reason is most of the browsers out there are standards compliant except for IE. Get it working in FireFox and it should work in most other browsers. IE is a law onto itself so your layout may need some IE6 and IE7 fixing.

[tangor]

I'm not the brightest bulb in the box, but why do you have two different width statements, a larger one inside a smaller one?

More willing to look at it with a working page example... I don't have time to cut and paste and build a page to test it...

[hicksmcb]

OK cheers. Do you know any good sites with Firefox specific examples.

[CSS_Kidd]

the easiest way to do it is to zero out all browsers by creating a css rule such as this.
* {
padding:0px;
margin:0px;
}

this gets rid of all the additional spacing created by all tags that have different amounts of spacing in different browsers. then you don't have to mess with any thing that much. Well except for stupid IE fixes for trans images and stuff but that is another topic.