Discussion :

[randotcom]

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>

[Macmillenium]

Bonjour,

Le problème ne vient pas du positionnement absolute mais du fait que le bloc positionné en absolute n'a pas de référent, c'est à dire, un parent positionné.

Si je pars de cet exemple http://sandbox.perso.sfr.fr/all/

Il faudrait positionner le conteneur <li> en relative afin qu'il soit le référent :

Code css :

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

1
2
3
4
 
#menu li {
position:relative;
}

Ensuite, un petit left:0 sur le menu pour le placer bien à gauche

Code css :

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

1
2
3
4
5
 
#menu li ul {
position : absolute;
left:0;
}

Ceci est valable pour tous les navigateurs et non seulement IE7

Attention toutefois aux commentaires conditionnelles :

Code :

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

<!--[if IE]><link href="ie7.css" rel="stylesheet" type="text/css" media="screen" /><![endif]-->

Là tu touches toutes les versions d'IE y compris IE8 qui a un comportement très proche des navigateurs alternatifs (FF, Opéra, Safari, konqueror etc.)

Penses à cibler uniquement IE7 et versions inférieurs :

Code :

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

<!--[if lte IE 7]><link href="ie7.css" rel="stylesheet" type="text/css" media="screen" /><![endif]-->

[randotcom]

Génial, du coup je n'ai même pas besoin de deux CSS.

Un grand merci Macmillenium

PS : je m'excuse auprès du bonhomme capricieux, je l'ai sous-estimé sur ce coup là