CSS Problème de cascade

Bonjour,

Je me trouve face à un petit problème de cascade qui apparait uniquement sous FireFox.
Voici une image pour montrer le bug :
http://pix.nofrag.com/6c/4d/580afc2041300b0510a4c7226c4b.gif

Voici donc mon code CSS :

a.contentMenuTop{
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
	text-decoration:none;
	padding: 4px;
	border: #afafaf 1px solid;
	float:left;
	margin: 2px 2px 0;
	background-color: #fafafa;
	color:#AFCEE5;
}

a.contentMenuTopSelected{
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
	text-decoration:none;
	padding: 4px;
	border-top:#afafaf 1px solid;
	border-left:#afafaf 1px solid;
	border-right:#afafaf 1px solid;
	border-bottom:#fff 1px solid;
	float:left;
	margin: 2px 2px 0;
	background-color: #fff;
	color:#94989B;
}

Et finalement voici ce que ça devrait donner :
http://pix.nofrag.com/89/c7/9e0932efe67f99c151525156d722.gif

Sur FireFox si je met un bloc de style avant l'autre c'est toujours le second qui est pris en compte, l'autre ne semble pas fonctionner

J'ai cherché mais rien trouvé.. si vous avez une idée de commen résoudre je serais ravis.

Merci d'avance de votre aide.
a+

Bonjour,

Indiquer le HTML correspondant, om se situe très probablement l'erreur.

(Les styles pourront au passage être simplifié, la répétition des propriétés étant inutile).

Bonjour,

Désolé j'ai oublié... voici donc le html :

<a href="#" class="contentMenuTopSelected">Suisse</a>
<a href="#" class="contentMenuTop">Int.</a>
<a href="#" class="contentMenuTop">Eco.</a>
<a href="#" class="contentMenuTop">Sport</a>
<a href="#" class="contentMenuTop">Culture</a>