Forum d'entraide PHPFrance

Bonjour à tous!

Voici mon menu déroulant dynamique pour mon site web. Il ne fonctionne pas sous Firefox mais fonctionne "nickel" sur Internet Explorer..

Voici ce que cela donne sous Internet Explorer:

Et voici sous Firefox:

Maintenant, voici le code simple..

Code : Tout sélectionner

<html>
<head>
<script type="text/javascript" src="drop_down.js"></script>
<style type="text/css">
@import "style3.css";
html	{
	height: 100%;   /* needed by Netscape to prevent it going crazy*/
}
.gauche	{
	float: left;
	position: relative; /*needed by IE6*/
	text-align: left;
}

.droit	{
	float: right;
	position: relative; /* needed by IE6*/
        top: 2px;
	text-align: right;
}
</style>
</head>
<font color="#000000" face="Trebuchet MS" style="font-size: 13px">
<ul id="nav"> 

    <li><a href="index.php?page=0">Accueil</a></li> 

    <li><div class="gauche"><a href="index.php?page=2">Le projet éducatif</div></a> 
    </li> 

    <li><a href="#"><div class="gauche">Le conseil des élèves</div><div class="droit"><img src="images/boxed_arrow.jpg" border=0></div></a> 
      <ul> 
        <li><a href="index.php?page=3">Membres</a></li> 
        <li><a href="index.php?page=4">Activité à venir</a></li> 
      </ul> 
    </li>
    <li><div class="gauche"><a href="index.php?page=5">Le conseil d'établissement</div></a> 
     </li> 

      <li><a href="#"><div class="gauche">La formation</div><div class="droit"><img src="images/boxed_arrow.jpg" border=0></div></a>
	        <ul> 
        <li><a href="index.php?page=6">Parcours de formation</a></li> 
        <li><a href="index.php?page=7">Cours de base</a></li> 
		<li><a href="index.php?page=8">Cours optionnels</a></li> 
        <li><a href="index.php?page=9">Synthèse des cours</a></li> 
      </ul> 	  
	  </li>

<li><a href="index.php?page=10">Sanction des études</a></li>

<li><a href="index.php?page=11">La direction</a></li>

<li><a href="index.php?page=12">Le personnel</a></li>

<li><a href="#"><div class="gauche">Les services</div><div class="droit"><img src="images/boxed_arrow.jpg" border=0></div></a>
	        <ul> 
        <li><a href="index.php?page=13">Animation de loisirs</a></li> 
        <li><a href="index.php?page=14">Animation spirituelle</a></li> 
		<li><a href="index.php?page=15">Bibliothèque</a></li> 
        <li><a href="index.php?page=16">Intervenante sociale</a></li> 
        <li><a href="index.php?page=17">Orientation</a></li> 
        <li><a href="index.php?page=18">Psycho-éducation</a></li> 
		<li><a href="index.php?page=19">Psychologie</a></li> 
        <li><a href="index.php?page=20">Santé</a></li> 
      </ul> 
</li>



<li><a href="#"><div class="gauche">Le soutien à l'apprentissage</div><div class="droit"><img src="images/boxed_arrow.jpg" border=0></div></a>
	        <ul> 
        <li><a href="index.php?page=21">Le répondant</a></li> 
        <li><a href="index.php?page=22">Le tuteur</a></li> 
		<li><a href="index.php?page=23">La récupération</a></li> 
        <li><a href="index.php?page=24">Pairs-aidants</a></li> 
        <li><a href="index.php?page=25">Orthopédagogie</a></li> 
      </ul> 
</li>

<li><a href="#"><div class="gauche">Les sports</div><div class="droit"><img src="images/boxed_arrow.jpg" border=0></div></a>
	        <ul> 
        <li><a href="index.php?page=28">L'Athlétisme</a></li> 
        <li><a href="index.php?page=29">Badminton</a></li> 
		<li><a href="index.php?page=30">Basketball</a></li> 
        <li><a href="index.php?page=31">Bikers</a></li> 
        <li><a href="index.php?page=32">Cross-counrty</a></li> 
		<li><a href="index.php?page=33">Football</a></li> 
        <li><a href="index.php?page=34">Hockey</a></li> 
		<li><a href="index.php?page=35">Natation</a></li> 
        <li><a href="index.php?page=36">Soccer</a></li> 
		<li><a href="index.php?page=37">VolleyBall</a></li> 
      </ul> 
</li>

<li><a href="#"><div class="gauche">Arts, culture et société</div><div class="droit"><img src="images/boxed_arrow.jpg" border=0></div></a>
	        <ul> 
        <li><a href="index.php?page=38">Aidants pédagogiques</a></li> 
        <li><a href="index.php?page=39">Fous du Jeudi</a></li> 
		<li><a href="index.php?page=40">La musique</a></li> 
        <li><a href="index.php?page=41">Les arts</a></li> 
        <li><a href="index.php?page=42">MP3</a></li> 
		<li><a href="index.php?page=43">Pairs-aidants</a></li> 
        <li><a href="index.php?page=44">Théâtre</a></li> 
		<li><a href="index.php?page=45">Tiers monde</a></li> 
      </ul> 
</li>

<li><a href="index.php?page=26">Cafétéria</a></li>

<li><a href="index.php?page=27">Liens éducatifs</a></li>

<li><a href="#"><div class="gauche">Pour nous joindre</div><div class="droit"><img src="images/boxed_arrow.jpg" border=0></div></a>
	    <ul> 
        <li><a href="index.php?page=46">Administration</a></li>
		<li><a href="index.php?page=1">Contact</a></li>
		</ul>
</li>
 </ul></font>
  </html>

Quelqu'un pourrait me dire pourquoi cela se produit-il et comment y remédier?

Merci de votre aide!

A++

1. quel rapport avec le php ?
2. l'erreur est certainement dans le fichier css
3. quel rapport avec le php ?
4. ou bien ton javascript drop_down.js contient du code pas compatible avec Firefox
5. quel rapport avec le php ?

1. quel rapport avec le php ?
...
3. quel rapport avec le php ?
...
5. quel rapport avec le php ?

On se détend...

Je déplace.

Maintenant qu'il est déplacé, est-ce que vous pouvez m'aider?!

Si vous voulez les codes javascript et CSS, vous n'avez qu a me le dire!

A++

je te conseille d'aller tester tes fichiers .htm et .css pour voir si le code est propre.
En corrigeant les eventuelles erreurs, tu rendra tes deux fichiers plus aptes à etre interpretés par Firefox.

CSS validator

HTML validator

Hmmm, j'ai testé les 2 fichiers mais cela ne change en rien le résultat !

Peut-être cela pourrait-il venir du JavaScript?

Voici le code:

Code : Tout sélectionner

// JavaScript Document

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
 }
}
window.onload=startList;

Sinon, je ne sais vraiment pas c'est quoi ...

Merci!

A++

Non, c'est à priori un problème de CSS, peut-être du couple CSS/JavaScript.

Faudrait voir la feuille de style.

Voici a la demande générale, le code de la feuille de style CSS :

Code : Tout sélectionner

body {
	font: normal 10px trebuchet ms;	}

ul {
   margin: 0;
	padding: 0;
	list-style: none;
	width: 196px; /* Width of Menu Items */
	border-bottom: 1px solid #ccc;
	}
	
ul li {
	position: relative;
	}
	
li ul {
	position: absolute;
	left: 195px; /* Set 1px less than menu width */
	top: 0;
	display: none;
	}

/* Styles for Menu Items */
ul li a {
	display: block;
	text-decoration: none;
	color: #000000;
	background: #fff; /* IE6 Bug */
	padding: 2px;
	border: 1px solid #ccc; /* IE6 Bug */
	border-bottom: 0;
	}
	
/* Holly Hack. IE Requirement \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

li:hover ul, li.over ul { display: block; } /* The magic */


#nav li li a:hover {
        background: #DCDCDC;
}

h2 {text-align: left}
h3 {text-align: right}

Merci !

A++

Forum d'entraide PHPFrance

Marche avec IE mais pas avec Firefox...

Marche avec IE mais pas avec Firefox...