IE und CSS
Boxmodel und andere Merkwürdigkeiten
Die magische Vergrößerung eines Containers
Ein simpler Trick, der bereits Generationen von Entwicklern in den Wahnsinn getrieben hat.
Donauflussschifffahrtskapitänsanwärter
{
width: 100px;
}
DAS sind 100px ...
Inhalt fließt aus der Box heraus (korrekt)
IE sagt: Box paßt sich dem Inhalt an (falsch)
[solche Umzugskartons hätte ich gerne ;o))]
Math for Beginners
MS gibt Dir eben mehr ...
#orangebox {
margin-left: 100px;
}
DAS sind 100px ... hallo?
Der Boxmodel-Bug
oder: Die magische Nicht-Vergrößerung eines Containers
|
kurzer Text |
ein Text mit nicht so vielen Worten |
{
width: 100px;
padding: 10px;
border: 3px solid #f00;
}
border + padding + width + padding + border
3 + 10 + 100 + 10 + 3 = 126px Breite (korrekt)
IE sagt: Box ist nur 100px breit. Der Raum für den Content verringert sich auf 74px (falsch).
Der Effekt des IE-Boxmodel-Fehlers auf pixelgenaue Layouts ...
#wrap {
width: 300px;
height: 100px;
border: 1px solid #f00;
}
.b1, .b2, .b3 {
float: left;
width: 100px;
height: 100px;
}
Container *wrap* (300px breit) umspannt drei Boxen à 100px Breite (korrekt).
IE sagt: Die Border wird nicht zur Breite hinzugerechnet, deshalb reicht der Platz innerhalb des Containers *wrap* nicht aus - die rechte Box rutscht nach unten (falsch).
Das kann selbst bei simpler Kursiv-Schrift tödlich sein ...
lorem ipsum
lorem ipsum
{
width: 200px;
}
Schrift bleibt in der vorgegebenen Breite der Box (korrekt).
IE sagt: Box wird durch die kursive Schrift verbreitert (falsch).
Breite und absolute Positionierung
Irgendwo in der Nähe müßte eine gelbe Box mit grünem Rahmen am rechten Bildschirmrand hängen - die gehört zu diesem Beispiel ... Das ist Box 3, die mittels absoluter Positionierung aus der Box 1 losgelöst wird und eine vorgegebene Position einnimmt.
box2: float: right; width: 50%;
box3 wird 'absolute' verschoben
box3: position: absolute; top: 0; right: 0; width: 50%;
Box 3 wird aus dem Elementfluß gelöst und bezieht ihre Position und Breite auf das Fenster (korrekt).
IE sagt: Box 3 berechnet ihre Breite (50%) aus dem sie (nun nicht mehr) umgebenden Element 'box1' (falsch).
Der Peekaboo-Bug
Kuckuck - Du siehst mich ... nicht!
Einfach mit der Maus über die Test-Links fahren ...
Test-Link
im float
Irgendein Text und ein Test-Link
Irgendein Text und ein Test-Link
Irgendein Text und ein Test-Link
Irgendein Text und ein Test-Link
Irgendein Text und ein Test link
Irgendein Text und ein Test-Link
Irgendein Text und ein Test-Link
Der Guillotine-Bug
Fröhliche Hinrichtung von unnützem Content
Vorsicht - die tödlichen Links sollte man nicht berühren!
Mit dieser Codierung läßt sich ein erfolgversprechendes Online-Spiel basteln.
Der Test-Link kann genutzt werden, um die Hinrichtung abzubrechen.
Der Content im unteren Bereich dieser Spalte, zB. dieser Abschnitt, ist jedenfalls prädestiniert für eine Hinrichtung.
Der 3-Pixel-Bug
Lieber ein bißchen mehr, gelle ...?
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in ...Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in ...Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in ...
Hier ist ein ganz normales Szenario - zwei Container sitzen nebeneinander (typisch: Menü und Content). Der linke Container wird mittels float: left aus dem Textfluß gehoben und hat eine Breite von 100px. Der rechte Container liegt im normalen Textfluß. Wenn man genau hinschaut, fällt auf, daß der IE alle Zeilen, die direkt neben dem Float liegen (auf der gesamten Höhe des Floats), nochmals um 3 Pixel "einrückt" - warum auch immer. Im vergrößerten Bild links wird die Lücke verdeutlicht.
Öhmmm ... ohne Worte ...
Von der Schwierigkeit, einen Rahmen zu malen
Diese Box hat eine border und eine positive margin-top.
Diese Box hat eine border und eine negative margin-top.
Diese Box hat eine border und eine positive margin-top.
Diese Box hat eine border und eine negative margin-top.
Diese Box hat keine border.
Zwangslücken
Wenn Null nicht gleich Null ist ...
Die folgenden HRs sind so formatiert, daß sie wie ein Regenbogen aneinander "kleben" (margin und padding = 0).
Keine Lücken zwischen den HRs (korrekt).
IE sagt: Lückenlose HRs gibt es nicht (falsch).
Nein! IE nimmt keine Drogen!
Der ist einfach so ...
Hicks! ich bin nicht betrunken!
Hicks! ich bin nicht betrunken!
Hicks! ich bin nicht betrunken!
Hicks! ich bin nicht betrunken!
Hicks! ich bin nicht betrunken!
Hicks! ich bin nicht betrunken!
Hicks! ich bin nicht betrunken!
Hicks! ich bin nicht betrunken!
Beachtenswert ist übrigens der gewaltige Linksdrall der ganzen Konstruktion, der sich auch auf den ganzen Rest der Seite vererbt - daher steht dieses Ungetüm (fast) ganz am Ende :-)
Mehr? (Hicks!)
[Ja, `schuldigung ... hier unten ist jetzt wirklich alles kaputt ...]
Browser-News | Produktiv? | Browser-Links | mehr Workshops | Tips und Tricks