[résolu] Function toggle, IE comprend pas.

Salut tout le monde,

d'abord je tiens à préciser que je suis un novice du javascript.

j'ai récupéré un javascript que j'ai un peu modifié, dont voici le code :

<script type="text/javascript">
		function toggle(el) {

		  var myelement1 = document.getElementById(el);
		  var prevelement = document.getElementById(el+"Plus")

		  if(!myelement1.style.display || myelement1.style.display == "none")  {
			myelement1.style.display = "table-row";
			prevelement.style.backgroundImage = "url(img/optionPlusBGUp.jpg)";

		  } else {
		    myelement1.style.display = "none";
			prevelement.style.backgroundImage = "url(img/optionPlusBGDown.jpg)";
		  }

		}
</script>


<table class="magicBox" cellspacing="0">
	<tr id="option">
		<td id="optionCel">
			...content...
		</td>
	</tr>
	<tr id="optionPlus">
		<td><a href="#" onClick="toggle('option'); return false;" class="clickOption">Click for more options</a></td>
	</tr>		
</table>

Tel quel, le code fonctionne parfaitement sous FF. Par contre il ne fonctionne pas sous IE6.

Apparemment le problème vient de :

.display = "table-row";

puisque si je remplace "table-row" par "inline", çà remarche sous IE. Mais çà bug sous FF , à savoir qu' à chaque fois que je clique sur la cellule, un espace blanc de la hauteur de la ligne (à faire apparaître) apparaît et ne disparait jamais. Donc après avoir cliqué 15 fois, je me retrouve avec un espace blanc de 300px.

Est ce qu'il existe un autre terme que table-raw qui serait compris par IE et FF ???

Ou est ce que c'est possible de hacker le code pour utiliser table-row sous FF et inline sous IE ???

Merci d'avance pour votre aide.
Modifié par nab_ (20 Mar 2006 - 19:00)

au cas où, çà intéresse un grand débutant comme moi, voilà une solution :

<script type="text/javascript">
		function toggle(el) {

		  var myelement1 = document.getElementById(el);
		  var prevelement = document.getElementById(el+"Plus")

		  if(!myelement1.style.display || myelement1.style.display == "none")  {

				if(navigator.appName == "Microsoft Internet Explorer"){
			        myelement1.style.display = "inline";
			        prevelement.style.backgroundImage = "url(img/optionPlusBGUp.jpg)";
					} 
				else {
			        myelement1.style.display = "table-row";
			        prevelement.style.backgroundImage = "url(img/optionPlusBGUp.jpg)";
					}

			} else {
		    	myelement1.style.display = "none";
				prevelement.style.backgroundImage = "url(img/optionPlusBGDown.jpg)";
		  		}

		}
		</script>