kerki: img-Style vertical-align: middle wird ignoriert (Mozilla)

Beitrag lesen

Hallo !

Ich habe mir die Sache jetzt noch einmal sehr ausführlich angesehen.

Vielleicht siehst du ja den Unterschied, wenn du mal
http://asc0000.calibra-web.de/ und
http://asc0000.calibra-web.de/?top=1 vergleichst.

Ja, diesen Unterschied sehe ich deutlich. Allerdings hast du auch gefudelt. Im ersten Fall hast du kein 'vertical-align' festgelegt, wodurch der default-Wert: 'baseline' angenommen wird. Hierdurch wird scheinbar die gesamte Zeile höher als per 'line-height' ursprünglich festgelegt.

Dies ist irgendwo nachvollziehbar: Wenn ich den Begriff 'baseline' richtig verstanden habe, ist dies die Unterkante der Buchstaben ohne Unterlängen (also A, b, c d etc. aber nicht g, j, p, q etc.). Bei wieviel px diese jetzt allerdings bei font-size: 11px liegt, weiß ich nicht. Selbst wenn sie bei 11px läge und ich ein Bild von 17px darauf setzte, wäre die Zeile somit höher als geplant.

Es ging aber um einen Unterschied zwischen 'vertical-align:top/bottom/middle' innerhalb einer Zeile, die genau so hoch ist wie das Bild selbst. Dieser Unterschied scheint mir wesentlich geringer, auch wenn er definitiv da ist und auch nicht weg gehen will. :-(

100% schlau werde ich aus der Spezifikation zu "vertical-align:middle" ohnehin nicht:

"Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent."
(Quelle: http://www.w3.org./TR/CSS2/visudet.html#propdef-vertical-align)

Wer oder was ist hier mit 'x-height' gemeint?

Ich könnte mir durchaus vorstellen, dass es hier bei kleinen Größen (11px, 17px) zu Rundungsfehlern kommen könnte. Die minimalen Unterschiede, die ich sehen konnte (1-2 px) deuten darauf hin.

In meinen Augen ist der Unterschied in der Darstellung bei 'vertical-align:middle;' aber durchaus zu verschmerzen. Bei einem direkten Vergleich mit mehreren Browsern fällt er zwar auf, aber wer guckt sich eine Webseite schon mit mehreren Browsern an? Außer uns hier! ;-)

Gruß,

kerki

P.S.: 34! :-)