Discussion :

[PuppeT mAsTer]

Bonjour à tous, encore un pb IE/Firefox vous allezz dire et vous avez raison.
Comme le titre le dit, mon menu déroulant fonctionne sous Firefox et non sous IE, à quoi est ce dû et comment réparer l'erreur ? Le menu utilise les listes <ul><li> et une CSS pour fonctionner, y a t'il un pb par rapport à la CSS ?

Enfin j'ai lu quelques articles sur le sujet mais j'aimerai bénéficier de vos lumières ?

Merci d'avance.


++

PM

[Swoög]

hum... peut-être, peut-être pas...

[PuppeT mAsTer]

Vous avez surement besoin de ça

Code HTML du menu.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<div id="menu">
	<ul id="menuderoulant">
	  <li><a href="id.php"><b>RADIO</b></a>
	   <ul class="sousmenu">
		<li><b>EMISSIONS</b></font></li>
		<li><a href="deboutlyon.htm">Debout Lyon</a></li>
		<li><a href="denisshow.htm">Le Denis Show</a></li>
		<li><a href="leclub.htm">Le Club</a></li>
 
		<li><b>ANTENNE</b></li>
		<li><a href="progs.php">Grille des programmes</a></li>
		<li><a href="animateurs.php">Animateurs</a></li>
		<li><a href="redac.php">La Rédac</a></li>
		<li><a href="directon.php">La Direction</a></li>
		<li><a href="contact.php">Contactez-nous</a></li>
	   </ul>
	  </li>
	  <li><a href="breves.php"><b>BREVES</b></a></li>
	  <li><a href="#"><b>MUSIC</b></a>
	   <ul class="sousmenu">
		<li><a href="javascript:openWindow(400,250),live.php">Ecoutez en live</a></li>
		<li><a href="playlist.php">La playlist</a></li>
		<li><a href="ctkoi.php">Le CT KOI?</a></li>
	   </ul>
	  </li>
	  <li><a href="#"><b>SPORT</b></a>
	   <ul class="sousmenu">
		<li><b>RESULTATS</b></li>
		<li><a href="OL.php">Olympique Lyonnais</a></li>
		<li><a href="ASVEL.php">Adecco ASVEL</a></li>
		<li><a href="LOU.php">LOU</a></li>
		<li><a href="calendriers.php"><b>CALENDRIERS</b></a></li>
		<li><b>LE DIRECT</b></li>
		<li><a href="oldirect.php">Olympique Lyonnais</a></li>
		<li><a href="ASVEL.php">Adecco ASVEL</a></li>
		<li><a href="LOU.php">LOU</a></li>
 
	   </ul>
	  </li>
	  <li><a href="#"><b>BLOGS</b></a>
	    <ul class="sousmenu">
		<li><a href="#">Ton Blog</a></li>
		<li><a href="forums.php">Les Forums</a></li>
		<li><a href="#">Le Tchat</a></li>
	    </ul>
	  </li>
	  <li><a href="#"><b>AGENDA</b></a>
	   <ul class="sousmenu">
		<li><a href="interviews.php">Interviews</a></li>
		<li><a href="evenements.php">Evénements</a></li>
	   </ul>
	  </li>
	  <li><a href="photos.php"><b>PHOTOS</b></a></li>
	  <li><a href="emplois.php"><b>EMPLOIS</b></a></li>
	</ul>
</div>

et de ça : extrait du CSS concernant le div menu

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
#menu {
position: absolute;
top: 180;
left: 0;
z-index:100;
width: 100%; /* précision pour Opera */
}
#menuderoulant {
               width: 1024px;
               list-style-type: none;
               margin: 0;
               padding: 0;
 
}
#menuderoulant li
{
 float: left;
 width: 128px;
 height: auto;
 font-size: 12px;
 color: #FFFFFF;
 font-family:Verdana;
 text-align: center;
 margin: 0;
 border: 0;
 padding-top: 6px;
 padding-bottom: 9px;
}
 
#menuderoulant li:hover > .sousmenu { display: block; }
 
#menuderoulant li a:link,
#menuderoulant li a:visited
{
  display: block;
  height: auto;
  text-decoration:none;
  color: #ffa900;
}
#menuderoulant li a:hover {
  color: #ff5b01;
}
#menuderoulant .sousmenu {
 display: none;
 list-style-type: none;
 margin-top: 10px;
 padding: 0;
 border: 0;
}
#menuderoulant .sousmenu li {
 float: none;
 line-height: 1.5;
 padding-top: 1px;
 padding-bottom: 0px;
 margin-top:1;
 border:none;
 background-image:url("images/fondmenu.png");
}
#menuderoulant .sousmenu li a:link,
#menuderoulant .sousmenu li a:visited,
{
  display: block;
  text-align: left;
  font-weight: normal;
  margin: 0;
  padding: 0;
  border: 0;
}
#menuderoulant .sousmenu li a:hover {
  background-color:#112a45;
}

[Swoög]

tel quel ton menu ne peut pas être déroulant FF, IE, Opera ou autre...

pour l'instant, c'est impossible dans JS sous IE (non support du :hover pour autre chose que les a)

[IdF-Socrateus]

Le problème vient du fait qu'IE ne reconnait pas correctement certaines propriétés du CSS, et dans ce cas particulier la "position:fixed" et la méthode ":hover", qui ne passe pas sur autre chose qu'un lien (balise "<a ...>...</a>" seulement ! donc pas pour les listes...).
Les solutions proposées ci et là sur la toile utilisent des bidouilles variées pour passer outre, mais je n'ai rien trouvé de simple qui donne une compatibilité suffisante.
Lien intéressant :
http://tagsoup.com/-dev/null-/css/fixed/#v6
Une méthode relativement claire consiste à utiliser une feuille CSS pour IE, et une pour les autres navigateurs: (sinon on s'y perd dans les hacks...)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
<link href="main-style.css" rel="stylesheet" type="text/css">
<!--[if IE]>
<link href="ie-style.css" rel="stylesheet" type="text/css">
<![endif]-->

Sinon pour les tests, un mod de firefox permet de switcher entre le moteur mozilla et le moteur IE, très pratique pour voir les différences d'affichage sans change de fenêtre...
bon courage !

[PuppeT mAsTer]

Merci, donc en combinant vos deux réponses ce qu'il me reste à faire c'est faire 2 CSS une pour chaque navigateur et utilisé du JS pour la version IE, j'ai bien compris ? Et je t'assure que sous Firefox le menu fonctionne

++

PM

[IdF-Socrateus]

Pas de doute, bien sûr que ça marche (ça fait toujours plaisir d'avoir un menu dynamique sur une page sans javascript) !
J'ai eu le même pb, mais comme c'est sur un site perso je me suis même pas donné la peine de faire une version pour IE, non mais oh !
...faire un navigateur incompatible avec les standards, c'est pas une solution à terme, faudrait que M$ comprenne ça un jour...

Sinon y'a aussi le principe des popups en CSS, on peut faire des choses très sympas avec ça !