Probleme avec IE6 et IE7 pour un menu

Version imprimable

Bonjour,

J'ai modifié un <ul> pour faire un menu horizontal, avec des images, un peu comme des icones de bureau sur Windows, ça marche bien sur Opera 10.61, Chrome 5.0.375.127 , Firefox 3.6.8 , IE8, Safari 5.0.1.

Mais sur IE 6et IE7, le menu s'affiche bizarrement, à la verticale.

Qu'est ce que je dois faire pour corriger ça?

Voilà le code:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
...
 
<div class="maincontainer">
	<div id="menu">
		<ul>
			<li><div id="blocenregistrer" class="blocmenu"><a href="./inscription.php" title="S'enregistrer">S'enregistrer</a></div></li>
			<li><div id="blocpasse" class="blocmenu"><a href="#" title="Mot de passe oubli&eacute;?">Mot de passe oubli&eacute;?</a></div></li>
			<li><div id="blocaide" class="blocmenu"><a href="./p_conseils.php" title="Conseils">Conseils</a></div></li>
		</ul>
	</div> 
...
</div>
 
 
 
LE CSS
 
 
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
background-color:#CC2527;
margin-left:auto;
margin-right:auto;
font-size:9pt;
color:#000;
line-height:13pt;
text-align:center;
padding:0;
}
 
ul {
  margin-top: 16px;
  margin-right: 16px;
  margin-bottom: 0px;
  margin-left: 40px;
  padding: 0px;
  list-style: none;
}
 
li {
  float: left;
  margin-left: 50px;
}
 
#menu {
width:931px;
height:64px;
margin-left:-20px;
}
 
.blocmenu {
margin-right:auto;
padding-top:64px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:8pt;
font-weight:700;
text-decoration:none;
}
 
.blocmenu a {
background:#fff;
color:#000;
text-decoration:none;
}
 
.blocmenu a:active {
background:#fff;
color:#CC2527;
}
 
.blocmenu a:hover {
background:#fff;
color:#000;
padding-bottom:2px;
border-bottom:dotted #CC2527;
}
 
#blocenregistrer {
background:url(images/enregistrer.png) no-repeat;
background-position:10px 0px;
text-align:center;
width:84px;
margin-left:230px;
}
 
#blocpasse {
background:url(images/passe.png) no-repeat;
background-position:50px 0px;
text-align:center;
width:164px;
margin-left:auto;
}
 
#blocaide {
background:url(images/aide.png) no-repeat;
text-align:center;
width:64px;
margin-left:auto;
}

04/09/2010, 13h05
Lenézé
Bonjour,

Je te déconseille d'imbriquer des DIVs dans des LIs.
As tu essayer d'appliquer un float left à tes DIVs?
Code:

1 2 3 #menu ul div{ float:left; }
04/09/2010, 20h05
Auteur

Dans ton cas quel est l'intérêt de mettre des div dans des li ? :koi:

Sinon, je ferai la même remarque que Lenézé.
04/09/2010, 23h09
davidkungfu

Les DIV dans les LI c'est pour permettre d'afficher une image individuelle en background sur chaque lien du LI

Sinon, quelle autre méthode me conseilleriez-vous pour faire la même chose?

tu as 3 possibilités :

*utiliser des div

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
<div style="border:none; margin:5px; float:left; background-image:url('images/i1.gif'); width:30px; height:30px"/>
<a href="">Bla bla</a>
</div>
<div style="border:none; margin:5px; float:left; background-image:url('images/i2.gif'); width:30px; height:30px"/>
<a href="">Bla bla</a>
</div>
<div style="border:none; margin:5px; float:left; background-image:url('images/i3.gif'); width:30px; height:30px"/>
<a href="">Bla bla</a>
</div>
<br style="clear:both" />
<div> coucou</div>

Mais tu dois préciser la hauteur et la largeur du div (au moins la largeur) car par défaut le div prend la largeur de la page.

*utiliser une liste

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<div>
<ul>
<li style="border:none; margin:5px; float:left; background-image:url('images/i1.gif');"/>
<a href="">Bla bla</a>
</li>
<li style="border:none; margin:5px; float:left; background-image:url('images/i2.gif');"/>
<a href="">Bla bla</a>
</li>
<li style="border:none; margin:5px; float:left; background-image:url('images/i3.gif');"/>
<a href="">Bla bla</a>
</li>
</ul>
</div>
<br style="clear:both" />
<div> coucou</div>

Il faudra enlever les puces.

*utiliser des liens et des balises img

Code:

1
2
3
4
5
6
7
8
 
 
<div>
<a href="lien"><img src="images/i1.gif" style="border:none">Blabla</a>
<a href="lien"><img src="images/i2.gif" style="border:none">Blabla</a>
<a href="lien"><img src="images/i3.gif" style="border:none">Blabla</a>
<br/>
</div>