nicht angemeldet
vertical-align:bottom IE6
Hallo,
ich habe das Problem, dass der IE6 vertical-align:bottom etwas "seltsam" auslegt:
<style type="text/css">
a {
display:block;
font:bold 11px arial;
padding:0px;
color:black;
}
a img {
width:20px;
height:18px;
vertical-align:bottom;
}
.plus {
background:pink;
}
.plusmin {
background:lightblue;
}
</style>
<table><tr><td>
<div>
<a href="#"><img class="plus" src="dot_clear.gif" border="0" height="11" width="15">mit DIV</a>
</div>
<a href="#"><img class="plusmin" src="dot_clear.gif" border="0" height="11" width="15">ohne DIV</a>
</td></tr></table>
Im FF ist alles perfekt - die Ausrichtung der Linktexte erfolgt bottom. Im IE6 (7 habe ich nicht probiert) wird nur der erste Link (der innerhalb des DIV) bottom ausgerichtet. Der zweite "hängt" in der Mitte rum. Warum?
Wenn ich vertical-align:middle/baseline nehme, werden im IE6 beide Linktexte zum Bild gleich ausgerichtet. Nur bei bottom - was ich aus optischen Gründen benötige - gibt es einen Unterschied.
Mein Fehler? Fehler im IE6? Wie bekomme ich den IE6 dazu, das "vernünftig" auszurichten?
Bitte keine Vorschläge zur Änderung des Markup - darauf habe ich keinen Einfluss. Es muss allein mit CSS gelöst werden.
Ralf
-
Wenn ich mich nicht täusche, musst du line-height ändern. vertical-align richtet sich danach.
-
Wenn ich mich nicht täusche, musst du line-height ändern. vertical-align richtet sich danach.
line-height bringt in diesem Fall gar nichts. Ich habe aber inzwischen herausgefunden, dass der IE mit einigen Werten für vertical-align Schwierigkeiten hat: http://www.css4you.de/Texteigenschaften/vertical-align.html
Darauf habe ich text-bottom ausprobiert und es erfüllt auch den Zweck.
-