Styles background-image non pris en compte sur FF

Saluté ...
j'ai un problème bien costaud là je crois ...
j'ai une page avec un système d'onglet qui fait appel à la propriété display:none ou display: block ... le tout géré par javascript ...
quand je clique sur un bouton sa classe est censé passer de plus à moins ce qui correnspond en fiat à changer le background-image avec l'ipage plus.gif ou moins.gif ...
bon ben sur FF j'ai bien l'image moins.gif ... mais jamais l'image plus.gif...
je ne comprends pas ... de plus que sur IE ça marche...
je vous mets un exemple de html avec le javascript et les css sachant que cet exemple marche lui ... mais c'est quand j'utilise ceci dans une page bien plus complexe avec bcp de contenu que ça ne marche plus .... merci par avance

<SCRIPT LANGUAGE="JavaScript">
<!--
function showHide(elementid, icon){
	if (document.getElementById(elementid).style.display == 'none'){
		document.getElementById(elementid).style.display = '';
		icon.className = 'moins';
	} else {
		document.getElementById(elementid).style.display = 'none';
		icon.className = 'plus';
	}
}
//-->
</SCRIPT>
<style>
.plus{
	background-image: url(plus.gif);
	background-repeat: no-repeat;
	cursor: pointer;
	padding-left : 15px;
  padding-top: -2px;
}
.moins {
	
	background-image: url(moins.gif);
	background-repeat: no-repeat;
	cursor: pointer;
	padding-left : 15px;
  padding-top: -2px;
}
</style>

<div class="plus" id="icon" onclick="javascript:showHide('div1', this)">afficher / masquer</div>
<div id="div1" style="display:none;border:thin solid;">
lorem epsum lorem epsum lorem epsum lorem <br />epsum lorem epsum lorem epsum lorem epsum lorem epsum
lorem epsum lorem epsum lorem epsum lorem <br />epsum lorem epsum lorem epsum lorem epsum lorem epsum
lorem epsum lorem epsum lorem epsum lorem epsum <br />lorem epsum lorem epsum lorem epsum lorem epsum
</div>

c'est un truc de fou ça !!! j'ai testé ça ....
donc deux css identiques ! suaf leur nom

.moins {	
	background-image: url(../images/icon/moins.gif);
	background-repeat: no-repeat;
	cursor: pointer;
	padding-left : 15px;
  	padding-top: -2px;
}
.plus{	
	background-image: url(../images/icon/moins.gif);
	background-repeat: no-repeat;
	cursor: pointer;
	padding-left : 15px;
  	padding-top: -2px;
}

<div class="moins">mdtkjhgemdj</div>

ça marche

<div class="plus">mdtkjhgemdj</div>

ça marche pas ...

Salut Nas,

Je ne saurais pas t'aider mais j'ai a peu pres le meme probleme, et je serai donc interressé par la solution si tu en trouves une, a l inverse si j en trouve une je la posterai ici.

Cordialement

Esteban

Quelques remarques rapidement:

- le code HTML est bien sûr valide?
- de même que le code CSS?
- la page HTML a bien un Doctype en bonne et due forme (avec URL de la DTD)?
- tu parles de différences entre Internet Explorer et Firefox... mais as-tu vérifié le rendu avec au moins un autre navigateur «conforme» (par exemple: Safari, Konqueror, Opera...)?

Si la réponse à toutes ces questions est oui, alors le terrain est déjà bien balisé. Si non, il faudrait commencer par là.