✔ vertical-align und der IE

[Gunah]

Moin,

also bei CSS geht im IE7 und tiefer kein vertical-align er nimmt es einfach nicht an...
der div davon hat display: table und der span darin display: table-cell

leider wird es im IE nicht mittig gesetzt sondern oben an der Kante, naja habe dann hier mal was mit JS gebastelt

vieleicht wisst ihr ja eine bessere möglichkeit wie man das Umsetzten kann

 <script type="text/javascript" language="javascript"><!--
    var BrowserName = navigator.appName;
    var ua = navigator.userAgent.toLowerCase();
    
if (BrowserName == "Microsoft Internet Explorer" && (ua.indexOf("msie 7")!="-1" || ua.indexOf("msie 6")!="-1")) {
    if(document.getElementById) {
        document.getElementById("product_left").innerHTML="<ta"+"ble id=\"product_left_ie\"><tr><td> 1.000,00 €<\/td><\/tr><\/table>";
    }
}//-->
</script>

Gruß
Gunah

EDIT: // in der IE8 Beta2 funktioniert vertical-align auch in anderen elementen als einer Tabelle

hier der CSS/HTML Code

#product_head #product_left {
	display: table;
	float: right;
	width: 50%;
	text-align: center;
	background-image: url('images/price_bg.jpg');
	height: 148px;
	width: 148px;
	vertical-align: middle;
}

#product_head #product_left span {
	display: table-cell;
	vertical-align: middle;
}

#product_left_ie {
	height: 148px;
	width: 148px;
	vertical-align: middle;
	text-align: center;
}

<div id="product_left"><span>{$PRODUCTS_PRICE}</span></div>

PS: bin mir aber auch immer noch nicht sicher in welches Forum das hier passt JSoderCSS

 

[Maik]

Hi,

der IE (auch in der aktuellen Version 7) untersützt nicht die Tabellenwerte der display-Eigenschaft, und somit funktioniert auch nicht die vertical-align:middle-Eigenschaft, um den Elementinhalt vertikal zu zentrieren.

Einen Workaround findest du in diesen Beispielen:

• http://www.pmob.co.uk/temp/vertical-align3.htm
• http://www.pmob.co.uk/temp/vertical-align11.htm

mfg Maik

 

[Gunah]

danke für die Links, kann man immer gebrauchen

nur leider passt es zum Teil hier bei mir nicht, da der Inhalt in der Box Dynamisch ist

denke dann bleiben wir bei diese Variante mit JS