Min-height im Safari simulieren

Min-height ist ein nützliches Hilfsmittel, aber leider gibt es immer noch den ein oder anderen Browser, der dies nicht versteht. Sowohl der Internet Explorer als auch der Safari kennen diese Eigenschaft nicht, obwohl diese demnächst in den Safari implementiert werden soll.

Man kann diese Probleme mit Hilfe der Browser-Ausschluss-Hacks für den IE gut umgehen, indem man ihm eine fixe Höhe zuweist , die bei Ausdehnung des Inhaltes keinen Bestand mehr hat. Dies gefällt den Geckos nicht. Die Boxen behalten Ihre vorgeschriebene Höhe und der Inhalt fließt aus Ihnen hinaus . Das kann man verhindern, indem man bei diese Browser height: auto und die entsprechenden min-height einsetzt.

Eigentlich eine nette Lösung bis man auf den Safari stößt, denn der lässt sich nicht identifizieren. Er verhält sich generell, wie die Geckos. (Soweit ich weiss, hat er aber eine Konqueror- Engine? )

Also, was tun.

Mein erster Versuch war ein right gefloatetes transparentes Image, ich kam mir fast vor , wie in alten table -Zeiten. Aber leider brachte das eine Reihe von Kolateralschäden mit sich.

Bis ich auf folgendes Website stieß: www.greywyvern.com/code/min-height-hack.html


.prop {
height:50px;
float:right;
width:1px;
}

.clear {
clear:both;
height:1px;
overflow:hidden;
}

#aussen
{min-height:50px;
height:auto;}

/* bis 6 */
* html #aussen {height:50px;}

/* ie 5*/
html + body #auusen {height:50px;}

/* bis 6 */
* html .prop {display:none}

...



Inhalt

In einem Div befindet sich ein anders Div mit eine Höhe von 50px und spannt unser äußeres Div auf. Es wird genau , wie mein transparentes Bild gefloatet und hat eine Breite von einen Pixel. Anschließend kommt unsere eigentlicher Inhalt und erst dann wird das Div von oben gecleart. Overflow :hidden wird benötigt, da der IE sich weigert ein Div kleiner als 1em zu machen.

Und es funkt

Wenn das alles so einfach wäre.
Der IE<6 fängt an zu spinnen und bricht nach dem gefloatetem Div den Inhalt um.

Aber mit den CSS Browser-Hacks kein Problem . Für den IE brauchen wir .prop nicht, wenn wir die Höhe des äußeren Div's auf den gewünschten Wert setzen.

Und übrigens das .clear div ist 1px hoch .

Kommentare 0

Kommentar schreiben