Problem med omfärgning via CSS-klasser

Jag har ett interaktivt korsord som är uppbyggt av en tabell där rutnätets utseende beror av olika CSS-klasser. Detta funkar fint nästan hela vägen... men tyvärr inte riktigt överallt. En normal vit ruta har CSS-klassen vit, om den vita rutan innehåller en svängande pil, används CSS-klassen turnXY. (Där XY beror på hur den svänger.) När korsorden kollas, jämför jag inskrivna ord mot avsedda från en databas, och om dessa bokstäver inte stämmer får rutan CSS-klassen facit i tillägg till övrig klass. Facit är avsedd att göra texten röd.

Detta funkar fint för vanliga vita rutor, men verkar inte ha någon effekt på svängande sådana?? :q Hur är det möjligt?

Ett exempel för tydlighets skull: (Den feta bokstavens ruta innehåller en svängande pil.)
Inskrivet ord: WALLS
Riktigt ord: JAMES
Borde färgats enligt: JAMES

Resulterar i följande korrekta HTML: (Utdrag)

<td id="td_D1" class="vit facit">J</td> == > Röd (Riktigt, ty fel bokstav)
<td id="td_D2" class="vit">A</td> ==> Svart (Riktigt, ty rätt bokstav)
<td id="td_D4" class="turnDF facit">E</td> ==> Svart (FEL, ty fel bokstav)

Se också bifogad bild. (Klasserna blir alltså rätt, men inte färgen i browsern.)

/* I CSS-filen */
#cw td.vit {
  background:url(vitRuta.gif); /*genomskinlig*/
  background-color:#ffffff;
  color:black;
  font-weight: bold;
  border:1px solid black;
  padding:5px;
  margin:0;
  width:1em;
}

#cw td.facit {
  color: #DC143C;
  font-weight: bold;
  border:1px solid black;
  padding:5px;
  margin:0;
  width:1em;
}

#cw td.turnDF {  /* Down -> Forward */
  background:url(arrowDownToForw.gif); /*genomskinlig*/
  background-color:#ffffff;
  color:black;
  font-weight: bold;
  padding:5px;
  margin:0;
  width:1em;
}

Vad 17 är det som gör att "vit facit" ==> röd text, men "turnDF facit" ==> svart??? :q

Detta gäller både IE (v 6.0) och FF.