Meny problem

Dessa jäkla menyer. :(

Nåväl, lyckades så de skulle funka i IE men så blev de problem i FF.
I IE stämmer den bra, men i FF är kanske 10 px för mycket åt höger.

Bilden här

#menu{
	width: 760px;
	margin: auto;
	background: url(images/chromebg2.gif);
	height: 28px;
	border: 1px solid #ccc;
	
}

#menu li{
	display: inline;
	list-style-type: none;
	
}

#menu ul{
	
	width: 100%;
	margin: auto;
	height: 28px;
	padding-top: 5px;
}

#menu a { 
   color: #003399; 
   text-decoration: none; 
   font-family: arial;
   text-transform:lowercase;
   font-weight: bold;
   font-size: 11px;
   margin: 6px;
   padding: 6px 11px 8px 10px;
   position: relative;
} 
 
#menu a:hover{ 
   color: #666666;
   background: url(images/chromebg3.gif);
   opacity: 0.5;
}

<div id="menu">   
	<ul>
<li>  <a href="index.html">Start</a>					</li> 
<li>  <a href="information.html">Om oss</a>				</li>
<li>  <a href="arkiv.html">Arkiv</a>					</li>
<li>  <a href="souvenirer.html">Souvenirer </a>			</li>
<li>  <a href="resor.html">Resor</a>					</li>
<li>  <a href="gastbok.html">G&auml;stbok</a>			</li>
<li>  <a href="lankar.html">L&auml;nkar</a>				</li>
<li>  <a href="kontakt/kontakt.php">Kontakt</a>			</li>
  </ul>
</div>

Kan tänka mig att jag har lagt in välidgt mycket onödig kod i css:en.

/Tack på förhand. simon :)

Testa detta då! Har lagt en border för tydligheten.
Bara att ta bort om du önskar.

<style type="text/css">
#menu li{
	display: inline;list-style-type: none}

#menu ul{position:absolute;left:50px;width:800px}

#menu a {
   color: #003399; 
   text-decoration: none; 
   font-family: arial;
   text-transform:lowercase;
   font-weight: bold;
   font-size: 11px;
   margin:6px;
   padding: 0 20px 0 20px;
   border:1px solid black;
} 
 
#menu a:hover{ 
   color: #666666;
   background: url(images/chromebg3.gif);
   opacity: 0.5;
}
</style>