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 : 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
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;
}