Mozilla & IE : Interpretation Différente d'un code

27 avr. 2005, 10:59

Voici un code pour faire un menu dynamique ...

<html>
<head>
<script language=JavaScript>
function showhide(pi_object)
{
  var the_element = document.getElementById(pi_object);

  if (the_element.style.display == "none")
  {
    the_element.style.display = "block";
  }
  else
  {
    the_element.style.display = "none";
  }
}
</script>
<style>
a.menu {
	font-family: Verdana;
	font-size: 11px;
	color: #660000;
	text-decoration: none;
	font-weight: bold;
}
a.menu:hover {
	font-family: Verdana;
	font-size: 11px;
	color: #9A4B00;
	text-decoration: underline;
}
</style>
</head>
<body>
<table width="250" border="0" cellspacing="0" cellpadding="0">
  <tr> 
    <td align="center" style="padding-right: 8px; padding-left: 8px; padding-bottom: 0px; padding-top: 0px"> 
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr> 
          <td>&nbsp;<img src="puce1.gif" width="10" height="10">&nbsp;<a href="#" class="menu">Accueil</a></td>
        </tr>
      </table>
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr> 
          <td>&nbsp;<img src="puce1.gif" width="10" height="10">&nbsp;<a onclick="showhide('game');" href="#" class="menu">Le 
            Jeu </a></td>
        </tr>
      </table>
      <div id="game"> 
        <table width="80%" border="0" cellspacing="0" cellpadding="0">
          <tr> 
            <td>&nbsp;<img src="puce2.gif" width="10" height="10">&nbsp;<a href="#" class="menu">R&egrave;gles 
              du Jeu</a></td>
          </tr>
        </table>
        <table width="80%" border="0" cellspacing="0" cellpadding="0">
          <tr> 
            <td>&nbsp;<img src="puce2.gif" width="10" height="10">&nbsp;<a href="#" class="menu">Listes 
              d'Achats</a></td>
          </tr>
        </table>
        <table width="80%" border="0" cellspacing="0" cellpadding="0">
          <tr> 
            <td>&nbsp;<img src="puce2.gif" width="10" height="10">&nbsp;<a href="#" class="menu">Les 
              Joueurs</a></td>
          </tr>
        </table>
      </div>
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr> 
          <td>&nbsp;<img src="puce1.gif" width="10" height="10">&nbsp;<a href="#" class="menu">Forum</a></td>
        </tr>
      </table>
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr> 
          <td>&nbsp;<img src="puce1.gif" width="10" height="10">&nbsp;<a onclick="showhide('ue');" href="#" class="menu">Univers 
            &Eacute;tendu</a></td>
        </tr>
      </table>
      <div id="ue" style="display=none;"> 
        <table width="80%" border="0" cellspacing="0" cellpadding="0">
          <tbody>
            <tr> 
              <td>&nbsp;<img src="puce2.gif" width="10" height="10">&nbsp;<a href="#" class="menu">Encyclop&eacute;die</a></td>
            </tr>
          </tbody>
        </table>
        <table width="80%" border="0" cellspacing="0" cellpadding="0">
          <tbody>
            <tr> 
              <td>&nbsp;<img src="puce2.gif" width="10" height="10">&nbsp;<a href="#" class="menu">Les 
                Livres</a></td>
            </tr>
          </tbody>
        </table>
        <table width="80%" border="0" cellspacing="0" cellpadding="0">
          <tbody>
            <tr> 
              <td>&nbsp;<img src="puce2.gif" width="10" height="10">&nbsp;<a href="#" class="menu">Galerie 
                de Wallpapers</a></td>
            </tr>
          </tbody>
        </table>
        <table width="80%" border="0" cellspacing="0" cellpadding="0">
          <tbody>
            <tr> 
              <td>&nbsp;<img src="puce2.gif" width="10" height="10">&nbsp;<a href="#" class="menu">DVD 
                & Musiques</a></td>
            </tr>
          </tbody>
        </table>
        <table width="80%" border="0" cellspacing="0" cellpadding="0">
          <tbody>
            <tr> 
              <td>&nbsp;<img src="puce2.gif" width="10" height="10">&nbsp;<a href="#" class="menu">Divers</a></td>
            </tr>
          </tbody>
        </table>
      </div>
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr> 
          <td>&nbsp;<img src="puce1.gif" width="10" height="10">&nbsp;<a href="#" class="menu">Staff</a></td>
        </tr>
      </table>
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr> 
          <td>&nbsp;<img src="puce1.gif" width="10" height="10">&nbsp;<a href="#" class="menu">Partenariat</a></td>
        </tr>
      </table>
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr> 
          <td>&nbsp;<img src="puce1.gif" width="10" height="10">&nbsp;<a href="#" class="menu">Contact</a></td>
        </tr>
      </table></td>
  </tr>
</table>
</body>
</html>

Sous IE j'obteins

Étonnement c'est ce que je veux qu'il m'interprete ...

Mais sous Mozilla j'ai ceci :

Il doit donc y avoir une erreur dans mon code mais je la trouve pas

si vous pouviez m'aidez merci

27 avr. 2005, 11:16

Ligne 80 :

<div id="ue" style="display=none;">

Devrait être :

<div id="ue" style="display:none;">

":" au lieu de "="

27 avr. 2005, 11:50

ouah !

merci beaucoup

27 avr. 2005, 18:37

Juste une suggestion sur la forme (Élégance, élégance...)

Tu peux remplacer :

if (the_element.style.display == "none")
   { the_element.style.display = "block";
   }
   else
   { the_element.style.display = "none";
   }

par :

  volet.style.display = (volet.style.display=="none" ? "block" : "none");

27 avr. 2005, 21:40

ouep merci ça prend plus qu'une ligne comme ça ^^
par contre je sais pas ce que ça signifie

mais pas grave du moment que ça fonctionne

27 avr. 2005, 21:50

ouep merci ça prend plus qu'une ligne comme ça ^^
par contre je sais pas ce que ça signifie

Rigoureusement la même chose !
(Beausseigne ! c'te question...)

Tu vas voir, c'est hyper simple et très astucieux !

Dans la syntaxe suivante :

$var_arrivee = ($var_test==true ? valeur_oui : valeur_non);

la valeur attribuée à $var_arrivee dépend du résultat du test sur $var_test.
- Si $var_test est true alors $var_arrivee prend la valeur valeur_oui
- Si $var_test est false alors $var_arrivee prend la valeur valeur_non

C'était pas compliqué, hein ?

27 avr. 2005, 22:06

C'est vrai que c'est astucieux, j'avais déjà vu sans jamais approfondir, mais je sens que j'ai des scripts qui vont encore maigrir.

C'que vous êtes bon m'sieur albat

28 avr. 2005, 13:09

juste histoire de mettre mon grain de sable

$var_arrivee = ($var_test==true ? valeur_oui : valeur_non);

les parenthèses ne sont pas obligatoire là

28 avr. 2005, 13:11

$var_arrivee = ($var_test==true ? valeur_oui : valeur_non);
les parenthèses ne sont pas obligatoire là

Vrai ?

Ben, j'ignorais. Merci.
Mais... c'est quand même plus lisible avec, non ?

29 avr. 2005, 17:05

en effet falais le savoir bien merci

Mozilla & IE : Interpretation Différente d'un code

Qui est en ligne