Hi,

folgendes: FF (1.0.7) hat irgendwie in <div> Boxen die unangenehme Eigenschaft, daß ein Bild per <img> Tag immer einen (denke ich mal) 2 Pixel großes Padding unten dranhängen hat anstatt bündig die <div> Box auszufüllen (IE macht es nicht, aber was heißt das schon). Sehr schön sieht man das, wenn man die <div> Box noch umrandet. Alles paßt genau, nur zwischen Bildunterseite und Boxrahmen ist dieser Abstand...

Sogleich per CSS das Padding der <div> Box auf 0px reduziert und die Border beim <img> aufgehoben (wegen XHTML), aber der "Fehler" bleibt.

Habe ich was übersehen oder weiß jemand mehr darüber?

Thx für die Antworten im voraus :)

K:R-I)Z++
"CSS ist cascading style sheets. Und nicht so'n Ranzspiel." - dp
In memory of Voice († 2005/03/30)

Quellcode:img
{
    display: block;
    margin: 0;
}
Das beseitigt das Problem, ausser du willst dein Bild weiterhin als Inline-Element darstellen.

In der Tat. Nur verstehe ich nicht, wieso ein Bild als inline ein derartiges Padding verursacht, zumal die <div> Box bündig abschließt bzw. sich dem Content anpasst. Sieht ja so aus, als ob eine Art Baseline für alle inline Elemente existiert, die 2 Pixel für darunterliegende Schriftelemente reserviert. Naja...

Danke Snake_Shit.

K:R-I)Z++
"CSS ist cascading style sheets. Und nicht so'n Ranzspiel." - dp
In memory of Voice († 2005/03/30)

Ich habe eine konforme Lösung für das "Gap" Problem gefunden (CERN sei Dank).

Erstmal die Ursache. Es tritt anscheinend nur bei Verwendung der Strict Konformität auf, da ich die Webseite in XHTML 1.0 Strict erstelle. Da ein Image erstmal von Natur aus inline ist, werden auch alle Texte danach inline gefloatet. Wenn man nun zum Bleistift ein Zeichen wählt, welches die Baseline des Zeichensatzes ausnutzt (g, j, y usw.), dann gappt FF korrekterweise die Baseline des Zeichensatzes (wahrscheinlich in der totalen Relation zu 1.0 em) rechts vom Image, so daß dieser merkwürdige Abstand am Bildboden zum Elternelement auftritt.

Jetzt zur Lösung: Snake_Shits Ansatz ist soweit i.O., solange man das Image als block Element floaten lassen will. Das will ich aber nicht, es soll inline bleiben. Der einzige Weg, den Baseline-Gap des Images zu umgehen, besteht darin, die vertikale Ausrichtung auf top zu stellen. Und schon verschwindet (augenscheinlich) der Gap. FF, IE und Opera werden dadurch zur äquivalenten Anzeige gezwungen:
Quellcode:img
{
    border: 0px;
    vertical-align: top;
    margin: 0px;
} So hat es dann funktioniert.

K:R-I)Z++
"CSS ist cascading style sheets. Und nicht so'n Ranzspiel." - dp
In memory of Voice († 2005/03/30)