Häufige CSS-Fehler

01.04.2009

Typische CSS-Fehler -
Warum der CSS-Code nicht richtig umgesetzt wird

Da meint man, alles richtig gemacht zu haben, und trotzdem werden einige CSS-Angaben nicht umgesetzt.
Nachfolgend werden einige typische Fehler aufgelistet, die garantiert schon jedem Webmaster unterlaufen sind.

1. Änderungen wird nicht angezeigt

Am CSS-Stylesheet wurden verschiedene Änderungen vorgenommen, aber nach dem Hochladen auf den Webspace werden sie dennoch nicht angezeigt.
Abhilfe:
Im Browser die "Seite aktualisieren" oder den Browser-Cache löschen.

2. Farbwerte werden nicht angezeigt

Die Schriftfarbe wurde mit einem bestimmten Farbwert, z.B. color: ff0000; definiert und dennoch wird sie schwarz statt rot angezeigt.
Abhilfe:
Beim Farbwert fehlt die erforderliche Raute. Richtig wäre also
color: #ff0000;

3. Einzelne CSS-Angaben werden nicht angezeigt

Trotz Definition werden bestimmte CSS-Angaben nicht umgesetzt, im Beispiel weder Schrift- noch Hintergrundfarbe:

#content {
color: #ff0000
background-color: #d8d8d8:
font-size: 1em;
}

Abhilfe:
Nach dem Farbwert für "color" fehlt das Semikolon. Dieses muss nach jeder CSS-Angabe gesetzt werden und darf lediglich bei der jeweils letzten Angabe eines Elements fehlen.
Bei "background-color" steht hinter dem Farbwert ein Doppelpunkt anstelle eines Semikolons. Richtig also:

#content {
color: #ff0000;
background-color: #d8d8d8;
font-size: 1em;
}

Die fehlenden Semikola wirken sich meist auch auf die Nachfolgeeigenschaften aus, so dass diese ebenso nicht umgesetzt werden.

4. Schriftgrößen, Breiten- und Höhenangaben werden nicht umgesetzt

In folgendem Beispiel werden die Schriftgrößen, Breiten- und Höhenangaben nicht dargestellt:

#content {
width: 300;
height: 150;
font-size: 1;
}

Abhilfe: Es fehlt die Angabe der "Einheit". Richtig:

#content {
width: 300px;
height: 150px;
font-size: 1em;
}

5. Größenangaben werden trotz Einheit nicht angezeigt

In diesem Beispiel wird die Schriftgröße trotz Angabe einer Einheit nicht umgesetzt:

font-size: 3 em;

Abhilfe:
Zwischen dem Wert und der Einheit darf sich kein Leerzeichen befinden. Richtig:
font-size: 3em;

6. Die komplette Selektor-Formatierung wird nicht dargestellt I

Obwohl die CSS-Angaben vollkommen korrekt sind, werden sie in diesem Beispiel nicht dargestellt:

CSS:

#inhalt {
color: #fff;
background: #4A2A82;
border: 2px solid #936CD6;
}

HTML:

Abhilfe:
Im Beispiel wurde per CSS ein ID "inhalt" definiert (erkennbar an der vorangestellten Raute).
Im HTML-Teil wurde jedoch eine CSS-Klasse aufgerufen.
Entweder hätte man also im CSS-Teil eine Klasse definieren oder im HTML-Teil den ID-Selktor aufrufen müssen.
Richtige Möglichkeiten (wobei ein angesprochener ID nur einmal je Seite vorkommen darf):

CSS: #inhalt mit HTML: <div id="inhalt"> oder
CSS: .inhalt mit HTML: <div class="inhalt">

7. Die komplette Selektor-Formatierung wird nicht dargestellt II

Auch in diesem Beispiel werden die CSS-Formatierungen nicht umgesetzt:

CSS:

#inhalt {
color: #fff;
background: #4A2A82;
border: 2px solid #936CD6;
}

HTML:

Abhilfe:
Hier wurde die Groß-/Kleinschreibung nicht beachtet. Die ID- oder Klassenbezeichnungen müssen sowohl im CSS- als auch HTML-Code vollkommen identisch sein. Richtig:
<div id="inhalt">

8. Die Linkformatierungen werden nicht korrekt angezeigt

Mit diesen Angaben werden die Linkformatierungen nicht richtig dargestellt:

a:link {color: red;}
a:hover {color: green;}
a:visited {color: magenta;}
a:active {color: yellow;}

Abhilfe:
Der CSS-Standard erfordert die Einhaltung einer bestimmten Reihenfolge bei der Linkformatierung. Diese kann man sich mit folgender "Eselsbrücke" merken: Love hates.
Die rot-markierten Buchstaben bedeuten die Reihenfolge "link, visited, hover, active". Mit folgender, umgestellten Reihenfolge klappt es:

a:link {color: red;}
a:visited {color: magenta;}
a:hover {color: green;}
a:active {color: yellow;}

9. Die Schrift wird unterschiedlich dargestellt

Wie kommt es, dass die Schrift einer Website in verschiedenen Browsern unterschiedlich dargestellt wird? Abweichungen können sowohl hinsichtlich der Schriftart als auch der Schriftgröße auftreten.

Dieses Problem tritt in der Regel dann auf, wenn für die Seite weder Schriftfamilie, noch Schriftgröße definiert sind. In diesem Fall wird auf die browserseitigen Einstellungen zurückgegriffen und die können unterschiedlich sein.

Abhilfe:
Schriftfamilie und Schriftgröße werden generell im body hinterlegt und vererben sich dadurch auf die nachfolgenden Elemente.
Z.B. mit

body {
font-family: Verdana, Arial, 'sans-serif';
font-size: 100.01 %;
}

Wird für einen Bereich oder ein Element eine spezielle Schriftart- oder größe benötigt, so wird dies dann speziell für das entsprechende Element zusätzlich hinterlegt.
Die Überschriften h1 - h6 sollten generell hinsichtlich ihrer Schriftgröße definiert werden, da es auch hier unterschiedliche browserspezifische Standardeinstellungen gibt.

10. CSS-Klassen oder ID's greifen nicht

Obwohl CSS-Klassen oder ID's definiert sind, greifen sie nicht und bleiben wirkungslos.
Entsprechend diesem Beispiel wird die Schrift nicht in roter Farbe angezeigt:

CSS:

.8rot {color: red;}

HTML:

<p class="8rot">Absatz in roter Schriftfarbe</p>

Abhilfe
Die Ursache liegt daran, dass die Bezeichnung der Klasse mit einer Zahl beginnt, hier mit der 8: