line-height in Firefox und Safari

[vega]

Hi Jungs,

ich bin quasi mit der Website fertig und habe mal einen Cross-Browser-Test durchgeführt und werde dabei beinahe irre. Im IE 8 und Opera 10 sieht alles in Ordnung aus.

Im Firefox (*kotz*) und Safari hingegen wird einfach das line-height meiner Navigation nicht erkannt, d.h. der Abstand zwischen den Menüpunkten ist dort viel größer.

Hier noch einmal mein CSS-Code:

Code: Alles auswählen

ul.navi, ul ul {
   border:0;
   list-style-type:none;
   overflow:hidden;
   padding:0;
   }
ul.navi {
   font-size:0.76em;
   list-style-type:none;
   text-align:right;
   vertical-align:top;
   margin:0px;
   width:130px;
   height:300px;
   }

ul.navi ul {}
ul.navi li {
   padding-bottom:3px;
   }
ul.navi li.drop {}
ul.navi li a, ul.navi li a:visited {
   width:130px;
   text-decoration:none;
   }
ul.navi li a.last, ul.navi li a.last:visited {}
ul.navi li ul {
   display:none;
   padding-left:5px;
   }
ul.navi li:hover a, ul.navi li a:hover {
   padding-right:5px;
   }
ul.navi li:hover ul, ul.navi li a:hover ul {
   display:block;
   height:3.43em;
   width:130px;
   }
ul.navi li:hover ul li a, ul.navi li a:hover ul li a {
   color:#9b9b9b;
   line-height:1em;
   }
ul.navi li:hover ul li:hover a, ul.navi li a:hover ul li a:hover {
   color:#646464;
   }

Das line-height:1em wird irgendwie nicht gewertet/gelesen und somit ist die aufpoppende Navigationsfläche nicht ausreichend für die Buttons, da diese weiter auseinander liegen.

Weiß jemand diesbezüglich Bescheid? Danke euch im Voraus.

[dhx]

Moin,

da für die übergeordnete Liste offentsichtlich keine Schrifthöhe angegeben wurde, greifen hier die Browser auf ihre eigenen Einstellungen zurück. Daher, und weil em vererbt wird, gibt es unterscheidliche Ergebnisse in den Browsern.
http://little-boxes.de/lb1/11.6-die-ver ... tance.html

Mein Lösungsverschlag
Definiere eine einheitliche Schrifthöhe für die komplette Navigation:

Code: Alles auswählen

ul.navi li
    {
      line-height: 1em;
    }

Für diese Regel:

Code: Alles auswählen

ul.navi li:hover ul li a, ul.navi li a:hover ul li a {
       color:#9b9b9b;
       }

entfällt dann die Angabe zur Schrifthöhe. Abstände zwischen den einzelnen Elemente (ul, li) dann wie gewohnt über margin oder padding steuern.


Alternativ, so mache ich das, lässt sich die Schrifthöhe auch über body festlegen.
Kurzes Beispiel:

Code: Alles auswählen

body
  {
    font:100.1%/1.4 Calibri, Arial, sans-serif;
  }

So habe ich dann für die gesamte Website eine einheitiche, nicht nur für Listen, Schrifthöhe.


Eigentlich ist die Höhenangabe hier:

Code: Alles auswählen

ul.navi li:hover ul, ul.navi li a:hover ul {
       display:block;
       height:3.43em;
       width:130px;
       background: #FFCC66;
       }

unnötig, da diese sich doch automatisch ergibt. Würde ich also entfernen.

[vega]

danke dir, das obere hat geholfen.

übrigens, ich habe das schon im body stehen:

font-family:Arial,Helvetica,sans-serif;
font-size:100,01%;

ohne das /1.4, was immer das heißen/bedeuten soll.