Dr.Web - Das Online Magazin für Seitenbetreiber

Ein Pixel nach unten im Internet Explorer

Der Internet Explorer ist nicht zuletzt durch seine löchrige Unterstützung des Box-Modells berühmt geworden. Was die Standards angeht, ist „6er IE“ der schlimmere Verbrecher. Die vom Erscheinungsdatum jüngere Version 7 interpretiert den Code deutlich erwachsener und zuverlässiger. Zwei einfache und prompt eingesetzte CSS-Hacks gestalten die Pixelschieberei in diesen Browsern angenehmer und vor allen Dingen zeitsparender.

Wunsch und Realität
Bei der überwiegenden Anzahl der Projekte erwarten die Auftraggeber auch eine pixelgenaue Umsetzung der vorgegebenen Layouts in XHTML und CSS. Nach der Realisierung werden die handgestrickten Seiten über die Vorlagen der Grafikagentur gelegt und sorgfältig (um nicht „pingelig“ zu sagen) auf falsch positionierte Elemente geprüft. Nicht selten ist eine 1 Pixel-Abweichung von immenser Bedeutung und gleicht sofort einer Kundenreklamation.

Aus Erfahrung gut
Damit es zu Reklamationen solcher Art gar nicht kommt und der zahlende Mandant auch weiterhin in der Kundenkartei verbleiben darf, werden die erstellten Projektseiten noch vor geplanter Auslieferung vom Entwickler ausgiebig getestet. Unterschiedliche Betriebssysteme gekreuzt mit der Vielfalt der Browser-Hersteller machen diesen Part der Auftragsarbeit nicht wirklich beliebt, daher auch sehr oft vernachlässigt und übersprungen.

Halb so schlimm sieht es in der Praxis aus. Webseiten mit validem XHTML-Code werden in der Regel auf Browsern wie Firefox, Camino, Konqueror, Safari und Opera gleich gültig und ohne optische Differenzen dargestellt – also sind keine Anpassungen zumindest bei diesen www-Betrachtern notwendig, Developer atmen auf.

Ausreichend, nicht perfekt
Da wären noch Produkte aus dem Hause Microsoft. Mit wirklich viel Glück und nicht ganz so komplexen Designs macht auch der aktuellste Internet Explorer der Serie 7 in beeindruckender Weise mit: richtige Abstände innerhalb der Box, verbindliche Anzeige bei relativer Positionierung. Dinge, welche die Konkurrenz bereits seit Jahren beherrscht, kann der neue Titan aus Redmond ebenfalls gut.

Sonderbehandlung im CSS
IE 6 benimmt sich dagegen wie ein Schulknabe, verrechnet sich gerne „mal da, mal hier“ und zwingt den Umsetzer dazu, entweder den vielschichtigen Quelltext umzubauen oder - bei mangelnder Zeit - zu tricksen.

Griff in die Trickkiste
Mit Tricksen ist der Einsatz von so genannten CSS-Hacks gemeint, die einen bestimmten Browser – in der Regel aus der IE-Familie - dazu bewegen, gewisse Stylesheet-Eigenschaften zu übernehmen und anzuwenden. Zwei von der Sorte (1 x generell für alle IEs und 1 x speziell für den 6er) sind extrem simpel beim Einbinden in eine bestehende CSS-Klasse und funktionieren nach dem folgenden Muster:

 div.example {
  top: 100px; /* Gilt für alle Browser */
  //top: 101px; /* Korrektur für alle IE */
  _top: 102px; /* Korrektur für IE 6 */
  position: absolute;
}

Zu Nebenwirkungen…
Leider besitzt diese Lösung einen säuerlichen Beigeschmack. Internet Explorer lässt sich zwar mit oben beschriebenen CSS-Tricks ködern und manipulieren, W3C Validation Service kann solche überhaupt nicht leiden. Im Klartext: Der Code-Abschnitt mit eingepflanztem CSS-Hack wird als fehlerhaft und als nicht standardkonform eingestuft. Besteht der Kunde jedoch auf eine saubere CSS-Implementierung, so sind andere Wege, wie zum Beispiel Conditional Comments oder umständlichere Hacks, zu gehen. (tm)

Erstveröffentlichung am 05.10.2007