nicht angemeldet
Automatische Mindesthöhe von div-Elementen
Hallo,
ich brauche dringend Hilfe bei der Frage, ob es für div-Elemente eine Mindesthöhe gibt, von der ich nichts weiß.
Folgendes Problem: Um Grafiken zu positionieren und dabei Tabellen aus dem Weg zu gehen, wollte ich div-Bereiche anlegen und in diese die Grafiken einbetten, also
<div style="float:left; position:absolute; top:133px; left:5px; height:3px; padding:0px;">
<div style="float:left; width:273px; height:3px;">
<img src="images/xy.gif" width="273" height="3" border="0">
</div>
<div style="float:left; width:226px; height:3px;">
<img src="images/yx.gif" width="226" height="3" border="0">
</div>
</div>
Der Fehler besteht darin, dass mein IE 6 den Bereich, der eigentlich drei Pixel hoch sein soll, aus unerfindlichen Gründen 12 Pixel größer macht (oberer Rand). Das wird deutlich, wenn man das Eltern-div mit einer Hintergrundfarbe versieht.
Sobald die Grafik eine Höhe von 15 Pixel hat, ist die Welt sowie die Positionierung wieder in Ordnung.
WARUM zum Kuckuck ist das so? Und wie kann ich das vermeiden?
Vielen Dank sagt
Der André
P.S.: An margin oder padding liegt's anscheinend nicht, das habe ich schon probiert.
-
Hallo,
<div style="float:left; position:absolute; top:133px; left:5px; height:3px; padding:0px;">
<div style="float:left; width:273px; height:3px;">
<img src="images/xy.gif" width="273" height="3" border="0">
</div>
<div style="float:left; width:226px; height:3px;">
<img src="images/yx.gif" width="226" height="3" border="0">
</div>
</div>Der Fehler besteht darin, dass mein IE 6 den Bereich, der
eigentlich drei Pixel hoch sein soll, aus unerfindlichen
Gründen 12 Pixel größer macht (oberer Rand).Du denkst schon daran, dass <div>s Blocklevel-Elemente sind?
Ein Blocklevel-Element zieht einen Zeilenumbruch nach sich.
Die Folgerung:<div style="float:left; position:absolute; top:133px; left:5px; height:3px; padding:0px;">
<div style="float:left;width:273px;height:3px;display:inline;">
<img src="images/xy.gif" width="273" height="3" border="0">
</div>
<div style="float:left; width:226px; height:3px;display:inline;">
<img src="images/yx.gif" width="226" height="3" border="0">
</div>
</div>Evntl. musst du den Bildern selber auch nochmal ein
'display:inline' mitgeben. Aber Achtung! Ist nicht getestet.Gruesse,
CK-
Hallo,
vielen Dank erst einmal für die Anregung.
Du denkst schon daran, dass <div>s Blocklevel-Elemente sind?
Ein Blocklevel-Element zieht einen Zeilenumbruch nach sich.Daran hatte ich gedacht, aber das erklärt 1. nicht, warum der Rand oberhalb und nicht unterhalb der 3-Pixel-hohen Grafik entsteht.
Und 2. würde das bedeuten, dass das Problem bei allen Grafiken auftaucht. Tut es aber nicht. Ich habe noch zwei Zeilen oberhalb dieser div-Zeile mit 52 und 88 Pixeln Höhe, darunter noch eine mit 20 Pixeln. Hier wird alles richtig angezeigt.
Evntl. musst du den Bildern selber auch nochmal ein
'display:inline' mitgeben. Aber Achtung! Ist nicht getestet.Ich habe beide Vorschläge vergeblich probiert. Leider!
Gruß,
Der André
-
-
Hallo,
<div style="float:left; position:absolute; top:133px; left:5px; height:3px; padding:0px;">
<div style="float:left; width:273px; height:3px;">
<img src="images/xy.gif" width="273" height="3" border="0">
</div>
<div style="float:left; width:226px; height:3px;">
<img src="images/yx.gif" width="226" height="3" border="0">
</div>
</div>Der Fehler besteht darin, dass mein IE 6 den Bereich, der eigentlich drei Pixel hoch sein soll, aus unerfindlichen Gründen 12 Pixel größer macht (oberer Rand). Das wird deutlich, wenn man das Eltern-div mit einer Hintergrundfarbe versieht.
Sobald die Grafik eine Höhe von 15 Pixel hat, ist die Welt sowie die Positionierung wieder in Ordnung.hatte das Problem auch schon, bei mir hats funktioniert nachdem ich
ein "font-size:0px;" dazugeschrieben hab.(beim mozilla geht's bei mir übrigens auch ohne font-size)
-
Hallo,
hatte das Problem auch schon, bei mir hats funktioniert nachdem ich
ein "font-size:0px;" dazugeschrieben hab.Heidewitzka, es funktioniert!!!!
Sowas Blödes aber auch.Vielen vielen Dank!
Gruß,
Der André
-