Mögliche Fehlerquellen


Schön, wenn alles klappt. Tut es selbstverständlich nicht immer und schon gar nicht, wenn man die ersten Schritte mit dieser Technik unternimmt.

1. Doppelte Einträge
Bei vielen Einträgen im Head kann man schnell den Überblick verlieren. Insbesondere, wenn Sie Einträge für dasselbe Element mehrfach überschreiben.


Mithilfe der vorab beschriebenen Browser-Funktion „Objekt untersuchen“ erkennen Sie schnell mehrfach überschriebene Einträge und können diese ausfindig machen. Die meisten Browser orientieren sich an dem in der Codereihenfolge zuletzt definierten Wert (insbesondere wenn er ein !important trägt).

2. Abweichende Syntax
Wird innerhalb einer identifizierten Syntax zum Beispiel der Wert

<style type="text/css">
/*<![CDATA[*/
#layer
{background: #696969 url(background.gif);}
/*]]>*/
</style>

verwendet mit dem sowohl Hintergrundfarbe als auch Bild zugewiesen werden, kann dies nicht mit einem Wert wie

<style type="text/css">
/*<![CDATA[*/
#layer
{background-color: #E5E547!important;}
/*]]>*/
</style>

überschrieben werden. Die verwendete Syntax muss eingehalten werden. Falls notwendig wird der Wert „background“ ausgeblendet und der (bislang nicht verwendete) Wert „background-color“ hinzugefügt:

<style type="text/css">
/*<![CDATA[*/
#layer
{background:none!important; background-color: #E5E547;}
/*]]>*/
</style>

3. Verbleibende Teileinträge
Achten Sie auf Codereste von entfernten Einträgen im Head, die schnell dazu führen, dass die ganze Seite zerschossen dargestellt wird. Immer an die Sicherungskopie vor Änderungen denken!

4. Unübersichtlichkeit
Je übersichtlicher Sie Ihre Einträge gestalten und gruppieren, desto schneller sind Arbeit und Fehlersuche beendet. Auch der spätere Einstieg in Ihre Codes wird so wesentlich erleichtert.

5. Korrekte Verwendung des !important-Befehls
Verwenden Sie den !important-Befehl nur dort wo er definitiv gebraucht wird, und platzieren Sie ihn richtig, nämlich zu jedem Attribut, welches überschrieben wird und als Ausgangsfloskel vor dem Semikolon der Codezeile:

Falsch:

#layer {background: #696969 url(neuer-background.gif !important);}

Richtig

#layer {background: #696969 url(neuer-background.gif) !important;}