Hello developers and designers,

I am trying to get my simple CSS menu to sit directly beneath the header image, with no space between the two. Both objects are in their own divs, #header and #horizontalmenu. Here's the HTML:

Code:
...
<body>
<div id="wrapper"><!--Every thing enclosed in this div-->
<div id="header"></div><!--The logo is held in this div -->
<div id="horizontalmenu">
<ul class="menu"><li><a href="">Menu 1</a></li>
	<li><a href="">Menu 2</a></li>
	<li><a href="">Menu 3</a></li>
	<li><a href="">Menu 4</a></li></ul>
</div>

  <div id="container">...
And here's the style sheet:

Code:
body {
	font: 80&#37;/1.5 Verdana, Arial, Helvetica, sans-serif;
	color: #8A8987;
/*	margin: 20px 0px; */
	padding: 0px;
	text-align: center; /* Centers the page in Internet Explorer */
	background-image: url(../images/BG_Grey_Gradient_&_Lines.gif);
	background-repeat: repeat-x;
	background-color: #d9d9d9;
}
#header {
	width: 728px;
	margin-right: auto;
	margin-left: auto;
/*	margin-bottom: -20px; */
	height: 180px;
	background-image:url(../images/header.jpg)
}
#horizontalmenu {
	width: 728px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: -20px;
	height: 20px;
}
#wrapper {
	background: url(../ims/bg.jpg) repeat-y left;
	width: 728px;
	margin: 20px auto;
	text-align: left; /* Reverses the above rule for the rest of the content */
}
#adbanner {
	width: 728px;
	margin-right: auto;
	margin-left: auto;
/*	margin-bottom: -20px; */
	height: 90px;
}
#footer {
	width: 728px;
	margin-right: auto;
	margin-left: auto;
/*	margin-top: -20px; */
	height: 92px;
	text-indent: 40px;
	text-align: left;
	color: #666B64;
}
#container {
	width: 500px;
	float: left;
}
#content {
	margin-right: 100px;
	margin-left: 30px;
}
#content p {
	text-align: left;
}
#sidebar {
	width: 200px;
	float: right;
	margin-right: 5px;
	margin-left: 10px;
	text-align: left;
}
#sidebar ul {
	margin: 0;
	padding: 0;
	font-size: 11px;
	color: #3C3C3C;
	font-weight: bold;
	background: none;
}
#sidebar li {
	margin: 0 0 10px;
	padding: 0;
	list-style-type: none;
	background: none;
	color: #3C3C3C;
	font-weight: bold;
}
#sidebar a, a:visited {
	border-left: 10px solid #95927F;
	padding: 4px 4px 4px 10px;
	color: #95927F;
	display: block;
	background: none;
	width: auto;
	text-decoration: none;
}
#sidebar a:hover {
	border-left: 10px groove #FBFBFA;
	color: #F50874;
	background: none;
}
#currpage a {
	border-left: 10px double #F50874;
	color: #666666;
	background: none;
} /* To highlight the current page - apply as necessary */
h1 {
	border-left: 18px solid #DBD4C7;
	padding-left: 1em;
	font-size: 1em;
	width: 40px;
	margin: 20px 0 20px 0;
	text-align: left;
}
h2 {
	border-left: 15px solid #6A6A68;
	padding-left: 1em;
	font-size: 1em;
	width: 40px;
	margin: 20px 0 20px 0;
}
h3 {
	border-left: 15px solid #DBD4C7;
	padding-left: 1em;
	font-size: 1em;
	width: 40px;
	margin: 20px 0 20px 0;
	color: #95927F;
	font-weight: bold;
	text-decoration: underline;
}
h4 {
	border-left: 6px solid #6A6A68;
	padding-left: 1em;
	font-size: 1em;
	width: 40px;
	margin: 20px 0 20px 0;
}
ul {
	list-style-type: none; /* suppression of useless elements */
	width: 100%; /* precision for Opera */
}
li {
	float: left;
} /* lists aligned to the left */
/* Menu */
.menu a {
     margin: 0 2px;
     width: 100px; /* definition of menu button size */
     height: 20px;
	 float: left;
     display: block;
     text-align: center;
     border: 1px solid gray;
     text-decoration: none;
     color: #000;
     background: #fff;
     }
.menu a:hover {
     background: #ccc;
     border: 1px solid gray; 
     }
.menu a:active {
     background: gray;
     border: 1px solid gray; 
     color: #fff;
     }
/* END MENU */
.last {
	margin-bottom: 0;
}
.clearing {
	height: 0;
	clear: both;
}/*Used here to clear the floated elements above*/
And here's the visual output:

As you can see, IE renders the page exactly as I want it, but Firefox leaves a small gap.

I've tried the following to no avail :

> Put menu into it's own div after the header (Shown above)

> Placing menu after header, but not inside a div (Both browsers displayed gap like this)

> Put menu code inside the header div (Menu displayed at top of header div in both browsers)

Any ideas gratefully appreciated thanks!

Cheers,

Michael