EDV-Giessen

Eigene Css Datei für den Internet Explorer

Posted by admin

Im Html Tabellen Zeitalter sah die Welt noch ganz anders aus. Bis auf einige Ausnahmen, wurde jede Webseite in jedem Browser gleich dargestellt. Das hat sich mit der schnellen Entwicklung der Browser und Css verändert…

Jeder, der Html Seiten entwirft, kennt das Problem. Die Seite ist im Firefox mittig zentriert und im Internet Explorer klebt sie links am Rand fest. Verändert man das Stylesheet zugunsten des Internet Explorers, ist die Seite zwar jetzt mittig, aber im Firefox viel zu weit rechts. Das ist nur eine, von zahlreichen Browserfallen, denen man als Webdesigner täglich begegnet. Ich beschreibe Euch hier nur die Logik und eine Herangehensweise an das Browser Darstellungsproblem. Weiterführende Infos findet Ihr ganz unten auf der Seite.

Firefox vs Internet Explorer
Der Firefox ist mittlerweile von den Benutzerzahlen her mit dem Internet Explorer fast auf gleicher Höhe. Die anderen Browser wie Safari, oder Opera, spielen eine nicht so gewichtige Rolle im Browserkrieg. Deshalb beschreibe ich hier nur kurz und knapp, wie man den Ungleichheiten der zwei großen Browser entgegenwirken kann.

Conditional Comments
Es mag mehrere Wege geben, aber das ist für mich immer der einfachste. Die Taktik ist ganz einfach. Wir geben dem Internet Explorer eine andere externe Css Datei zu fressen, als dem Firefox.

Im Head der jeweiligen Seite bekommt der Browser des Users gesagt, welche Css Datei er benutzen soll.
Bsp:
<link href=”style.css” rel=”stylesheet” type=”text/css”>
In diesem Beispiel wird jedem Browser die ganz normale style.css zugewiesen. Das soll auch so bleiben.

Eine eigene Css Datei für den Internet Explorer
Der Trick ist es jetzt, dem Internet Explorer eine andere Css Datei zuzuweisen, welche leicht veränderte, dem IE zugeschnittene Befehle enthält. Dies geschieht mit Conditional Comments. Wir schreiben im Head der Html Datei einfach etwas rein, womit andere Browser als der Internet Explorer nichts anfangen können, bzw. es nicht lesen können.
Und das sieht so aus:

<!–[if IE]>
<style type=”text/css”>@import url(ie.css);</style>
<![endif]–>

In diesem Beispiel, bekommt jede Version des Internet Explorers die ie.css als als Css Datei zugewiesen. Der Firefox und andere Browser bedienen sich nach wie vor der darüberstehenden style.css.

Auf diese Weise, kann man dem Firefox und dem Internet Explorer eigene Css Formatierungen zuweisen.

Da sich aber der IE 7 vom IE 6 in der Interpretation der Css Befehle sehr unterscheidet, kann man auch den unterschiedlichen Internet Explorern verschiedene Css Dateien zuweisen.
Das geschieht dann z.B. so:

<!–[if IE 6]>
<style type=”text/css”>@import url(ie6.css);</style>
<![endif]–>

Der erste Unterschied liegt in der ersten Zeile [if IE 6]. Also falls der Besucher der Seite mit dem Internet Explorer Version 6 unterwegs ist, bekommt dessen Browser die ie6.css zum interpretieren (Zeile 2 (ie6.css)).

Weiterführende Informationen zu dem Thema, findet Ihr hier

Leave a Reply

Name (required)

Mail (will not be published) (required)

Website

Spam protection: Sum of 10 + 4 ?