Discussion :

[Pepito]

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 mais uniquement sous IE.


Voici le code HTML du menu

Code :

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

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 :

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
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>

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

Merki
Pepit' Wink

[raptor70]

Le problème viens de la :

Code :

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

1
2
3
4
 
.menuDeroulant>li {
  display:table-cell;
}

Ceci n'est compatible avec IE...

la seule solution : Javascript ...

[Pepito]

ok
Pourtant quand j'enleve "display:table-cell;" du code, ca marche pareil sous FF et sous IE. Ca ne m'enleve pas le probleme, mais ca ne m'en rajoute pas non plus.
Alors je sais pas si je dois le garder ou pas dans mon code :

Ensuite pour IE, j'ai ce code pour que ca marche sous IE. C'est du JavaScript.

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
<PUBLIC:COMPONENT>
   <PUBLIC:ATTACH EVENT="onmouseenter" ONEVENT="showSubMenu()" />
   <PUBLIC:ATTACH EVENT="onmouseleave"  ONEVENT="hideSubMenu()"  />
 
   <SCRIPT LANGUAGE="JScript">
    var menuBackground;
    var menuHighLight = 'rgb(255,255,255)'; // 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>

Pensez vous que le probleme vienne du JavaScript : ou du CSS :
Savez vous d'où provient le probleme :

Merki de votre aide
Pepit'

[raptor70]

Ce n'est pas le

Code :

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

1
2
 
"display:table-cell;"

le problème mais :

Code :

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

1
2
 
.menuDeroulant>li

ainsi que :

Code :

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

1
2
 
.menuDeroulant li:hover>ul.sousMenu

[Pepito]

ah ok ok ok ok !!

Est-ce que je dois alors faire deux menus :
- un pour IE que je ferrai en JavaScript
- et garder celui là pour les autres navigateurs :

Meme dans les tutoriels CSS de developpez.com, ils t'apprenent a faire un menu, mais ca marche uniquement sous FF !!
Comment on faisait avant que FF n'existe ?!

Dans le tutorile CSS pour faire le menu, il est dit ceci :
"comme IE Windows n'affichera pas les sous-menu, il y a possibilité d'utiliser des PNG avec transparence alpha."
C'est quoi les PNG a transparence alpha :

Je commence a me dire que le menu compatible FF et IE n'est qu'un mythe d'informaticiens....

Pepit'

[raptor70]

Pour la petite annecdote :

FF a été créé avant IE car FF utilise le moteur de Mozilla Netscape qui a été le premier navigeur WEB (créé par le CERN à Genève tout comme INTERNET...)
Quel copieur ce Bill Gates...

(si je me trompe, faite le moi savoir...)

Pour ton problème, je te conseille de ne faire qu'une version Javascript qui est compatible autant avec FF qu'avec IE..