Haben oder nicht haben: hasLayout

Außenabstände

Im IE 6 und 7 ist hasLayout notwendig, damit ein Element das in ihm stehende gefloatete Element vollständig umschließt. Nicht immer passt es, eine Breitenangabe zu definieren wie im Beispiel. Alternativ dazu können Sie hasLayout hier auch auslösen, indem Sie hasLayout durch height: 1% für den Internet Explorer 6 und min-height: 0 für den Internet Explorer 7 auslösen. Diese Angaben sollten Sie aber vor anderen standardkonformen Browsern verbergen.Eine Möglichkeit besteht in der Verwendung von obskuren Selektorkombinationen, die nur bestimmte Browser lesen:

* html .umfassend {
height: 1%;
} /* Nur fuer den IE6 */
*:first-child+html .umfassend {
min-height: 0;
} /* Nur fuer den IE7 */

Alternativ zu solch kryptischen Angaben bieten sich konditionale Kommentare an, um eine externe Datei einzubinden, die nur von Internet Explorern bestimmter Versionen gelesen wird.

Außenabstände

image.jpg

© Internet Magazin

hasLayout mittels Breitenangabe beim umfassenden Element verhindert das Zusammenfallen der Außenabstände im IE6 und IE7.

Ebenfalls eine wichtige Rolle spielt hasLayout bei den Collapsing Margins, den zusammenfallenden Außenabständen. Das Prinzip ist dabei Folgendes: Vertikale Außenabstände fallen bei statischen, das heißt nicht gefloateten oder positionierten Elementen, zusammen, und das auch bei verschachtelten Elementen.Im folgenden Beispiel hat der umfassende Container einen oberen Abstand von 50px und der Absatz, der in ihm steht, hat ebenfalls einen oberen Abstand, dieses Mal von 30px. Damit die Ausmaße der beiden Elemente deutlich werden, sind sie mit Hintergrundfarben versehen:

<div style="margin: 50px; backgroundcolor:
yellow"><p style="margin: 30px; backgroundcolor:
orange">Ein Absatz</p><p style="margin: 30px; backgroundcolor:
orange">Ein Absatz</p></div>

Jetzt fällt der obere Abstand des div-Containers mit dem oberen Abstand des ersten Absatzes zusammen. Oberhalb des gelben div-Containers sind 50px Abstand, innerhalb des gelben div-Containers schließt der orangefarbene Absatz direkt - ohne Abstand - oben an.Nicht immer ist das Zusammenfallen der Außenabstände erwünscht. Verhindern lässt es sich, indem Sie padding oder border angeben. Durch padding: 1px beim umfassenden Container bleiben die Außenabstände erhalten.

<div style="margin: 50px; backgroundcolor:
yellow; padding: 1px"><p style="margin: 30px; backgroundcolor:
orange"> Ein Absatz</p><p style="margin: 30px; backgroundcolor:
orange"> Ein weiterer Absatz</p></div>

Zusammenfassen lässt sich, dass die Situation in standardkonformen Browsern klar geregelt ist: Bei statischen Elementen fallen die vertikalen Außenabstände zusammen, außer sie haben padding oder border.

hasLayout und Collapsing margins

Im IE6 und IE7 verhält sich dies jedoch anders, denn das Zusammenfallen wird immer dann verhindert, wenn das Element hasLayout hat. Im folgenden Beispiel löst die Breitenangabe (width: 700px) im umfassenden div-Bereich hasLayout aus:

<div style="margin: 50px; backgroundcolor:
yellow; width: 700px;"><p style="margin: 30px; backgroundcolor:
orange">Ein Absatz</p><p style="margin: 30px; backgroundcolor:
orange">Ein weiterer Absatz</p></div>

Jetzt fallen im IE 6 und 7 die Außenabstände nicht zusammen, in anderen Browsern schon. Um dieselbe Darstellung im IE und in anderen Browsern zu gewährleisten, gibt es zwei Möglichkeiten: Wenn die Darstellung im IE6/IE 7 die gewünschte ist, ergänzen Sie padding oder border im umfassenden Element.Sollen hingegen die Außenabstände zusammenfallen, müssen Sie zu einem Trick greifen. Entfernen Sie im Beispiel width beim Element mit dem Außenabstand, aber ergänzen Sie ein weiteres umfassendes Element, das nur für die Breitenangabe zuständig ist:

<div style="width: 800px;"><div style="margin: 50px; backgroundcolor:
yellow; "><p style="margin: 30px; backgroundcolor:
orange">Ein Absatz</p><p style="margin: 30px; backgroundcolor:
orange">Ein weitere Absatz</p></div></div>

Auf hasLayout prüfen

Sind Sie unsicher, ob ein Element Layout hat oder nicht, dann lässt sich das rasch testen. Vergeben Sie dem Element eine ID. Dann genügt es, in der Adresszeile des IE6 oder 7 Folgendes zu schreiben:

javascript: alert(ELEMENTid.
currentStyle.hasLayout)

image.jpg

© Internet Magazin

"On having Layout" ist die umfassendste Darstellung des hasLayout-Themas (www.satzansatz.de/cssd/onhavinglayout.html)

Hierbei ersetzen Sie ELEMENTid durch die vergebene ID. Dann erscheint eine Meldungsbox, die verrät, ob das angegebene Element Layout hat (true) oder nicht (false). Sie haben nun typische Beispiele für die Auswirkungen von hasLayout auf die Darstellung im Browser kennengelernt. Aber nicht nur bei Floats, Margins und Filter spielt hasLayout eine Rolle: Es wirkt sich auch auf die Stapelreihenfolge bei der Verwendung z-index aus und verhindert im IE 6 eine Reihe von Bugs.Prinzipiell gilt, dass Elemente mit Layout im Allgemeinen eine stabilere Darstellung haben. Einem Element nachträglich Layout zu verpassen, ist an sich auch nicht schwer, da es Hacks wie height: 1% für den IE6 oder min-height: 0 für den IE7 gibt.Mühsamer ist es, hasLayout zu entfernen, wenn die über hasLayout bewirkte Darstellung im IE nicht die gewünschte ist. Hier ist dann größerer Aufwand notwendig, indem man etwa ein weiteres umfassendes Element einfügt, wie es am Beispiel der Collapsing Margins demonstriert wurde.

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
Film Amazon Prime Instant Video Warner Bros Emily Browning
Vorschau auf Film- und Serien-Highlights

Prime Instant Video lockt im Oktober mit Highlights wie "Sucker Punch", "Fifty Shades of Grey", "Spotlight" und der zweiten Staffel von "Ash vs. Evil…