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?? 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???

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