✔ Exakte Höhe eines DIV-Blocks im IE

[Issy]

Ich versuche mit CSS DIV-Blocks mit einer exakten Höhe zu erstellen.
Dafür habe ich folgenden CSS-Code erstellt:

.tree {
	vertival-align: bottom;
	height: 15px;
	width: 140px;
	text-align: left;
	font-size: 9pt;
}

Dies ist der entsprechende HTML-Code:

<div class="tree"><img src="images/tree/minus_o.gif" border="0" /><img src="images/tree/line_o.gif" border="0" /> steel-line</div>
<div class="tree"><img src="images/tree/line.gif" border="0" /><img src="images/tree/line_m.gif" border="0" /> steel-line</div>

Die Bilder sind wie der DIV-Block exakt 15 Pixel hoch. Ohne dem nachfolgenden Text im DIV-Block wird der Block im IE mit genau 15 Pixel Höhe dargestellt. Sobald der Text hinzu kommt, dann ist der Block 3 Pixel höher.
Im Firefox klappt es. Da ist der Block in beiden Fällen 15 Pixel größ.

Ich habe schon viele Sachen probiert, aber ich finde keine Lösung. Bitte helft mir! Danke.

 

[Gumbo]

Passe mal die Schriftgröße (font-size) und Zeilenhöhe (line-height) für das Element an.

 

[Issy]

Font-Size hab ich schon mit drin. Auch wenn ich bei dieser Angabe mit px, statt mit pt mache geht es nicht. Auch das line-height-Attribut löst mein Problem im IE nicht.

Freu mich auf weitere Vorschläge.

 

[Maik]

Probier es mal mit folgender CSS-Regel:

div.tree img {
display: block;
float: left;
}

[editpost]

Zudem heißt die CSS-Eigenschaft vertical-align und nicht vertival-align.

 

[Issy]

Super! Das hat geklappt.

Vielen Dank!

 

[aphaean]

hmmm ... Steck doch mal deine Texte in p tags und setze dann das padding und die margin in .tree p auf null.

hope this helps ...
anna