CarstenP: Unterschiedliche Darstellung mit padding in IE6 und Firefox

Beitrag lesen

Hallo,

bei Firefox 1.0 wird der Text ein Pixel tiefer dargestellt als die Ausgabe im IE.

Das liegt im Auge des Betrachters. Bei mir würde der Text im IE ein Pixel höher dargestellt werden als im Firefox... ;-)

div#col h1

{
    font-size: 11px;
    line-height: 14px;
  color: #fff;
  background: #c0c0c0;
  padding: 3px 0 4px 4px;
}

  
line-height 14 Pixel minus font-size 11 Pixel ergeben 3 Pixel [1], die gleichmäßig ober- und unterhalb des Textes verteilt werden müssen. Da es keine halben Pixel gibt, müssen sich die Browser entscheiden, wo sie diesen letzten Pixel unterbringen werden. Und da es nicht festgelegt ist, wo dies zu geschehen hat, macht es jeder Browser je nach Lust und Laune. Bei anderen Schriftgrößen kann es übrigens in beiden gleich aussehen oder genau anders herum aussehen. Und dann sind da natürlich auch noch Opera, Konqueror, Safari, hastenichgesehen, etc. die sich auch alle für eine Variante entscheiden müssen. Bevor Du jetzt also damit anfängst, deswegen Browserweichen einzusetzen, solltest Du Dich eine Sache fragen:  
  
        Stört Dich tatsächlich dieser eine Pixel? [2]  
  
  
Zum Thema Browserweichen:  
Für CSS-Probleme solltest Du \_niemals\_ eine Javascript-Browserweiche einsetzen, dafür gibt es <http://aktuell.de.selfhtml.org/tippstricks/css/browserweiche/index.htm> und zahlreiche andere Seiten.  
  
Viele Grüße  
Carsten  
  
[1] Sorge dafür, daß hier ein gerader Wert herauskommt und Du bist Deine Probleme los...  
  
[2] Falls ja, dann solltest Du Dir überlegen, ob Du Dir das richtige Medium ausgesucht hast [3]  
  
[3] Ist nicht böse gemeint, aber selbst wenn Du es schaffst, es auf \_Deinem\_ System in Deinen Browsern gleich aussehen zu lassen, heißt das nicht, daß es überall so aussieht. Es gibt viel zu viele Komponenten, die diese Darstellung beeinflussen (Andere Schriftart, weil deine vorgegebene Schriftart nicht vorhanden ist; Mindestschriftgröße, da die 11 Pixel jemandem viel zu klein sind, ...) Pixelgenaues Layout auf HTML-Seiten kann sehr leicht in die Hose gehen.  

-- 
[Doctype-Switch? Was is'n das?](http://www.carsten-protsch.de/zwischennetz/doctype/)