Webdevelopment Blog

Als Webentwickler hat man es echt schwer. Man macht eine super Seite im Firefox (empfehle ich jedem der Internetseiten macht) schaut sich die Seite dann im IE an und spätestens beim IE6 knallts. So war das aber nicht gemeint! Microsoft hat es leider nicht so mit dem unterstützen von Standards. Der IE7 bringt da einiges an Besserung ins Spiel, das gelbe vom Ei ist aber auch der nicht.

Firefox 3 hier kostenlos runterladen

Also muss man sich anders behelfen. Und hier kommen die CSS Hacks ins Spiel!

(HTML+CSS wurden kursiv dargestellt)

Angenommen ihr habt ein DIV:
<div class=”meineKlasse”>Hallo das ist mein DIV</div>

dann würdet ihr in der CSS Datei hingehen und folgende Klasse definieren:

.meineKlasse{
height:200px;
width:150px;
background-color:#CCC;
padding:2px 1px;
}

Angenommen der IE würde die höhe nicht korrekt darstellen, keine Sorge, ihr braucht euren PC nicht aus dem Fenster schmeißen!

Hier kommen jetzt die Hacks um Klassen im IE6 und IE7 anders darzustellen, es müssen auch nur die Eigenschaften geändert werden die es nötig haben, der Rest wird vererbt.

IE6 HACK:
* html .meineKlasse{
height:202px;
}

IE7 HACK:
*+html .meineKlasse{
height:203px;
}

Das * html wird nur vom IE6 interpretiert, andere Browser ignorieren dies. Genau wie das *+html für den IE7.

Und schon habt ihr für drei Browser individuelle Klassen erstellt! Das ganze ist natürlich valide. Man könnte hier noch weiter ausholen…
Aber für die roots des CSS hacken sollte das reichen

Sollte demnächst mal etwas browserübergreifend nicht so aussehen wie ihr es gerne hättet, hackt das CSS!