| Tipps zur Fehlersuche bei CSS-Problemen |
| Kontrollieren Sie die CSS-Anweisungen auf Schreibfehler. Viele Probleme lassen sich auf Tippfehler, fehlende Zeichen (z.B. Klammern) oder Ähnliches zurückführen. Ein CSS-Validator (http://jigsaw.w3.org/css-validator/) zeigt schnell, ob irgendwo etwas nicht stimmt. |
| Kontrollieren Sie den HTML-Code auf Fehler oder zu lockere Schreibweise. Durch die Verwendung des HTML-Validators (http://validator.w3.org/) geht das schnell. |
| Beginnen Sie mit den standardkonformen Browsern und testen Sie danach weitere. Wenn eine Anzeige in Firefox und Opera gleich aussieht, können Sie sicher sein, dass es sich nicht um einen Bug handelt, sondern den Spezifikationen entspricht. |
| Fehler im Internet Explorer sind oft auf die fehlerhafte Box-Model-Interpretation zurückzuführen. Das kann auch im Internet Explorer 6 passieren, wenn der XHTML-Deklaration ein XML-Prolog vorangestellt ist. |
| Prüfen Sie, ob die verwendete Eigenschaft existiert. Gerade am Anfang ist es leicht möglich, HTML- und CSS-Eigenschaften zu verwechseln. Beliebt ist die Verwechselung von „clear: both“ (CSS) und „clear=all“ (HTML) sowie von „vertical-align“ und „valign“. |
| Versichern Sie sich, dass das angestrebte Verhalten für den betreffenden Browser existiert. Verwenden Sie eventuell eine proprietäre Eigenschaft (z.B. Farben für die Scrollbars). |
| Begeben Sie sich zurück auf sicheren Boden. Kommentieren Sie alle neu gemachten Anweisungen aus, bis Sie wieder eine nachvollziehbare Anzeige haben. Setzen Sie anschließend die neuen Anweisungen wieder ein – eine Anweisung pro Schritt, bis Sie die fehlerhafte Eigenschaft gefunden haben. |
| Vereinfachen Sie das CSS. Kommentieren Sie alle unnötigen Anweisungen zunächst aus, um die Komplexität des Stylesheets zu verringern. |
| Setzen Sie farbige Rahmen um Kästen, damit Sie genau sehen, wie deren Abmessungen sind. |
| Setzen Sie explizit Werte. Browser verwenden teilweise unterschiedliche Vorgaben für nicht definierte Werte. Setzen Sie im Zweifel alle kritischen Eigenschaften selbst (z.B. „margin: 0“ oder „padding: 0“). |
| Verwenden Sie „!important“. Wenn eine Eigenschaft korrekt angewandt ist und dennoch keinen Effekt hat, wird sie vielleicht von einer höherwertigen überschrieben. Das kann gerade in langen und komplexen Stylesheets passieren. Mit „!important“ geben Sie der Anweisung Priorität. |
| Wenn
Sie mit „float“ arbeiten und sich Layoutfehler ergeben, liegt dies oft
an fehlenden oder falsch gesetzten „clear“-Anweisungen.
Achten Sie auf Rundungsfehler. Wenn prozentual ausgezeichnete Bereiche umspringen (vor allem beim Skalieren des Browserfensters), kann es daran liegen, dass 50% plus 50% fälschlicherweise mehr als 100% ergibt. Verkleinern Sie die Bereiche auf 49,5% oder weniger. |
Kai Laborenz ist CSS-Anwender der ersten Stunde und bekennender TYPO3-Anhänger. Er hat die Fachbücher „CSS-Praxis“ – ein Bestseller, der inzwischen in dritter Auflage erschienen ist – und „TYPO3 – Das Handbuch für Entwickler“ geschrieben. Mit seiner Agentur sunbeam (www.sunbeam-berlin.de) realisiert er Websites mit CSS und TYPO3. Privat kann man von ihm in seinem Blog unter www.laborenz.de/lab-o-log lesen.
