Standardbrowser vs. Browserstandards

Bei allen Webseiten die ich betreue und/oder aufgebaut habe, liegt in der Besucherstatistik der Firefox ganz vorn. Bei dem größten Projekt, die Webseite des AStA Kassel (die ich grad neugestaltet habe - dazu später mehr) liegt der Firefox bei 60%, gefolgt von Microsofts Internet Explorer mit 28,4%, Safari 3,3% und Opera 2,9%. Der Rest fällt unter Sonstiges und basiert zum größten Teil auf die Netscape/Mozilla-Engine Gecko und lässt sich also als Webdesigner auch zu Mozilla/Firefox zuordnen.

Schaut man sich das Ganze genauer an, dann hat der Internet Explorer 7 (IE7) einen Anteil von 11,8% und der nun schon längst überaltete Internet Explorer 6 (IE6) immerhin 16,2%. Einen Anteil, den man nicht vernachlässigen darf bei der Gestaltung der Webseite.

Der IE6 hat, jeder der Webseiten programmiert weiß es, seine Tücken. Auf jedem gängigen Browser sieht die Webseite akzeptabel aus und der IE6 stellt plötzlich etwas dar, was man nur mit ausgereifter Fantasie als die Webseite erkennen kann die man selbst programmiert hat. Meist stimmt die Ausrichtung von DIV-Tags oder sogar des gesamten Body’s nicht oder bestimmte Style-Rules werden einfach ignoriert. Gott sei Dank gibt es kleine Workarounds mit der man im Stylesheet (CSS) das Ganze wieder richten kann.

Wenn beispielsweise folgende Formatierung im IE6 gut aussieht, dann heißt das noch nicht, dass dies dann auch noch in den anderen Browsern vernünftig dargestellt wird:


#sidebar {
background-color: #f0e9df;
color: #000;
float: right;
font-size: 12px;
font-family: 'Arial' sans-serif;
letter-spacing: 0.4px;
padding: 0px 10px 8px 10px;
margin-right: 10px;
margin-left: 0px;
text-align: left;
width: 254px;
}


Der Trick: Man schreibt die komplette Aurichtung für die anderen Browser einfach noch einmal und beschreibt diese mit einer Methode die der IE6 nicht versteht. Das Ganze sieht dann so aus:


/* correcting the specific IE 6.0 settings for all other browsers */
html > body > div#page > div#sidebar {
color: #000;
float: left;
font-size: 11px;
letter-spacing: 0.4px;
padding: 3px 10px 8px 10px;
padding-left: 10px;
padding-right: 15px;
margin-left: 0px;
margin-right: 10px;
margin-top: 2px;
text-align: left;
width: 250px;
}


Mit html > body > div#page > div#sidebar kann der IE6 nichts anfangen und Überspringt den gesamten Block, während die anderen Browser das verstehen und einfach die alten Werte die nur mit #sidebar beschrieben wurden, wieder überschreiben.

Wie man sieht unterscheiden sich die Größen-Angaben der beiden Blöcke teilweise erheblich. Mit viel Geduld, Kraftanstrengung und der Methode Trial-and-Error erreicht man dann aber irgendwann tatsächlich das Ziel, dass die Seite auf allen Browsern halbwegs gleich aussehen…

Der leichteste Weg wäre aber in der Tat, wenn sich einfach die verschieden Browser-Engines an den W3C Standard halten würden, oder die Internetgemeinschaft sich auf einen Browser festlegt. Ob nun der Standardbrowser oder der Browserstandard der richtige Weg ist, darf in den Kommentaren diskutiert werden.