Sie sind hier: Startseite -> CSS-Grundlagen -> CSS-Einstieg -> CSS-Hack

CSS-Grundlagen: CSS-Hack

CSS-Hack: Browserfehler austricksen

Die größten Probleme beim Erstellen einer Webseite hat man damit, dass die verschiedenen Browser wie Internet Explorer, Firefox, Safari & Co. gleiche Codezeilen unterschiedlich interpretieren. Hauptproblem beim Webdesign ist dabei die Interpretation der CSS-Angaben.

Dem Laien mag das unverständlich sein, doch eine 200 Pixel breite Spalte muss noch lange keine 200 Pixel breit sein, wenn der Browser keine Lust dazu hat. Manchmal hat man das Glück, dass sich die einzelnen Programme einig sind, doch meistens trifft man auf Situationen, in denen dies schlichtweg nicht der Fall ist.

Dann hilft nur noch ein CSS-Hack. Es handelt sich beim CSS-Hack um einen Trick, mit dem Browser auf eine falsche Fährte gelockt werden soll, vor allem der Internet Explorer. Es ist schon mühsam, dass der IE gleiche CSS-Angaben anders interpretiert als Firefox, Opera, Safari und andere Konkurrenten, doch noch schlimmer und mühsamer wird es dadurch, dass die einzelnen Versionen unterschiedlich agieren.

Will man beispielsweise, um obiges nochmals zu verwenden, eine Spalte auf 200 Pixel fix beschränken, dann formatiert man das DIV im CSS so:

.spalte { width:200px; }

Das ist ja nicht so schwer. Trotzdem kann es sein, dass der Internet Explorer die Spalte breiter oder schmäler darstellt. Mit

.spalte { width:200px; *width:205px; }

teilt man via CSS dem DIV mit, dass es 200 Pixel breit sein soll, aber der Internet Explorer (nur er fühlt sich durch den Stern angesprochen) geht auf 205 Pixel, um die gleiche Darstellung zu erreichen. Klingt unsinnig, ist es aber nicht. Der Stern beim CSS-Befehl ist ein CSS-Hack, ein Trick, um für den Internet Explorer eine eigene Angabe eintragen zu können, ohne die anderen Browser negativ zu beeinflussen.

Nun kann es aber vorkommen, dass der IE7 nun richtig darsteller, der IE6 aber weiterhin die Spalte zu breit oder zu schmal anzeigt. Dann kann man mit zwei Hacks arbeiten:

.spalte { width:200px; *width:205px; _width:185px; }

Die erste Angabe gilt wieder für alle Browser, die zweite (Stern) für alle Internet Explorer, die dritte (_) nur für den Internet Explorer 6. Der IE7 bekommt seine Angabe in der zweiten Option, interessiert sich für den Unterline (Unterstrich) aber gar nicht und so wurde es möglich, für den IE6 losgelöst vom IE7 einen CSS-Hack anzubieten.

Eigentlich traurig, weil alle Programme die gleichen Angaben gleich verarbeiten sollten, aber einen Standard gibt es nicht. Im Webdesign hat man oft das Problem, dass der Auftraggeber nicht verstehen kann, warum man Tage für das Layoutprogrammieren braucht - die unterschiedlichen Interpretationen sind der Grund dafür und manche Fehler kann man mit dem CSS-Hack überwinden - leider nicht alle.

Ebenfalls interessant:

CSS-Vorteile

Informationen über den Einsatz von CSS und der Unterschied zur Formatierung mit den veralteten HTML-Befehlen.

[aktuelle Seite]

CSS-Hack

Informationen über den Einsatz von CSS-Hacks, um Fehler der Browser zu vermeiden.

CSS einbauen

Informationen über die möglichen Wege, um den CSS-Code in die Webseite einzubauen.

CSS-Schreibweise

Informationen über die richtige Schreibweise bei CSS-Befehlen zur Formatierung einer Webseite.

Soziale Medien

Wenn der Artikel gefallen und/oder geholfen hat, bitte teilen:

Zurück zum Hauptthema

Übersicht CSS-Einstieg

Startseite CSS-Grundlagen