Mehrere CSS-Klassen im Selektor und IE6
Auf vielen Webauftritten sieht man des öfteren CSS-Navigationen die mehrfarbig sind, also jede Sparte ihre eigene Farbe hat.
Solch eine Formatierung ist auch gut mit CSS zu erreichen, jedoch wartet der Internet Explorer 6 mit einer Falle auf, wenn mehrere CSS-Klassen in einem Element benutzt und per Selektor selektiert werden.
Nützlich ist die mehrfache CSS-Klassen Zuweisung, wenn ein Element jeweils speziell formatiert werden möchte, die Standardformatierung jedoch als Grundlage verwendet werden möchte.
Bei folgendem CSS-Selektor wirkt der Punkt und die zweite CSS-Klasse als AND-Verknüpfung:
.nav1.active { /* Formatierung */ }
In Deutsch: Wenn ein Element die Klasse "nav1" und "active" besitzt, greift die Regel.
Mit dieser Art der Selektion hat allerdings der Internet Explorer 6 Probleme, er interpretiert diesen Selektor einfach als den folgenden:
.active { /* Formatierung */ }
Das erwünscht zu einem sehr unschönen Nebeneffekt, für die letzten Regel im CSS die zwei Klassen verknüpft greift im IE6 jeweils jedes Element das die Klasse "active" besitzt.
Die Fehlersuche bei einem solchen Fall erweist sich als sehr mühsam.
Um dieses Fehlverhalten des IE6 zu umgehen, bietet es sich an für die verschiedenen Navigationspunkte jeweils einen ID-Selektor zu benutzen - die Elemente sind ja auch eindeutig - das sieht dann bspw. so aus:
#nav1.active { /* Formatierung */ }
Damit hat der IE6 keine Probleme mehr, da der ID-Selektor ein Element darstellt und nicht eine Klasse irgend eines Elementes.
Mehr Infos zu dem Fehler, einem möglichen zweiten Workaround bei einer spezifischen Lösung finden sich hier:
Bild vom Resultat:
Folgendes Beispiel in eine Html-Datei kopiert zeigt das Fehlverhalten (Getestet kann bspw. mit dem IETester):
Update: Codetags rausgenommen, leider zerreisst es die Html-Tags.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mehrere CSS-Klassen im Selektor und IE6 - Test</title>
<style type="text/css">
/* Allgemein */
h1 { font-size: 0.9em; }
li { display: inline; }
a {
display: block;
float: left;
color: Black;
text-decoration: none;
border: 1px solid gray;
padding: 2px;
}
a:hover { text-decoration: underline; }
br { clear: left; margin: 10px 0px; }
.active { font-weight: bold; }
/* Mehrfarbig (Mit Klassen) */
.multiColor a {
border-bottom: 4px solid black;
}
.nav1 { background-color: #4c6691; }
.nav1:hover { background-color: #8FA1BF; }
.nav1.active { border-bottom: 4px solid #4c6691; }
.nav2 { background-color: #C99F2E; }
.nav2:hover { background-color: #DBB859; }
.nav2.active { border-bottom: 4px solid #C99F2E; }
.nav3 { background-color: #689341; }
.nav3:hover { background-color: #99C373; }
.nav3.active { border-bottom: 4px solid red; }
/* Mehrfarbig (Mit IDs) */
#n1 { background-color: #4c6691; }
#n1:hover { background-color: #8FA1BF; }
#n1.active { border-bottom: 4px solid #4c6691; }
#n2 { background-color: #C99F2E; }
#n2:hover { background-color: #DBB859; }
#n2.active { border-bottom: 4px solid #C99F2E; }
#n3 { background-color: #689341; }
#n3:hover { background-color: #99C373; }
#n3.active { border-bottom: 4px solid red; }
</style>
</head>
<body>
<h1>Normale Navigation</h1>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#" class="active">Über uns</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
<br />
<h1>Mehrfarbige Navigation (Mehrere CSS-Klassen)</h1>
<ul class="multiColor">
<li><a class="nav1" href="#">Home</a></li>
<li><a class="nav2 active" href="#">Über uns</a></li>
<li><a class="nav3" href="#">Kontakt</a></li>
</ul>
<br />
<h1>Test-Liste (IE6-Fehler)</h1>
<ul>
<li><a class="active" href="#">Test</a></li>
</ul>
<br />
<h1>Mehrfarbige Navigation (Mehrere IDs)</h1>
<ul class="multiColor">
<li><a id="n1" href="#">Home</a></li>
<li><a id="n2" class="active" href="#">Über uns</a></li>
<li><a id="n3" href="#">Kontakt</a></li>
</ul>
</body>
</html>