Firefox2 & Firefox3, „em“ size does matter!

Beim letzen Posting dachte ich noch dass dem Problem des unterschiedlichen Rechnens von relativen Größenangaben nur mit CSS Hacks beizukommen ist. Da habe ich gestern eine neue Erfahrung gemacht: Nachkommastellen!

Bei pixelgenauen Umsetzungen von Webseiten steht man vor dem Problem das der FF2 und IE6 bei festen Pixelangaben sich weigern den Seiteninhalt richtig zu vergrößern. Es wird einfach nur der Text vergrößert, Design und Layout wachsen nicht mit. Daher gibt man alle Größen relativ zur eingestellten Schriftgröße vom Browser an und schwupps, zoomen ff2 und ie6 wieder alles mit.

Nun hatte ich per CSS dem body eine Schriftgröße von 0.66em gegeben und darauf alle weiteren Größenangaben basiert. Im ieX und FF3 sah auch alles gleich aus, der FF2 und die Webkits verrechneten sich aber leider. So war die 780 Pixel breite Inhaltsbox im FF2 und den Webkits immer etwas zu schmal! Also hatte ich erst mit CSS Hacks für diese Browser die Größe angepasst, aber beim probieren dann auch einfach mal 0.661em als Schriftgröße genommen und auf einmal rechnen alle Browser wieder richtig.

Wer hätte das gedacht?

Letzte Station: CSS Hacks

Webdesigner lieben Standards, denn Standards machen das Leben einfacher. Man schreibt XHTML, validiert es und ist glücklich. Man installiert sich die Wave Toolbar, testet seine Seiten und ist wieder glücklich. Man schreibt CSS, validiert es und ist glücklich!

Bei all dem Glück hat man bis zu dieser Stelle wahrscheinlich vergessen die Kombination von XHTML und CSS in verschiedenen Browsern anzuschauen.

Bei der „CrossBrowserKompatibilität“ gibt es nämlich verschiedene Schwierigkeitsgrade:

– leicht: man erstelle eine Seite die ungefähr gleich im FF3, IE7 und Webkit Browsern aussieht.

– mittel: man erstelle eine Seite nach einer Vorlage und diese soll im FF3, IE7 und Webkit Browsern nahezu gleich aussehen.

– schwer: man erstelle eine Seite nach einer Vorlage und diese soll im FF2, FF3, IE6, IE7 und Webkit Browsern nahezu gleich aussehen.

Die Schwierigkeitsgrade „leicht“ und „mittel“ lassen sich mit validem CSS und vielleicht noch „Conditional Comments“ erledigen, aber bei „schwer“ muss man dann doch mal zu „Tricks“ greifen.

Bei beliebig komplexen Designs überschreitet man die Grenze des erfahrbaren und taucht ein, in eine Welt der Bugs und Features von Browsern. Der IE6 hat ja seine eigene Liga erfunden und es macht beinahe wieder Spaß sich um seine Fehler zu kümmern. Auf einmal wiederholt er Buchstaben ohne sichtbaren Grund, kann Listen nicht vernünftig darstellen und baut auch sonst viel Darstellungsfehler. Manche sind mit geschicktem Umstellen des HTML zu beheben, andere müssen mit der Brechstange gelöst werden.

Für die IE Problematik kalkuliert man ja schon extra Zeit ein und schickt die Rechnung dann an Microsoft.

Aber auch andere Browser haben ihre Eigenarten und auf einmal schlägt man sich mit auf- und abrund Fehlern umher. Browser A rundet so bei em Angaben, Browser B auf und der nächste wieder anders. Und am Ende hat man eine Seite die auf IEs und FFs gut aussieht und dann im Safari nicht richtig dargestellt wird…

Und in diesem Fall sind CSS Hacks eine gute Sache, mit einer kleinen Zeile im CSS kann man den Firefox 2 auf die richtige Größe schicken, dem IE7 noch den letzten Schliff geben und auch dem Safari noch was gutes tun.

Alles was man braucht? Steht hier: http://blog.ginader.de/archives/2009/02/01/CSS-Voodoo-Die-dunke-Kunst-der-CSS-Hacks.php

Ich will hier noch ein Stück NOFX zitieren (leicht abgeändert): „Hacks are good, they let you do things that you know you not should.“