Chrome, Safari, Opera Navigationsfehler

[Margina]

Guten Abend!

Ich habe ein kleines Problem mit meiner waagrechten Navigation. Die Navigation hatt eine breite von 800px, der container Bereich in der sich die Navigation befindet hatt ebenfalls eine breite von 800px.

Nun habe ich das Problem dass bei chrome, opera und safari der letzte Navigationspunkt auf die nächste zeile gedrückt wird, als ob die browser irgendwo ein paar Pixel Breite zuviel machen würden. Bei Firefox und Internet Explorer funktionierts einwandfrei.

Ich habe den Fehler einfach nicht gefunden, darum hoffe ich, jemand von euch kann mir weiter helfen.

  
<?php  
echo '  
<ul>  
<li><a href="#" class="topWhite">#</a></li>  
</ul>  
<ul>  
<li><a href="#" class="topWhite">#</a>  
<ul>  
<li><a href="#" class="dropScnd">#</a></li>  
<li><a href="#" class="dropScnd">#</a></li>  
</ul>  
</li>  
</ul>  
<ul>  
<li><a href="#" class="topWhite">#</a>  
<ul>  
<li><a href="#" class="dropScnd">#</a></li>  
</ul>  
</li>  
</ul>  
<ul>  
<li><a href="#" class="topWhite">#</a>  
<ul>  
<li><a href="#" class="dropScnd">#</a></li>  
</ul>  
</li>  
</ul>  
<ul>  
<li><a href="#" class="topWhite">#</a>  
<ul>  
<li><a href="#" class="dropScnd">#</a></li>  
<li><a href="#" class="dropScnd">#</a></li>  
</ul>  
</li>  
</ul>  
<ul>  
<li><a href="#" class="topWhite">#</a></li>  
</ul>  
<ul>  
<li><a href="#" class="topWhite">#</a></li>  
</ul>  
<ul>  
<li><a href="#" class="topWhite">#</a></li>  
</ul>  
<ul>  
<li><a href="#" class="dropEnd">#</a></li>  
</ul>  
<div class="clearFloat" ></div>';  
?>  

  
#navigation{  
	width: 800px;  
	height: 32px;  
	background-image: url(../img/navVer.png);  
    background-repeat: repeat-x;  
}  
  
#navigation a{  
	text-decoration: none;  
}  
  
#navigation a.dropScnd{  
	width: 180px;  
}  
  
#navigation a.dropEnd{  
	width: 143px;  
  
}  
  
#navigation a:hover.dropEnd{  
	color: #ffffff;  
}  
  
#navigation ul{  
	margin: 0px;  
	padding: 0px;  
	line-height: 30px;  
}  
  
#navigation li{  
	margin: 0px;  
	padding: 0px;  
	list-style:none;  
	float: left;  
	position: relative;  
}  
  
#navigation ul li a{  
	text-align: center;  
	height: 30px;  
	display: block;  
	border: 1px solid #000000;  
	color: #000000;  
}  
  
#navigation ul li ul li a{  
	background-color: #ffffff;  
}  
  
#navigation ul ul {  
	position: absolute;  
	visibility: hidden;  
	top: 32px;  
}  
  
#navigation ul li:hover ul{  
	visibility: visible;  
}  
  
#navigation li:hover{  
	background-color: #328332;  
}  
  
#navigation ul li:hover ul li a:hover{  
	background-color: #bceca8;  
}  
  
#navigation a:hover.topWhite{  
	color: #ffffff;  
}  
  
.clearFloat{  
	clear: both;  
	margin: 0px;  
	padding: 0px;  
}