Menu. Probleme sous IE

Ami(e) du jour, bonjour

J'ai un probleme avec un menu dans mon site web avec le navigateur Internet Explorer.
Vous pouvez voir les problemes a l'adresse suivante : http://raiders.eysines.free.fr

Le premier probleme est l'espace qu'il y a entre les sous-rubriques. Je souhaite faire disparaitre cette espace vert entre les sous-rubriques.

Le deuxieme probleme est que si on passe la sourie sur le menu bleu, les sous-rubriques bleues disparaissent derrierele menu rouge.
J'ai essayé en mettant z-index, mais ca ne marche pas. Le fait de mettre z-index dans le CSS bloque l'apparition des sous-rubriques.

Ces problemes ne se presentent pas sous Firefox.

Voici le code HTML du menu

Code:

1
2
3
4
5
6
7
8
9
10
 
   <ul class="menuDeroulant">
   <li><a target="_top" href="$pageactuel"><img src="images/leclub.jpg" border="0"></a>
   <ul class="sousMenu">
   <li><a target="_top" href="pages.php?id=1"><img src="images/histoire.jpg" border="0"></a></li>
   <li><a target="_top" href="pages.php?id=3"><img src="images/palmares.jpg" border="0"></a></li>
   <li><a target="_top" href="pages.php?id=4"><img src="images/contacts.jpg" border="0"></a></li>
   </ul>
   </li>
   </ul>

Voici le code du CSS

Code:

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
72
73
74
75
76
77
78
 
<style type="text/css">
.menuDeroulant {
   background: #CC3333;
   list-style-type: none;
   margin: 0;
   padding: 0;
   border: 0;
}
 
.menuDeroulant li {
   float: left;
   margin: 0;
   padding: 0;
   border: 0;
   behavior:url('menu.htc');
   position:expression('relative');
   display:expression('inline');
   background: #CC3333;
}
 
.menuDeroulant li a:link, .menuDeroulant li a:visited {
   display: block;
   height: auto;
   color: #FFF;
   background: #00ff00;
   margin: 0;
   text-decoration: none;
}
 
.menuDeroulant li a:hover {}
.menuDeroulant li a:active {}
 
.menuDeroulant li ul.sousMenu {
   background: transparent url("fondTR.png") repeat;
   display: none;
   list-style-type: none;
   margin: 0;
   padding: 0;
   border: 0;
   left:expression(0);
   position:absolute;
   visibility:hidden;
}
 
.menuDeroulant li ul.sousMenu li {
   display:block;
   float: none;
   margin: 0;
   padding: 0;
   border: 0;
}
 
.menuDeroulant ul.sousMenu li a:link, .menuDeroulant ul.sousMenu li a:visited {
   display: block;
   color: #CC3333;
   margin: 0;
   border: 0;
   text-decoration: none;
}
 
.menuDeroulant ul.sousMenu li a:hover {
   background-image: none;
   background-color: #CC3333;
}
 
.menuDeroulant li:hover ul.sousMenu {
  visibility:visible;
}
 
.menuDeroulant li:hover>ul.sousMenu {
display: block;
}
 
.menuDeroulant>li {
  display:table-cell;
}
</style>

Code du JavaScript
et voici la partie pour que le menu fonctionne sous Internet Explorer

Code:

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
 
<PUBLIC:COMPONENT>
   <PUBLIC:ATTACH EVENT="onmouseenter" ONEVENT="showSubMenu()" />
   <PUBLIC:ATTACH EVENT="onmouseleave"  ONEVENT="hideSubMenu()"  />
 
   <SCRIPT LANGUAGE="JScript">
    var menuBackground;
    var menuHighLight = 'rgb(0,255,0)'; // 204,33,33
 
    function showSubMenu() {
      // highlight current item
      menuBackground = style.backgroundColor;
      style.backgroundColor = menuHighLight;
      // z-index;
 
      // get sub menu
      var submenu = getElementsByTagName('ul')[0];
      if (submenu) {
        // workaround for windowed select object bug
        // that ignores zindex values
        var iframe = getElementsByTagName('iframe')[0];
        if (!iframe) {
          iframe = document.createElement('iframe');
          iframe.frameBorder=0;
          iframe.style.display='block';
          iframe.style.position='absolute';
          iframe.style.top=submenu.offsetTop;
          iframe.style.left=0;
          iframe.style.width=submenu.offsetWidth;
          iframe.style.height=submenu.offsetHeight;
          insertBefore(iframe, submenu);
        }
        // show sub menu
        submenu.style.visibility='visible';
        submenu.style.display='block';
        iframe.style.visibility='visible';
      }
    }
 
    function hideSubMenu() {
       // hide submenu
       var submenu = getElementsByTagName('ul')[0];
       if (submenu) {
          submenu.style.visibility='hidden';
          submenu.style.display='none';
          getElementsByTagName('iframe')[0].style.visibility='hidden';
       }
    }
 
   </SCRIPT>
</PUBLIC:COMPONENT>

Je pense que le probleme vient du javaScript car le menu marche sous Firefox et la partie JavaScript ne sert qu'au menu a fonctionner sous Internet Explorer.

Avez vous une idée d'où proviendrai le probleme ??
Merci d'avance pour vos reponses. :)

Merki
Pepit' :wink:

Citation:

img{margin: 0,0,0,0;
padding: 0,0,0,0;}

:idea:

rechercher sur le site de msdn menu.htc

qui permet d'avoir un menu déroulant IE pret à l'emploi

A+JYT
PS: j'ai posté il y a quelques mois un menu ccs htc compatible IE FF et Safari

Pour repondre a Matthieu2000, j'ai rajouté son code dans la partie CSS, mais ca n'a rien fait de plus sous IE.
Je ne vois pas où le mettre ailleurs !?

Pour Sekaijin, j'ai cherché sous le site de microsoft, mais je n'ai pas trouvé mon bonheur. Je vais continuer a chercher.

J'ai également regardé tous tes messages (108 exactements) mais je n'ai pas trouvé le code du menu. moi aussi il me semble qu'il y avait un code d'un menu htc dont je m'etais inspiré mais je ne le trouve plus sur developpez.com !!

Donc j'ai toujours mes deux problemes :
- l'espace entre les differentes sous-rubriques que j'aimerai voir disparaitre et que j'ai mis en vert pour que ca soit visible.
- la disparition des sous-rubriques du menu bleu sous le menu rouge

Merki a vous deux et a tous ceux qui veulent m'aider.
Pepit'