Kaputtes Layout in IE6? Nicht verzagen!

Notiz an mich selber: Wer bei komplexen Float-Layouts die Internet-Explorer-6-Optimierung vor sich hat und bestürzt bemerkt, dass das Layout wirklich katastrophal zerstört aussieht – Ruhe bewahren! Rund 90 Prozent der Layoutprobleme lassen sich lösen, in dem man nahezu allen umschließenden Boxen eine Höhe von 1% zuweist. Fast ist man geneigt, folgendes zu machen:

* { height: 1%; }

Nun gut, so ganz klappt das nicht, aber es kommt dem nahe  … Warum das so ist? Lesen!

14 Kommentare

Torsten

noch besser, wenn auch nicht css-standard-konform, ist:

zoom: 1;

das hat weniger nebenwirkungen.

Daniel Böhmer

Ich habe eben mal kurz überflogen, was es mit dieser hasLayout-Eigenschaft auf sich hat. Auf meiner Stirn zeichnen sich deutlich die Buchstaben WTF ab …

Wer denkt sich so etwas aus und wozu soll das bitte gut sein? Allein die Tatsache, dass in diesem Zusammenhang etliche IE-Fehler auftauchen, gibt mir das Gefühl es mit einem Objekt der Sinnlosigkeit zu tun zu haben.

Das ist echt total nervig, wenn man Websites für den FF schreibt und dann im IE alles ganz anders aussieht.

Mein größter Aufreger: Damit die Rückwärtskompatibilität gegeben ist, wird vieles im IE nicht korrigiert. Damit schleppt sich der ganze Mist weiter und weiter und wird niemals gelöst werden. Ist das nicht frustrierend?

Gerrit

Ach, es geht. Man kriegt das schon immer alles noch geregelt, in einem Extra-Stylesheet, hermetisch vom Rest getrennt. Ist bei komplexen Layouts etwa ein Tag Arbeit für IE7 und IE6. Das schöne ist: Die Änderungen, die man im IE-Stylesheet macht, wirken sich nicht auf die guten Browser aus. Es ist wesentlich kniffeliger, kleine Darstellungsunterschiede in Opera oder Safari zu fixen, da man hier keine Extra-Stylesheets hat!

Tim

@ Gerrit: Sehe ich auch so. Die IE’s kann man gesondern ansprechen, beim Rest siehts schlecht aus.

Für den Opera nutze ich wenn unbedingt notwendig in einer IF-Else-Schleife:
...
if(preg_match(’/Opera(?:\/| )(\S+)/’,$_SERVER[‘HTTP_USER_AGENT’])) {
$styleSheet = ...

Grüße.

Max

By the way: Alles Gute zum Burtseltag! Viel Glück und Erfolg im nächsten aufregenden Jahr!

Sascha

offtopic: Ich schließe mich hiermit Max an, auch von mir alles Gute nachträglich zum Geburtstag  …

Er ist fast 28 Jahre alt. Schnell geändert ;-)

Alex

Ich sehe die Problematik beim IE6 nicht mehr ganz so eng.
Ich denke, wenn man etwas Erfahrung mit der ganzen Materei hat fängt man von Anfang an, diese Browserunzulänglichkeiten auszugleichen, so gehts mir inzwischen.
Konnte in den letzten Projekten größere Probleme vermeiden, nur bei den super »interaktiven-Web2.0-DieHard-community-reloaded-ultra-Ajax« Layout veränderungen ist es ab und an mal knifflig.
Der IE7 is ja einigermaßen erträglich und wird mit sicherheit bis Ende des Jahres einen sehr hohen Browseranteil ausmachen, so das IE6 bis mitte 2008 hoffentlich vernachlässigbar wird.

Mirko Gustony

Ähemm …

… also zum einen liegt das Original bei satzansatz

Zum anderen rate ich vom Einsatz von 1% ab und empfehle 1px zu verwenden. Warum? Weil unter Umständen auf sehr langen (bzw. hohen) Seiten die Höhe des Elements dann aus dem Ruder laufen kann und höher wird, als eigentlich nötig. Ist ja auch nicht hübsch dann … Der Effekt ist der gleiche nur versucht der Browser das Browserimitat dann die Höhe nicht relativ zu einem Elternelement zu bestimmen.

Gruß,
Mirko

Dentaku

Das ist natürlich richtig. Der IE7 war (auf meiner Webseite) im Juli dem IE6 mit 7564 zu 11098 Zugriffen (im März noch 3803 zu 9464) zwar noch unterlegen, aber das werden die automatischen Updates bis zum Ende des Jahres hoffentlich erledigt haben …

ChrX

Bin grad bei den Medienfreunden auf eine weitere Moeglichkeit gestossen , dem Opera ein eigenes Stylesheet unterzuschieben:

Opera hat die Eigenschaft, das type-Attribut bei der CSS-Einbindung einfach zu ignorieren. Dies kann man sich zu nutze machen.

Während alle anderen Browser folgende Stylesheet-Einbindung links liegen lassen, freut sich Opera und wendet die darin enthaltenen Anweisungen an:

@import url(spezielles_stylesheet_fuer_opera.css);

Alex

brauch man das eigentlich?
bis jetzt war Opera mit Abstand das kleinste Problem wenn es um die Darstellung ging.
Benutze Opera nur zum Abschluss um mehr oder weniger sicher zu gehen das alles ok ist …

Gerrit van Aaken

Opera 9 ist wirklich sehr ähnlich zu Firefox, da macht die Version 8 schon mehr Mätzchen, von Version 7 ganz zu schweigen. Aber Opera-Nutzer sind ja Update-freudig!

Der Explorer 6 wird uns auf jeden Fall bis 2009 oder 2010 erhalten bleiben – Automatisches Update wird in den meisten Firmen-Netzwerken gar nicht gern gesehen!

Aber ich finde den Trick mit »zoom: 1;« sehr gut, das habe ich mir gemrkt!

Harald Kampen

Ich stimme mit Gerrit überein, der IE 6 wird uns noch lange erhalten bleiben. Nicht nur wegen den Firmennetzwerken, es gibt auch immer mehr alte Rechner, die mit alten Windows-Systemen laufen.

Eine Extra-CSS ist mir aber zu unübersichtlich. Da versetze ich den IE 6 lieber in den Quirks-Mode und fixe in der CSS mit html>body, * html oder *+html.

Tim

@Harald Kampen:
Ich denke das ist Geschmackssache. Vorteil von zusätzlichen Stylesheets ist es ja das man IE6 und IE7 gesondert ansprechen kann und eben auch nur die jeweils gewollte IE-Version anspricht. Eigentlich eher ein Pluspunkt in Sachen Ãœbersichtlichkeit wie ich finde. Als der IE7 veröffentlicht wurde war ich über das Vorgehen sehr froh. So konnten alte Projekte im IE7 laufen, während der IE6 weiterhin ein gesondertes Stylesheet ausgeliefert bekommen hat.

Kommentar verfassen

Mit dem Absenden dieses Formulars erklären Sie sich damit einverstanden, dass ich die von Ihnen eingegeben Daten auf meinem Webserver speichere. Ihr Name, der Kommentartext und die angegeben Website werden für die anderen Besucher von praegnanz.de angezeigt. Ich gebe jedoch insbesondere Ihre E-Mail-Adresse nicht an Dritte weiter und nutze diese auch nicht zu Marketing- oder Statistik-Zwecken. Sie können alle Daten zu einem späteren Zeitpunkt wieder entfernen lassen.