Bonjour,

IE7, le mauvais élève qui se trouve au fond de la classe, a de nouveau séché les cours de monsieur CSS.

Me voici confronté à ce capricieux petit bonhomme :

Comment IE7 peut-il interpréter le menu déroulant à la sauce Firefox ?

Voici le code CSS qui fonctionne correctement avec Firefox (aperçu : http://sandbox.perso.sfr.fr/all/

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
 
#menu {
background : transparent url(images/menu.png) no-repeat scroll 0%;
width : 667px;
height : 80px;
padding-left : 66px;
}
#menu ul {
list-style-type : none;
list-style-image : none;
list-style-position : outside;
}
#menu li {
float : left;
width : 100px;
margin : auto;
padding : 0;
}
#menu li a {
width : 100px;
height : 30px;
display : block;
text-align : center;
text-decoration : none;
color : #ffffff;
font-weight : bold;
font-size : 11px;
text-transform : uppercase;
padding-top : 15px;
}
#menu li a:hover {
color : #ffd700;
width : 100px;
height : 30px;
text-decoration : underline;
background : transparent url(images/menu_r.png) repeat-x scroll 0%;
}
#menu ul li ul {
display : none;
background : transparent url(images/submenu_back.png) repeat scroll 0%;
}
#menu ul li:hover ul {
display : block;
}
#menu li:hover ul li {
float : none;
}
#menu li ul {
position : absolute;
}
Ensuite, comme IE7 n'affiche pas correctement la feuille de style ci-dessus, j'ai modifié :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
 
#menu li ul {
position : absolute;
}
Ce qui donne ceci, c'est toujours pas ça...

Et enfin, j'ai commenté :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
 
/*
#menu li ul {
position : absolute;
}
*/
Ce qui donne cela. Et zut c'est pire...

Pouvez-vous m'éclairer ?
Merci d'avance

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
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
		<div id="menu">
			<ul>
				<li><a href="./index.html">Accueil</a></li>
				<li><a href="./production.html">Production</a></li>
				<li><a href="./booking.html">Booking</a>
					<ul>
						<li><a href="yannk.html">Yann K</a></li>
 
						<li><a href="juliennipsen.html">Julien Nipsen</a></li>
						<li><a href="patrickg.html">Patrick G</a></li>
						<li><a href="elenaevans.html">Elena Evans</a></li>
						<li><a href="arno.html">ArnO</a></li>
					</ul>
				</li>
				<li><a href="evenements.html">Événements</a>
 
					<ul>
						<li><a href="anniversaire.html">Anniversaire</a></li>
						<li><a href="mariage.html">Mariage</a></li>
						<li><a href="gala.html">Gala</a></li>
						<li><a href="professionnel.html">Professionnel</a></li>
					</ul>
				</li>
 
				<li><a href="coursmix.html">Leçon de mix</a></li>
				<li><a href="contact.html">Contact</a></li>
			</ul>
		</div>