Diagnose von CSS-Fehlern und Browserproblemen

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

Sie wollen herausfinden, ob ein Darstellungsproblem an Ihrem Code oder an der Darstellung durch den Browser liegt.

Lösung

Gehen Sie die folgenden Schritte der Reihe nach durch, um mögliche Probleme mit Ihrem CSS-Code zu ermitteln:

  1. Validieren Sie Ihren HTML-Code. Überprüfen Sie Ihr Markup mit dem HTML-Validator des W3C.
  2. Validieren und überprüfen Sie Ihren CSS-Code mit dem CSS-Online-Validator des W3C.
  3. Vereinfachen Sie die Werte der verwendeten Eigenschaften. Fügen Sie hierfür am Ende des (oder der) Stylesheets eine neue CSS-Regel ein. Mit Hilfe des universellen Selektors können Sie die Eigenschaften für alle Elemente auf einmal definieren:
* {
 margin: 0;
 padding: 0;
}
  1. Umgeben Sie sämtliche Block-Elemente mit einem Rahmen:
* {
 margin: 0;
 padding: 0;
 border: 1px solid red;
}
  1. Probieren Sie verschiedene Werte für die Eigenschaften aus.
  2. Kommentieren Sie die CSS-Regeln aus, in denen Sie das Problem vermuten. Entfernen Sie nun die Kommentare einen nach dem anderen wieder, bis das Problem wieder auftaucht. Informationen zur Verwendung von CSS-Kommentaren finden Sie im Rezept Kommentare im CSS-Code.
  3. Suchen Sie mit Google und bei positioniseverything.net, einer sehr gut dokumentierten Sammlung von CSS-Fehlern, nach ähnlichen Problemen.

Diskussion

Meiner Erfahrung nach hängen etwa 90% aller Fehler bei CSS-basierten Designs entweder mit Tippfehlern in der CSS-Syntax oder mit falsch formatiertem Markup-Code zusammen.

Wenn Sie die in diesem Rezept vorgeschlagenen Schritte durchlaufen, haben Sie gute Chancen, die Fehlerquelle zu finden.

Siehe auch

Lesen Sie CSS – Das umfassende Handbuch von Eric A. Meyer (O’Reilly), um mehr über die CSS-Spezifikation zu erfahren.

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln