Merkwürdiges Verhalten des IE8 bei Klassenwechsel

[BlueJay]

Hallo Leute,

auf einer meiner Seiten tritt ein ziemlich merkwürdiges Phänomen mit dem IE8 auf:

Bei einer bestimmten Situation schaltet sich ein Knopf an: dessen className geht via document.getElementById('blabla').className von "inaktiv" nach "button", Das funktioniert tadellos.

Beim Klick auf denselben oder Neustart soll der wieder inaktiv werden. IE8 rührt sich in punkto className="inaktiv" nicht, nach einmal Umschalten von inaktiv nach button meint er, seine Schuldigkeit getan zu haben.
Hm, naja, beinahe: der className ist tatsächlich "inaktiv", aber die Werte aus dem Stylesheet werden beim 2.Mal nicht übernommen. Es ist übrigens egal, ob die Klasse im ausgelagerten Sheet liegt oder intern.


Seite:
http://www.gamecraft.de/karten/speedcards.htm

Firefox und Opera haben damit keine Probleme.

Hat da jemand Ideen?

so long,
BlueJay

[BlueJay]

So, habe noch weitere Versuche dazu gemacht:

HTML-Teil:

<div id="ablagen" class="inaktiv" style="position:absolute; top:192px; left:480px; width:56px; height:40px; display:block">
<a href="javascript:neue_ablagen()">Ablage ändern</a></div>


Das Stylesheet sieht folgendermaßen aus:

a:link { color:#ffff00; text-decoration:none; }
a:visited { color:#ffff00; text-decoration:none; }
a:active { color:#99ff99; text-decoration:none; }
a:hover { color:#ffffff; text-decoration:none; }
.button { background-color:#445566; color:#cceedd; border-width:1px; border-style:outset; border-color:#cccc00; text-align:center; padding:2px }
.inaktiv { background-color:#000000; color:#556677; border-width:1px; border-style:outset; border-color:#445500; text-align:center; padding:2px }
.inaktiv a { color:#334455; }

und von "inaktiv" wird immerhin der Hintergrund genommen, das "inaktiv a" spart er sich.

[BlueJay]

Und wieder hieß die Lösung: verlasse dich auf keine Standards, wenn du für IE programmierst!

Die in allen Browsern lauffähige Version:
css:

.button { background-color:#445566; color:#cceedd; border-width:1px; border-style:outset; border-color:#cccc00; text-align:center; padding:2px }
.inaktiv { color:#334455; }
.aktiv { color:#ffff00; }

HTML-Teil:

<div class="button" style="position:absolute; top:192px; left:480px; width:56px; height:40px; display:block">
<a href="javascript:neue_ablagen()">
<span class="inaktiv" id="ablagen">Ablage ändern</span>
</a>
</div>


Javascript-Teil:

document.getElementById("ablagen").className="inaktiv";
// bzw. "aktiv", je nachdem, was man braucht


Wir halten fest:

Die CSS-Anweisungen inaktiv und inaktiv a werden bei Seitenaufbau von allen Browsern verstanden, bei DHTML (DOM-Änderung via Javascript) versagt der IE8 bei inaktiv a jämmerlich.

[undefined]

Der IE hat ein Speicherproblem mir Attributen, ich selbst hatte deshalb aus diesem Grund, schon Diverse Anfälle :-)
Während die meisten Browser ohne mucken Attribute Änderungen annehmen!
Muss man bei IE erst das Attribute komplett löschen und dann Neu erstellen.