Min-Height für den Internet Explorer
Nach obenProblemstellung
Oft möchte man eine Standardhöhe für seine Container festlegen und möchte, daß sich die Boxen automatisch mit dem Inhalt vergrößern. Man stellt dann allerdings fest, daß im Gegensatz zum Internet Explorer Gecko-Browser trotz überlaufendem Inhalt die definierte Höhe beibehalten.
Gecko-Browser verhalten sich allerdings in diesem Fall richtig, da man für diesen Zweck einfach eine Mindesthöhe ( min-height) festlegen sollte; min-height wird aber nicht vom Internet Explorer unterstützt, daher muß man sich eines kleinen Workarounds bedienen, um zu seinem Ziel zu gelagen.
Die Ausgangessituation: ein Container mit einer Klasse
<div class="test">...</div>
Da für den Internet Explorer die Angabe einer festen Höhe ausreicht, muß man dafür sorgen, daß die Höhe in allen anderen Browsern variabel bleibt.
.test
{
min-height:300px;
height:auto !important; /* für moderne Browser */
height:300px; /*für den IE */
}
Erläuterung:
Um eine flexible Höhe für moderne Browser sicherzustellen, wird die Conatinerhöhe auf "auto" (automatisch) in Verbindung mit !important gesetzt; der Zusatz !important verleiht einem Wert eine besondere Gewichtung, wenn er dahinter notiert wird und wird dadurch von Browsern bevorzugt. Hier wird ausgenutzt, dass der IE !important nur fehlerhaft umgesetzt.
Man kann aber auch einfach einen CC für den IE machen und dort die feste Höhe eintragen, dann wird auch !important nicht benötigt.
Hier kann man sich ein Beispiel dazu anschauen.
fphilipe
geht das auch mit min-width?
twisting
Nein, mit min-width geht es afaik nicht, da Blockelemente eine natürliche Breite von 100% haben. Den IE kann man dazu bringen, die Breite nach dem Inhalt auszurichten - standardkonforme Browser allerdings nicht.
Felix
Gesucht, gefunden, gefixed! Danke!
biju
Der Hack ist nicht ganz unproblematisch, wenn man auch die paar letzten Benutzer des Mac IE 5 berücksichtigen will. Dieser dusselige Browser versteht nämlich durchaus die !important Angabe, hat aber genau wie die Win IEs Probleme mit min-height ...
FuryDE
Hallo, es ist nicht richtig, wie sich Gecko bzw. Mozilla hier verhalten.
Schaut mal hier: www.selfhtml.de
Wenn man das berücksichtig, funktionieren die Layouts in allen (gängigen) Browsern.
Twisting
@biju: ...einfach den Star-HTML-Hack statt !important benutzen oder gleich ein eigenes Stylesheet für den IE per CC.
@FuryDE: Schön und gut...aber was hat das mit einer Mindesthöhe zu tun? Ich verwende dieses Beispiel in erfolgreich in vielen Seiten...
CH-Webdesigner
Das ist ja super! Endlich habe ich eine Lösung gefunden! Vielen Dank! Wie sieht es mit IE 7 Kompatibiliät aus?
buni
Danke Danke!!!
Ich war gerade schon am verzweifeln.
@CH-Webdesigner
Der IE 7 kennt min-height also bleibt nur zu hoffen, dass der auch in vielen anderen dingen besser ist als der IE6.
Koller Designs
Danke vielmals für diese Erklärung...
Internet Explorer macht mir viel Mühe, aber ein Teil ist schonmla erledigt..
Danke ;)
flisch
wie kann man denn eine seite in dem mittleren teil öffnen lassen? also was gibt man als ziel an?
Gruß
morth
Perfekt, danke!
xtoph
super, vielen Dank!
flys2006
Ist das super! Danke!! Vielen Dank.
ohne IE würde man nicht so viel verdienen
Danke schön! echt super! klappt nun überall: FF3, IE7, IE6
flava
THX Paul.
Funzt einwandfrei :)
JS
ich habe hier wohl eine bessere Variante gefunden:
www.icoost.com
metti
@JS: Was ist denn daran besser? Das sind genau drei div's zu viel - CSS-Probleme sollten nur im Notfall über das Markup gelöst werden.