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!
Torsten am 1. August 2007 #
noch besser, wenn auch nicht css-standard-konform, ist:
das hat weniger nebenwirkungen.
Daniel Böhmer am 1. August 2007 #
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 am 1. August 2007 #
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 am 1. August 2007 #
@ 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 am 1. August 2007 #
By the way: Alles Gute zum Burtseltag! Viel Glück und Erfolg im nächsten aufregenden Jahr!
Sascha am 2. August 2007 #
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 am 2. August 2007 #
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 am 2. August 2007 #
Ä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 Browserdas Browserimitat dann die Höhe nicht relativ zu einem Elternelement zu bestimmen.Gruß,
Mirko
Dentaku am 2. August 2007 #
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 am 2. August 2007 #
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 am 2. August 2007 #
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 am 2. August 2007 #
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 am 4. August 2007 #
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 am 6. August 2007 #
@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.