Debugging des Internet Explorer Stylesheets

Geschätzte Lesezeit: 2 Minuten

Mein IE.css Stylesheet wurde von Christian, Webentwickler und SEO-Experte, unter die Lupe genommen. Per Mail bekomme ich eine Anleitung von ihm, wie ich Layoutfehler, die in der IE-Ansicht auftreten, beheben kann. (y)

Die aktuelle Browserstatistik zeigt: Der Internet Explorer liegt in der Zählung der meistgenutzten Browser immer noch auf Platz zwei, nunmehr zwar zurückgefallen hinter Chrome, aber immer noch mit einem Useranteil von rund 30%. In etwa die Hälfte davon sind IE 8 Surfer – der IE 9 läuft nicht auf älteren Windows-Betriebssystemen. Meine eigenen bisherigen Statistiken sind etwas anders bestückt, meine Besucher benutzen an erster Stelle Firefox, an zweiter Safari, dann kommt Chrome, der Explorer liegt weit abgeschlagen an letzter Stelle. Dennoch: Ich möchte nicht, dass Besucher, die den IE nutzen, Nachteile in Kauf nehmen oder Fehler auf der Seite sehen müssen. Insofern halte ich nach wie vor für sinnvoll, ein eigenes IE-Stylesheet anzulegen und zu pflegen. Dank der Hilfe von Christian dauert diese Stylesheet-Adaption im Fall von Granaton auch nur eine halbe Stunde. Hätte ich selbst versucht, die Ursache aller Ticks zu finden, hätte ich vermutlich einen ganzen Tag dafür gebraucht. Wenn nicht länger. Erfahrene Webentwickler einzubeziehen macht Sinn!

Erster Fehler: Der Suchbalken ist viel zu kurz.
Lösung: Ich definiere für den Suchbalken #searchform  im Stylesheet als eigene Breite (width: 210px).

Zweiter Fehler: Die Suchlupe sitzt unterhalb des Balkens.
Lösung: Der Input-Wert #searchform input#s des Suchbalkens muss angepasst werden. Ich stelle ihn auf eine Breite von 152px.

Dritter Fehler: Das Hintergrundbild wird auf den Artikelseiten nicht korrekt wiederholt.
Lösung: Ich gebe der ID #content-wrapper den Wert overflow: hidden;

Vierter Fehler: Der iFrame für Piwik optOut in meiner Kontaktseite hat einen unschönen Rahmen, den ich ausblenden möchte.
Lösung: Im Plugin no-piwik-for-me füge ich den Styles des iFrames frameborder="0" hinzu.

Da der IE 8 abwärts CSS3 Eigenschaften nicht interpretieren kann, ist das Seitenlayout auf diesen Browsern nicht ganz so hübsch, wie in allen anderen Browsern – Rundungen und Schatten fehlen. Ich könnte dieses Problem mit Plugins lösen, die CSS 3 für IE 8 übersetzen können. Doch diese Plugins haben den Nachteil, dass sie die Ladezeit spürbar erhöhen. Form follows Function, Geschwindigkeit geht vor. Deshalb verzichte ich darauf.

Dank Christian ist mein Explorer-Stylesheet nun fertig und ich kann mich wieder inhaltlichen Aufgaben widmen. 100000000 Dank, lieber Christian, deine Tipps waren zu 100% zutreffend und haben mir viel Zeit und Mühe erspart. Herzliche Grüße in den schönen Süden, auf weitere gute Zusammenarbeit!

Teilen Sie Ihre Meinung mit