nicht angemeldet
Hallo,
lass mal die Höhenangabe des divs weg, gebe dem div eine border:1px solid red und du wirst sehen, warum Firefox und Opera die Grafik so positionieren.
1. Dein div hat eine bestimmte Zeilenhöhe, line-height. Solange es keinen Inline-Inhalt hat, also keine Zeilenboxen (line boxes), wirkt sich diese nicht aus.
2. Du bindest aber ein Bild ein, das ist in CSS-Begriffen ein replaced inline element. Dadurch wird eine Zeilenbox erzeugt, die das div-Element so hoch werden lässt wie in line-height.
3. Das Bild wird auf der Grundlinie der Zeile positioniert. vertical-align:baseline ist die entsprechende Eigenschaft.
4. Die Box ist also so hoch wie die line-height. Und das Bild liegt auf der Grundlinie. Wenn du jetzt einfach dem div eine feste Höhe gibt, wird zwar eine Höhe erzwungen. Die Zeilenbox wird dadurch aber nicht schmaler und wird auch nicht abgeschnitten, sondern lappt nach unten aus den Grenzen der div-Box heraus. Das ist üblich, solange standardmäßig overflow:visible gilt.
Du willst also, dass das Bild nicht auf der Grundlinie, sondern ganz unten in der Zeilenbox positioniert wird. Zudem soll die Zeilenhöhe der Bildhöhe entsprechen. Du könntest also dem img vertical-align:bottom und dem div line-height:5px geben. Oder du gibst einfach dem img display:block, sodass keine Zeilenbox erzeugt wird.
Siehe auch http://www.dodabo.de/html+css/img-table/.
Mathias
Der Martin