Liste (CSS-modif.) in 3 Browsern unterschiedlich lang.

[aha!]

Hallo zusammen :-)

Mein erster Post und gleich eine Frage :-/

Ich stehe vor folgendem Problem:

Ich habe mit Hilfe von Listenelementen eine senkrechte Navigation erzeugt und diese mit CSS modifiziert. Leider hat diese Navi in drei verschiedenen Browsern drei unterschiedliche Längen (nach unten) und ich weiß nicht warum:

vlnr: Opera 9.62, Firefox 3.0.5 , Safari 3.2.1

Ich habe mit den paddings und margins herumexperimentiert, komme aber nach 3h immer noch auf keinen grünen Zweig.

HTML:

<div id="navi-navigation">
<ul id="navigation">
<li><a href="startseite.html">Startseite</a></li>
<li><a href="Aktuelles.html">Aktuelles</a></li>
<li><a href="ueber.html">Wir &uuml;ber uns</a></li>
<li><a href="vorteileleistungen.html">Vorteile und Leistungen</a></li>
<li><a href="produktportfolio.html">Produktportfolio</a></li>
<li><a href="kontaktanfahrt.html">Kontakt und Anfahrt</a></li>
<li><a href="impessum.html">Impressum</a></li>
</ul></div>

CSS:

	#navi-navigation {
position:absolute;	
top:281px;
width:158px;
left:0;
margin:0;
padding:0;
}
	
ul#navigation{
list-style-type:none;
margin:0;
padding:0;
}
						
ul#navigation li{
margin-bottom:1px;
}
						
ul#navigation li a{
background-color:#d3d3d3;
display:block;
padding:6px;
width:146px;
}
							
ul#navigation li a:hover {
background-color:#9a9a9a;
}

Wenn ich mir die obere Grafik genau ansehe, entsteht genau unterhalb er Buchstaben ca 1px Abstand. Ich habe aber keine Ahnung, woher dieser kommen könnte. Könnt ihr mir vielleicht helfen?

Besten Dank im Voraus !!

[hero-master]

Moin aha,
Willkommen im TP

Ich habe aber keine Ahnung, woher dieser kommen könnte

Jeder Browser ist eigen, hat eigene Einstellungen und andere Standards. Demnach solltest du versuchen so gut wie alles mit CSS zu definieren, wenn es an das Layout geht. Die kleinen Unterschiede kommen dadurch zustande, dass die Brower unterschiedliche Zeilenhöhen als Standard haben. Eigentlich sind die Unterschiede nur marginal, aber sie summieren sich bei dir eben
Lösung: Definiere für die Listenpunkte einheitliche Zeilenhöhen. Dadurch kannst du entweder padding-top und -bottom weglassen und dann eine größe Zeilenhöhe verwenden:

line-height:32px;

oder du lässt das padding drin und arbeitest dann mit Werten um die 14px (120% der font-größe am besten)

[aha!]

Ich danke dir vielmals !!
Konnte mit deiner Hilfe noch ein paar andere "unbekannte" Fehler ausmerzen.
Besten Dank nochmal.