ie6 Bug in einer id / class Kombination

[X-Color]

Hi Leute,
einen sehr seltsamen Fehler der eigentlich garnicht zu einem Fehler führen dürfte verfolgt mich gerade...Ich habe ein li-Element mit ID und Klasse (aktiv / inaktiv), wenn das Element die Klasse aktiv erhält und ich im Stylesheet die dazu passende Definition über die Definition stelle, die für die Klasse inaktiv gedacht ist wird das Element korrekt angesprochen.

Wechsel ich nun die li-Klasse auf inaktiv (inaktiv steht unterhalb der aktiv-Defintion) wird das Element nichtmehr angesprochen, setze ich nun wieder die Inaktiv-Definition über die aktiv-Definition ist wieder alles ok...Da das alles sehr strange klingt, hier zuerst mal der code:

<!-- HTML -->
<div id="navigation">
	<ul>
		<li id="navigationFaq" class="active"><a href="">FAQ-Bereich</a></li>
	</ul>
</div>

<!-- CSS das korrekt funktionien würde mit hintergrundbild für navigationFaq -->
div#navigation ul li#navigationFaq.active {
	background: url("images/button_faq-active.gif") left top no-repeat;
}
div#navigation ul li#navigationFaq.inactive {
	background: url("images/button_faq-inactive.gif") left top no-repeat;
}

<!-- CSS das kein Hintergrundbild mehr das für navigationFaq darstellt -->
div#navigation ul li#navigationFaq.inactive {
	background: url("images/button_faq-inactive.gif") left top no-repeat;
}
div#navigation ul li#navigationFaq.active {
	background: url("images/button_faq-active.gif") left top no-repeat;
}

Hatte jemand dieses Problem schonmal im IE6?
Danke für Eure Hilfe,
Gruß Gerrit

 

[Maik]

Hi,

was den IE6 dazu bewegt, die umgekehrte Selektor-Reihenfolge mit der id/class-Kombination im Stylesheet zu ignorieren, kann ich dir leider nicht sagen, aber eine vertauschte class/class-Kombination nimmt er bei mir anstandslos an:

div#navigation ul li.navigationFaq.inactive {
    background: url(images/button_faq-inactive.gif) left top no-repeat;
}
div#navigation ul li.navigationFaq.active {
    background: url(images/button_faq-active.gif) left top no-repeat;
}

<div id="navigation">
    <ul>
        <li class="navigationFaq active"><a href="#">FAQ-Bereich</a></li>
    </ul>
</div>

Vielleicht kannst du damit etwas anfangen.