Browserübergreifendes CSS

Wer kennt das nicht: Man sitzt stundenlang an einem Webdesign, erstellt sauberes, semantisch korrektes HTML und CSS, schaut sich das Ergebnis im Firefox und ist zufrieden. Man öffnet den Internet Explorer 7 und mit etwas Glück zeigt auch dieser die Webseite so an, wie man sich das vorstellt. Nun öffnet man den Internet Explorer 6 hält sich die Augen zu nachdem man die URl eingegeben hat und klickt auf „Enter“. Man wagt es nicht, die Augen aufzumachen und sieht direkt, wieso man sie am besten zugelassen hätte: Der Internet Explorer 6 zerhaut das ganze Webdesign. „Aber wieso?“ mag sich der werte Webseiten Ersteller nun fragen. Die Antwort ist ganz einfach: Der Internet Explorer 6 schert sich wenig um Standards und interpretiert HTML und CSS nach seinem eigenen Gutdünken. Nun bestehen zwei Möglichkeiten, die Webseite auch auf dem alten Internet Explorer gut aussehen zu lassen, da ja immer noch viele Menschen mit diesem alten Ding durchs Internet surfen:

  1. Man benutzt die „Conditional Comments“ und gibt dem Internet Explorer 6 sein eigenes, nur für ihn erstelltes Stylesheet. Das ist eine gängige Methode, ohne Frage. Allerdings muss dafür eine eigene CSS Datei ins Web geladen werden.
  2. Man weiss, wieso es das Webdesign im Internet Explorer zerhaut. Diese Gründe werde ich jetzt im Einzelnen besprechen bevor ich mich dranbegebe, meine eigene Seite im IE6 zu betrachten (Gott sei mir gnädig!).

Problem:

Der Container des Inhaltes und der Container der Navigation passen nicht mehr nebeneinander

Der Internet Explorer 6 hat die dumme Angewohnheit, bei floatenden Boxen den angegebenen Margin Wert zu verdoppeln:

#content {
float: left;
margin-right: 10px;
}

Aus dem oben geschilderten Beispiel macht der IE6 einen Margin-right Wert von 20px, was zwangsläufig dazu führt, dass sich die Navigation statt an der Seite unter dem Content platziert.

Die Hilfe:

Einfach die CSS-Anweisungen für den Content-Container mit einem „display: inline;“ ersetzen. Dadurch ergeben sich keinerlei Nachteile in anderen Browsern und der Internet Explorer 6 wird den Margin Wert so übernehmen, wie der Webdesigner es sich vorgestellt hat.

Wieso?

Sobald ein Element des Webdesigns über den Wert „float“ verfügt, wird diesem vom Internet Explorer 6 automatisch der „Display“-Wert „Block“ gegeben. Dadurch doppeln sich die Margin Werte und das Design wird zerhauen. Wird der Display Wert allerdings auf „inline“ gestellt, entfällt diese Zuweisung. Tja, der Internet Explorer…

Ähnliche Artikel:

Tags: , , ,

1 Kommentar for “Browserübergreifendes CSS”

  1. 7. April 2010, 10:55
    ralf sagt:

    Ein absolut hilfreicher Artikel. Hat mir wirklich sehr geholfen.

Kommentar hinterlassen




CommentLuv badge