Problème avec IE6 si utilisation de plusieurs classes

[het44]

Bonjour
Désolé si le titre est pas clair, je voyais pas trop comment résumer le message.

J'ai une div qui utilise 2 classes :

Code HTML :

1
2
3
<div class="toto tutu">
Classes toto et tutu
</div>

ainsi que d'autres div :

Code HTML :

1
2
3
4
5
6
7
8
 
<div class="toto">
Classe toto
</div>
 
<div class="tutu">
Classe tutu
</div>

Mon code css :

Code CSS :

1
2
3
4
5
6
7
8
9
10
11
12
 
.toto {
	border:1px solid blue;
}
 
.tutu {
	border:1px solid green;
}
 
.toto.tutu {
	border:1px solid red; /* applique une bordure rouge aux elements qui ont les 2 classes toto et tutu */
}

Sous firefox, l'affichage est correct, il m'ajoute bien une bordure rouge à ma première div, une bleue à la seconde div et une verte à la dernière. Par contre sous IE6, il m'ajoute la bordure rouge à ma première div ainsi qu'à ma div qui utilise la classe tutu.

Comment résoudre ce problème? Est ce qu'il y a une autre façon d'écrire mon code css pour que ma bordure rouge s'applique uniquement aux div qui ont à la fois la classe toto et tutu? J'ai l'impression que le problème vient de ça. Merci d'avance

Ps : Je n'ai pas la possibilité de modifier le code html

PJ1 : affichage sous firefox
PJ2 : affichage sous ie6