Hallo,

ich kann leider folgendes Problem nicht lösen:
Bei meiner zukünftigen Navigationsleiste verschiebt sich beim Herauszoomen der letzte Navigationspunkt unter die anderen. (getestet mit IE8 & Firefox 3.5)
Auch beim Heranzoomen entsteht eine kleine Lücke.
Das wäre nicht so schlimm, doch anscheinend gibt es min. eine Firefox-Version (leider weiss ich nicht welche), die das auch bei der normalen Zoom-Einstellung "falsch" anzeigt.

Grüße
ewigergert

Seite: http://www.welcome-volunteer.org/test/

Die Breite von 800px soll auf jedenfall beibehalten werden.

  
<ul id="nav">  
	<li class="top1">  
		<a href="#" class="top_link"><div>Punkt1</div></a>  
	</li>  
	  
	<li class="top2">  
		<a href="#" class="top_link"><div class="down">Punkt2</div></a>  
	  
	</li>	  
	  
	<li class="top3">  
		<a href="#" class="top_link"><div class="down">Punkt3</div></a>  
	</li>  
		  
	<li class="top4">  
		<a href="#" class="top_link"><div class="down">Punkt4</div></a>  
	</li>  
		  
	<li class="top5">  
		<a href="" class="top_link"><div class="down">Punkt5</div></a>  
	</li>  
		  
	<li class="top6">  
		<a href="#" class="top_link"><div class="down">Punkt6</div></a>  
	</li>	  
	  
	<li class="top7">  
		<a href="#" class="top_link"><div class="down">Punkt7</div></a>  
	</li>	  
	  
	<li class="top8">  
		<a href="#" class="top_link"><div class="down">Punkt8</div></a>  
	</li>  
</ul>  

  
#nav {padding:0; margin:0; list-style:none; height:33px; width:800px;  
	  z-index:500; font:10px Verdana,Arial,sans-serif; border:1px solid red}  
  
#nav li {  
	position:relative; display:block; float:left; text-align:center; height:31px; width:99px;  
	cursor:pointer; border:1px solid #aaa; } /* gilt fuer alle li's */  
	  
	  
#nav li.top1 {background:url(../grafik/header1.gif); border-right:0}  
#nav li.top1:hover {background:url(../grafik/header_over1.gif)}  
  
#nav li.top2 {background:url(../grafik/header2.gif); border-right:0}  
#nav li.top2:hover {background:url(../grafik/header_over2.gif)}  
  
#nav li.top3 {background:url(../grafik/header3.gif); border-right:0}  
#nav li.top3:hover {background:url(../grafik/header_over3.gif)}  
  
#nav li.top4 {background:url(../grafik/header4.gif); border-right:0 }  
#nav li.top4:hover {background:url(../grafik/header_over4.gif)}  
  
#nav li.top5 {background:url(../grafik/header5.gif); border-right:0}  
#nav li.top5:hover {background:url(../grafik/header_over5.gif)}  
  
#nav li.top6 {background:url(../grafik/header6.gif); border-right:0}  
#nav li.top6:hover {background:url(../grafik/header_over6.gif)}  
  
#nav li.top7 {background:url(../grafik/header7.gif); border-right:0}  
#nav li.top7:hover {background:url(../grafik/header_over7.gif)}  
  
#nav li.top8 {background:url(../grafik/header8.gif); width:98px}  
#nav li.top8:hover {background:url(../grafik/header_over8.gif)}  
  
  
#nav li a.top_link {text-decoration:none; font:11px Verdana,Arial; font-weight:bold; color:#000}  
#nav li a.top_link div {padding-top:8px; width:100%;height:23px}