Erreurs d'affichage d'un menu CSS avec IE7
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:
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:
1
2
3
4
|
#menu li ul {
position : absolute;
} |
Ce qui donne ceci, :? c'est toujours pas ça...
Et enfin, j'ai commenté :
Code:
1
2
3
4
5
6
|
/*
#menu li ul {
position : absolute;
}
*/ |
Ce qui donne cela. Et zut :( c'est pire...
Pouvez-vous m'éclairer :roll: ?
Merci d'avance ;)
Voici le code html du menu :
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
|
<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> |
