menu qui pose probleme avec ie

**poullot** · 07/03/2012, 17h34

bonjour,

j'ai réalisé un site web pour un ami, quelque chose de simple à la base.

j'ai passé mon site au correcteur wc3 pour corriger les erreurs.

mais j'ai toujours un probleme important.

mon menu apparait bien en horizontal dans tous les navigateurs standards sauf dans IE9 (apparement IE8 ca passe "suivant les PC

)

l'adresse du site http://pascalleray.free.fr/

le code html de la page (mon dwt)

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
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE HTML>
<html lang="fr">
 
<head>
<title>Document sans titre</title>
<meta charset="utf-8">
<!-- TemplateBeginEditable name="doctitle" -->
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<link href="../style/style_08_02_2012_2.css" rel="stylesheet" type="text/css">
<link href="../style/reset.css" rel="stylesheet" type="text/css">
<link href="../style/photo_petit.css" rel="stylesheet" type="text/css">
<link href="../style/tarif.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../scripts/photopetit.js"></script>
<script src="../SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css">
</head>
 
<body>
<div id="page">
  <div id="header">
    <h1 class="titre">Le Roc Celtic </h1>
    <p> Le gîte le Roc Celtique à Saint Quay Portrieux 22410, Cotes d'Armor, Bretagne</p>
 
    <!--menu-->
    <div id="menucomplet">
      <div id="imagemenu">
        <ul>
          <li>
            <div id="bouton1"><img src="../images/images_bouton/phare.png" title="Phare, accueil" alt="" /></div>
          </li>
          <li>
            <div id="bouton2"><img src="../images/images_bouton/mouette.png" title="Mouette" alt="Mouette" /></div>
          </li>        
          <li>
            <div id="bouton6"><img src="../images/images_bouton/appareil_photo.png" title="Photo" alt="Appareil photo" /></div>
          </li>
          <li>
            <div id="bouton3"><img src="../images/images_bouton/ancre.png" title="Ancre" alt="Ancre"/ ></div>
          </li>
          <li>
            <div id="bouton4"><img src="../images/images_bouton/bateau.png" title="Bateau" alt="Bateau" /></div>
          </li>
          <li>
            <div id="bouton5"><img src="../images/images_bouton/coquillage.png" title="Coquillage" /></div>
          </li>
        </ul>
      </div>
      <!--end imagemenu-->
      <div id="menu">
        <div id="menu-left"></div>
        <ul>
          <li>
            <div id="bouton" class="h3"><a href="../index.php">Accueil</a></div>
          </li>
          <li>
            <div id="separator"></div>
          </li>
          <li>
            <div id="bouton" class="h3"><a href="../pages/gite.php">Le gîte</a></div>
          </li>
          <li>
            <div id="separator"></div>
          </li>
                    <li>
            <div id="bouton" class="h3"><a href="../pages/photos.php">Photos</a></div>
          </li>
          <li>
            <div id="separator"></div>
          </li>
 
          <li>
            <div id="bouton" class="h3"><a href="../pages/tarifs.php">Tarifs & disponibilitées</a></div>
          </li>
          <li>
            <div id="separator"></div>
          </li>
          <li>
            <div id="bouton" class="h3"><a href="../pages/acces.php">Accès</a></div>
          </li>
          <li>
            <div id="separator"></div>
          </li>
          <li>
            <div id="bouton" class="h3"><a href="../pages/saint quay portrieux.php">Saint Quay Portieux</a></div>
          </li>
        </ul>
        <div id="menu-right"></div>
      </div>
      <!--end menu--> 
    </div>
    <!--end menucomplet--> 
  </div>
  <!--end header-->
  <div id="containt"><!-- TemplateBeginEditable name="corpcontenu" -->corpcontenu<!-- TemplateEndEditable --> </div>
  <!--end containt-->
  <div id="footer">
    <ul id="info">
      <li> Réalisation & création : Poullot françois </li>
      <li> | </li>
      <li> Contact : <a href="mailto:poullotfrancois@free.fr"><em>poullotfrancois@free.fr</em></a> </li>
      <li> | </li>
      <li> Tout droits réservés </li>
    </ul>
  </div>
  <!--end footer--> 
 
</div>
<!--end page-->
</body>
</html>

mon CSS

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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
html {
	font: 100% Verdana, Geneva, sans-serif;
}
body {
	background: url(../images/bg.jpg) repeat;
	font: 0.85em Verdana, Geneva, sans-serif;
	margin: 0px;
	padding: 0px;
}
#page {
	background: url(../images/bg5.png) repeat;
	height: 1080px;
	width: 960px;
	margin: 15px auto;
	border-top: 1.5px solid #0550FE;
	border-right: 1.5px solid #0550FE;
	border-bottom: 1.5px solid #036;
	border-left: 1.5px solid #036;
	border-radius: 30px;
}
#header {
	position: relative;
	height: 250px;
}
#header .titre {
	text-indent: -9000px;
	display: block;
	background: url(../images/logo.png) no-repeat;
	height: 63px;
	width: 306px;
	position: absolute;
	left: 25px;
	top: 25px;
}
#header p {
	text-indent: -9000px;
}
 
 
/*menu*/
#menucomplet
{	
	height:34px;
	position: absolute;
	left: 25px;
	top: 175px;
}
#header #menucomplet #imagemenu {
	float: left;
}
 
#header #menucomplet #imagemenu ul li #bouton1 {
	height: 62px;
	width: 62px;
	position: absolute;
	left: 15px;
	top: -56px;
}
 
#header #menucomplet #imagemenu ul li #bouton2 {
	height: 44px;
	width: 58px;
	position: absolute;
	left: 105px;
	top: -50px;
}
#header #menucomplet #imagemenu ul li #bouton6 {
	height: 44px;
	width: 58px;
	position: absolute;
	left: 185px;
	top: -53px;
}
 
#header #menucomplet #imagemenu ul li #bouton3 {
	height: 62px;
	width: 62px;
	position: absolute;
	left: 300px;
	top: -45px;
}
#header #menucomplet #imagemenu ul li #bouton4 {
	height: 65px;
	width: 65px;
	position: absolute;
	left: 425px;
	top: -55px;
}
#header #menucomplet #imagemenu ul li #bouton5 {
	height: 62px;
	width: 62px;
	position: absolute;
	left: 540px;
	top: -42px;
}
 
#menu-left
{
	height:34px;
	width:11px;
	float:left;
	background-image:url(../images/menubgleft.png);
	background-repeat:no-repeat;
}
 
#menu-right
{
	height:34px;
	width:11px;
	float:left;
	background-image:url(../images/menubgright.png);
	background-repeat:no-repeat;
}
 
#menu ul
{
	float:left;
	width:650px;
	height:34px;
	list-style-type:none;
	display:block;
	background-image:url(../images/menupixel.png);
	background-repeat:repeat-x;
}
 
#menu ul li
{
	float:inherit;
}
 
/* MENU CLASSE h3 */
 
.h3
{
	text-align:left;
	font: 0.8em Verdana, Geneva, sans-serif;
}
 
.h3 a
{
	text-decoration:none;
	color:#FFFFFF;
}
 
.h3 a:hover
{
	text-decoration:none;
	color:#FF0;
}
 
#menu #separator
{
	height:23px;
	width:2px;
	background-image:url(../images/barreseparation.png);
	background-repeat:no-repeat;
	margin-top:4px;
}
 
 
/* MENU CLASSE BOUTON */
 
#bouton
{
	height:30px;
	margin: 8px 15px 0;
}
#page #containt {
	height: 700px;
	width: 940px;
	margin-right: auto;
	margin-left: auto;
}
#containt .sous_titre {
	background: url(../images/bienvenu.png) no-repeat;
	text-indent: -9000px;
	height: 30px;
	width: 300px;
	margin-right: auto;
	margin-left: auto;
	position: relative;
	top: 15px;
}
#containt .imageentre {
	background: url(../images/photoaccueil_1.png) no-repeat;
	display: block;
	height: 230px;
	width: 310px;
	margin-right: auto;
	margin-left: auto;
	text-indent: -9000px;
	position: relative;
	top: 20px;
}
#containt .texte_accueil {
	width: 600px;
	margin-right: auto;
	margin-left: auto;
	font-size: 1em;
	position: relative;
	top: 60px;
}
#containt .texte_accueil h2 {
	font-size: 1.8em;
	color: #003;
	font-weight: bold;
}
#containt .texte_accueil .adresse {
	font-size: 1em;
	font-style: italic;
}
#containt .texte_accueil .text_accueil {
	font-size: 1.2em;
	color: #000;
	margin: 5px;
	width: 600px;
	position: relative;
	top: 25px;
	line-height: 1.3em;
}
 
 
 
 
 
 
#page #footer {
	height: 130px;
}
#footer #info {
	height: 45px;
	list-style: none;
	margin-left: 25px;
	position: relative;
	top: 100px;
}
#footer #info li {
	float: left;
	color: #CCC;
	font-size: 0.8em;
	margin-right: 5px;
	margin-left: 5px;
}
#footer #info li a {
	text-decoration: none;
	color: #FFF;
}
#footer #info li a:hover
{
	text-decoration: none;
	color: #900;
}

j'ai essayé plusieur fois de la refaire, mon code n'est pas forcement des plus propre alors que mes pages s'affichent correctement sur les autres navigateurs, mais j'ai toujours et encore le même problème de menu sous IE9 et je n'arrive pas à le corriger

j'ai trouvé sur d'autre post ici et ailleur qu'il pouvais s'agir d'un probleme de "left" mais je pense l'avoir bien mit dans mon CSS.

merci si vous avez une idée

**NoSmoking** · 10/03/2012, 11h33

Bonjour,
les ID doivent être UNIQUE et on peut voir pas mal de <div id="separator"></div> ou autre <div id="bouton" dans ton code. Dans ce cas passes par des classes.

Je ne comprends pas trop l'utilité de mettre des DIV dans tes LI

Code html :

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
<!DOCTYPE HTML>
<html lang="fr">
<head>
<base href="http://pascalleray.free.fr/">
<title>Document sans titre</title>
<meta charset="utf-8">
<link href="../style/style_08_02_2012_2.css" rel="stylesheet" type="text/css">
<link href="../style/reset.css" rel="stylesheet" type="text/css">
<link href="../style/photo_petit.css" rel="stylesheet" type="text/css">
<link href="../style/tarif.css" rel="stylesheet" type="text/css">
<style type="text/css">
#menu-left{
  height:34px;
  width:11px;
  float:left;
  background-image:url(../images/menubgleft.png);
  background-repeat:no-repeat;
}
#menu-right{
  height:34px;
  width:11px;
  float:left;
  background-image:url(../images/menubgright.png);
  background-repeat:no-repeat;
}
#menu{
  float:left;
}
#menu ul{
  float:left;
  list-style-type:none;
  background-image:url(../images/menupixel.png);
  background-repeat:repeat-x;
}
#menu ul li a{
  color: #FFF;
  text-decoration:none;
  font-family:Verdana,Geneva,sans-serif;
  font-size:12.8px;
  font-weight:400;
  font-style:normal;
}
#menu ul li {
  cursor: pointer;
  display: block;
  height: 30px;
  line-height:30px;
  min-width:40px;
  padding:0 15px;
  float: left;  /* important */
}
#menu ul li.separator {
  height: 23px;
  margin-top: 4px;
  min-width:2px;
  padding:0;
  background-image: url(../images/barreseparation.png);
  background-repeat: no-repeat;
}
</style>
</head>
<body>
<div id="page">
  <div id="header">
    <h1 class="titre">Le Roc Celtic </h1>
    <p> Le gîte le Roc Celtique à Saint Quay Portrieux 22410, Cotes d'Armor, Bretagne</p>
    <div id="menucomplet">
      <div id="menu-left"></div>
      <div id="menu">
        <ul>
          <li><a href="../index.php">Accueil</a></li>
          <li class="separator"></li>
          <li><a href="../pages/gite.php">Le gîte</a></li>
          <li class="separator"></li>
          <li><a href="../pages/photos.php">Photos</a></li>
          <li class="separator"></li>
          <li><a href="../pages/tarifs.php">Tarifs &amp; disponibilitées</a></li>
          <li class="separator"></li>
          <li><a href="../pages/acces.php">Accès</a></li>
          <li class="separator"></li>
          <li><a href="../pages/saint quay portrieux.php">Saint Quay Portieux</a></li>
        </ul>
      </div>
      <div id="menu-right"></div>
    </div>
  </div>
</div>
</body>
</html>

mince oubli d'envoyer, c'est donc fait...

**kirua99** · 10/03/2012, 20h21

Oui les id doivent être uniques , sinon tu vas avoir des conflits

**poullot** · 11/03/2012, 19h38

bonjour,

merci je vais essayer.

j'utilise les div car plus "facile" et je maitrise pas le css (ni le html

)

et pour mettre les images au dessus comme j'utilise aussi les div c'est ce qui m'avait parus le plus fonctionnel.

je n'ai jamais utilisé les "class" car je sais pas m'en servir.

du coup je viens de me payer une formation à distance.

d'ici 6 /12 mois je devrais y voir plus clair.

merci