IE6 + menu qui disparait au contact d'un contenu
Bonjour à tous, difficile d'expliquer le problème qui me tracasse avec Auteur dans un titre donc voici une vrai explication :
J'ai un menu déroulant qui fonctionne parfaitement sous FF et qui marche disons à moitié sous IE6. Le problème est le suivant : lorsque je passe une première fois sur le titre d'un sous menu, celui se déroule mais quand je navigue dans mon sous menu, si celui-ci rencontre du texte ou une image ou un autre contenu, le sous menu disparait. Bcp d'explication à ce problème ont déjà été cherché et rien n'y a fait c'est pourquoi je créé un nouveau topic pour soliciter votre aide maintenant que le problème a été éclairci.
Voici comment se présente la feuille de style font.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
| #idMenu{
position: absolute;
top: 185;
left: 0;
width: 100%;
font-size: 12px;
z-index: 100;
font-family:Verdana;
}
.elementMenu{
float: left;
width: 128px;
text-align: center;
}
.titreMenu{
color: #FFA900;
font-weight: bold;
background-color:#000000;
padding:5px;
margin:0px;
}
div.elementMenu:hover div{
display: block;
}
.sousMenu{
display: none;
margin:0px;
}
.sousMenu p{
padding: 3px;
margin:0px;
margin-top:1px;
background-image:url('images/fondmenu.png');
}
.titreSousMenu{
color: #FFFFFF;
font-weight: bold;
}
a:link, a:visited
{
text-decoration:none;
color: #FFA900;
}
a:hover {
color: #FF5B01;
} |
et voici le code d'une page standard du site, côté client :
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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
| <html>
<head>
<title>
HIT & SPORT 98.4 FM - Des Hits & du Sport !
</title>
<link rel="stylesheet" type="text/css" href="font.css">
<script type="text/javascript">
<!--
function mouseOver(idObj)
{
if (document.all) //test IE
document.getElementById(idObj).style.display = "block";
}
function mouseOut(idObj)
{
if (document.all)
document.getElementById(idObj).style.display = "none";
}
//-->
</script>
<script language="JavaScript">
function openWindow(width,height) {
x = (640 - width)/2, y = (480 - height)/2;
if (screen) {
y = (screen.availHeight - height)/2;
x = (screen.availWidth - width)/2;
}
if (screen.availWidth > 1800) {
x = ((screen.availWidth/2) - width)/2;
}
window.open('live.php','newWin','width='+width+',height='+height+',screenX='+x+',screenY='+y+',top='+y+',left='+x);
}
</script>
</head>
<body>
<IMG SRC="images/bannierehaut.png">
<div id="idMenu">
<div class="elementMenu" onmouseover="mouseOver('idRadio')" onmouseout="mouseOut('idRadio')">
<p class="titreMenu"><a href="id.php">RADIO</a></p>
<div id="idRadio" class="sousMenu">
<p class="titreSousMenu">EMISSIONS</p>
<p><a href="deboutlyon.htm">Debout Lyon</a></p>
<p><a href="denisshow.htm">Le Denis Show</a></p>
<p><a href="leclub.htm">Le Club</a></p>
<p class="titreSousMenu">ANTENNE</p>
<p><a href="progs.php">Grille des programmes</a></p>
<p><a href="animateurs.php">Animateurs</a></p>
<p><a href="redac.php">La Rédac</a></p>
<p><a href="direction.php">La Direction</a></p>
<p><a href="contact.php">Contactez-nous</a></p>
</div>
</div>
<div class="elementMenu">
<p class="titreMenu"><a href="breves.php">BREVES</a></p>
</div>
<div class="elementMenu" onmouseover="mouseOver('idMusique')" onmouseout="mouseOut('idMusique')">
<p class="titreMenu">MUSIC</p>
<div id="idMusique" class="sousMenu" >
<p><a>Ecoutez en live</a></p>
<p><a href="playlist.php">La playlist</a></p>
</div>
</div>
<div class="elementMenu" onmouseover="mouseOver('idSport')" onmouseout="mouseOut('idSport')" >
<p class="titreMenu">SPORT</p>
<div id="idSport" class="sousMenu">
<p class="titreSousMenu">RESULTATS</p>
<p><a href="OL.php">Olympique Lyonnais</a></p>
<p><a href="ASVEL.php">Adecco ASVEL</a></p>
<p><a href="LOU.php">LOU</a></p>
<p><a href="calendrier.php"><b>CALENDRIERS</b></a></p>
<p class="titreSousMenu">LE DIRECT</p>
<p><a href="oldirect.php">Olympique Lyonnais</a></p>
<p><a href="ASVELdirect.php">Adecco ASVEL</a></p>
<p><a href="LOUdirect.php">LOU</a></p>
</div>
</div>
<div class="elementMenu" onmouseover="mouseOver('idBlog')" onmouseout="mouseOut('idBlog')" >
<p class="titreMenu">BLOGS</p>
<div id="idBlog" class="sousMenu">
<p><a href="#">Les blogs</a></p>
<p><a href="forums.php">Les forums</a></p>
<p><A>Le Tchat</a></p>
</div>
</div>
<div class="elementMenu">
<p class="titreMenu"><a href="agenda.php">AGENDA</a></p>
</div>
<div class="elementMenu" onmouseover="mouseOver('idPratique')" onmouseout="mouseOut('idPratique')" >
<p class="titreMenu">PRATIQUE</p>
<div id="idPratique" class="sousMenu">
<p><a href="horoscope.php">Horoscope</a></p>
<p><a href="emplois.php">Emplois</a></p>
</div>
</div>
<div class="elementMenu">
<p class="titreMenu"><a href="photos.php">PHOTOS</a></p>
</div>
</div>
<table border=0 cellpadding=0 cellspacing=5 bgcolor="#FFFFFF" style="margin-top:140px">
<tr>
<td width="200" height="40">
</td>
<td width="449">
<p>SMS</p>
</td>
<td width="150">
<p align="center"><font size="2" color="#0060cd">On air</font>
</td>
<td width="200">
<P align="right">
<object type='application/x-shockwave-flash' data='liveHitSport.swf' width='170' height='70'>
<param name='movie' value='liveHitSport.swf' />
<param name='wmode' value='transparent' />
</object>
</td>
</tr>
</table>
[la suite du contenu]
<table border="0" bgcolor="#000000">
<tr>
<td height="30" width="1019" style="padding:10px">
<p align=center>
<font color="#FFFFFF" size=1 face="Verdana">
Réalisé par <b><a href="http://aprog.free.fr">ghOw</a></b>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html> |
J'ai l'impression qu'il y a un problème de priorité d'apparition du contenu. En clair le contenu sous le menu doit apparaître quoiqu'il arrive si il est survolé. Pourtant j'ai essayé d'appeler le contenu se trouvant sous le menu dans un div et de donner un z-index inférieur à 100 à ce div dans font.css mais ça n'a pas marché non plus, peut être le problème vient du script JS, c'est pourquoi je poste ici mais il vient aussi peut être du CSS, enfin voici un lien vers le topic qui a répondu aux premiers problèmes de mon menu (merci Auteur ;) ) :
http://www.developpez.net/forums/sho...=184541&page=2
Je ne sais plus où chercher pour résoudre le problème. J'utilise IE6, peut être le problème vient aussi de ma version de IE :( Merci tester les scripts avec vos versions de IE poui vérifier si il y a un pb de version. et j'espère que quelqu'un pourra m'aider :?
Merci d'avance
PM
