Le drame IE6

**heavenvibes** · 19/02/2009, 00h46

Bonjour,

je vis actuellement le drame de ma jeune vie de (très) jeune développeur... C'est à dire d'avoir développé une nouvelle interface propre, fonctionnelle, sans javascript (pour l'interface, mais il y en a pour de l'xmlHTTPrequest, et pour des infos-bulles aussi), avec des menus déroulants qui changent en fonction de la page affichée, et qui remplace avantageusement l'ancienne interface qui avait des menus figés et bloquant environ 20% de la largeur de la page.

Bref la cata, IE6 est mon démon depuis toujours, et le restera apparemment encore longtemps, puisque l'entreprise dans laquelle je travaille ne va pas en changer de sitôt.

2 solutions s'offrent à moi:
- Soit je fais marche arrière, je restaure les fichiers d'origine et j'attends que le vent tourne (peut-être l'année prochaine...)
- soit je trouve un moyen de contourner le problème des css dans IE6 et je pourrai alors me consacrer à la suite de mes idées de développement pour ce site intranet.

La 2ème solkution me conviendrais bien évidemment le plus, car dans mon malheur, j'ai appris que le site que je développe avait de très fortes chances d'être retenu comme solution nationale pour mon entreprise. Il s'agit d'un site permettant de visualiser tous les switchs d'une agence, d'agir sur chaque port individuellement ou par lot (désactivation/activation, changement de vlan, activation du trunk et sélection du vlan untagged parmis d'autres vlans qui seront tagged).

Un autre site a été développé dans une autre région, mais beaucoup plus basique puisque quasiment entièrement en mode texte, avec pleins de tableaux remplis de 0 ou de 1 pour indiquer si un port est activé ou non.

Bref, j'ai une épée de Damoclès sur ma pauvre petite tête, et j'aurais bien besoin d'un peu d'aide pour trouver un contournement aux problèmes de CSS avec IE6!!!

Si quelqu'un veut bien prendre le temps d'analyser tout ceci.

J'ai déjà réglé le pb IE7 et d'IE8 dans le CSS en fixant la hauteur des lignes du sousMenu et en mettant un margin à -1px, car IE7/8 sépare chaque ligne du sousMenu par une ligne d'1px d'épaisseur (ou plus), ce qui fait retourner sur la page au lieu de continuer sur le sousMenu, et donc le sousMenu se ferme.

Le problème, c'est qu'avec IE6, aucun sousMenu ne s'affiche, pire, le menu principal s'affiche en mode Block (chaque item un au-dessus de l'autre) plutôt que inline... Par contre, le changement de couleur du texte du menu principal se fait bien au passage de la souris...

Voici le code html/php de la page contenant toutes les autres pages:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<link href="layout_new.css" rel="stylesheet" type="text/css" />
<link href="style.css" rel="stylesheet" type="text/css" />
<link  href="menu_new.css"rel="stylesheet" type="text/css"/>
<title>NETEasy</title>
</head>
<body>
<div class="container">
  <div class="header">
    <a href="index.php" class="logo"><img src="/data/layout/logo.gif" height="46" width="255" alt="logo" /></a>            
  </div>
  <div class="menucontainer">
      <!--<div id="menuleft">-->
    <ul id="menuDeroulantleft">
      <li>
        <a href="#"><b>Menu principal</b></a>
        <ul class="sousMenu">
          <li><a href="index.php?page=ACCUEIL_DETAILS&amp;news_id=13">Antennes</a></li>
          <li><a href="index.php?page=ACCUEIL_DETAILS&amp;news_id=12">Informations</a></li>
          <li><a href="index.php?page=ACCUEIL_DETAILS&amp;news_id=11">Gestion des erreurs...</a></li>
          <li><a href="index.php?page=ACCUEIL_DETAILS&amp;news_id=10">Correction...</a></li>
          <li><a href="index.php?page=ACCUEIL_DETAILS&amp;news_id=9">Suppression...</a></li>
        </ul>
      </li>
    </ul>
    <ul id="menuDeroulantright">
      <li>
        <a href="#"><b>Nouveautés</b></a>
        <ul class="sousMenu">
          <li><a href="index.php?page=ACCUEIL_DETAILS&amp;news_id=13">Antennes...</a></li>
          <li><a href="index.php?page=ACCUEIL_DETAILS&amp;news_id=12">Informations...</a></li>
          <li><a href="index.php?page=ACCUEIL_DETAILS&amp;news_id=11">Gestion des erreurs...</a></li>
          <li><a href="index.php?page=ACCUEIL_DETAILS&amp;news_id=10">Correction...</a></li>
          <li><a href="index.php?page=ACCUEIL_DETAILS&amp;news_id=9">Suppression...</a></li>
        </ul>
      </li>
      <li>
        <a href="#"><b>Nouveautés2</b></a>
        <ul class="sousMenu">
          <li><a href="index.php?page=ACCUEIL_DETAILS&amp;news_id=13">Antennes...</a></li>
          <li><a href="index.php?page=ACCUEIL_DETAILS&amp;news_id=12">Informations...</a></li>
          <li><a href="index.php?page=ACCUEIL_DETAILS&amp;news_id=11">Gestion des erreurs...</a></li>
          <li><a href="index.php?page=ACCUEIL_DETAILS&amp;news_id=10">Correction...</a></li>
          <li><a href="index.php?page=ACCUEIL_DETAILS&amp;news_id=9">Suppression...</a></li>
        </ul>
      </li>
    </ul>
  </div>
  <div class="containercontent">
    <div id="cont_shadow">
      <div id="shadow_top">
      </div>
    </div>
    <div id="CONTENT">
      <div id="pathway"><img src="data/icons/chart_organisation.gif" alt="navi" width="16" height="16" style="vertical-align:text-bottom"/> <strong>Vous êtes ici: </strong> Accueil</div>
 
        <!--CONTENU ICI-->
 
      </div>        
    </div>
  </div>
</div>
</body>
</html>

Et voici le code CSS de la mise en page layout_new.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
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
 
body 
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	margin: 0px;
	padding: 0px;
	background-color: #f6f6f6;
}
 
div 
{
	border-bottom: 0px;
	padding-bottom: 0px;
	margin-bottom: 0px;
	border: 0;
}
 
form 
{
	margin: 0px;
	padding: 0px;
}
 
form img
{
	vertical-align: bottom;
}
 
.container 
{
	width: 100%;
	border: 0;
 
}
 
.header 
{
	height: 48px;
	background-image: url(../../data/layout/header_bg.jpg);
	background-repeat: repeat-x;
}
 
.logo 
{
	width: 366px;
	height: 48px;
	float: left;
}
 
.aide 
{
	float: right;
	width: 230px;
	text-align: right;
	top: 22px;
	position: absolute;
	right: 20px;
	color: #999999;
}
 
.aide input 
{
	background-color: #E0E0E0;
	color: #808080;
	border: 1px solid #808080;
	padding: 2px;
	height: 14px;
}
 
.containercontent 
{
	background-image: url(../../data/layout/content_bgloop.jpg);
	background-repeat: repeat-x;
	padding: 20px;
}
 
#container_login 
{
	float: left;
	text-align: right;
	top: 0px;
	position: absolute;
	left: 300px;
	color: #808080;
 
	background-repeat: no-repeat;
}
 
#logintable 
{
	width: 700px;
}
 
#logintable td 
{
	padding-left: 0px;
	color: #808080;
}
 
#login 
{
	padding-top: 19px;
}
 
#login a 
{
	color: #fff;
}
 
#login .pwdlost 
{
	font-size: 9px;
	color: #808080;
}
 
#login input 
{
	width: 120px;
	background-color: #E0E0E0;
	color: #808080;
	border: 1px solid #808080;
 
}
 
#login img 
{
 
	float: left;
}
 
#footer 
{
	position: fixed;
	bottom: 0;	
	padding: 15px;
	font-size: 10px;
	color: #666666;
}
 
.SUB2 
{
	width: 100%;
}
 
.SUB2 ul 
{
	list-style-position: outside;
	list-style-type: none;
	padding: 0px;
	margin: 0px;
	width: 100%;
}
 
.SUB2  li  a 
{
	font-size: 11px;
	display: block;
	padding-left: 20px;
	padding-top: 5px;
	padding-right: 0px;
	padding-bottom: 5px;
	color: #3F3F3F;
}
 
.SUB2   li  a:hover 
{
	font-size: 11px;
	background-color: #F2F2F2;
	display: block;
}
 
.Sub_Reg 
{
	font-weight: bold;
	color: #FFFFFF;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 15px;
	background-image: url(../../data/layout/subtitle_bg.jpg);
	background-repeat: repeat-x;
	margin-bottom: 5px;
}
 
#pathway {
	font-size: 10px;
	color: #666666;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCCCCC;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
}
 
#pathway2 {
	font-size: 10px;
	color: #666666;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #CCCCCC;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
}
 
.Menu_element {
	margin-bottom: 15px;
}
h1 {
	font-size: 28px;
	color: #333333;
	padding: 0px;
	margin-top: 15px;
	margin-right: 0px;
	margin-bottom: 5px;
	margin-left: 0px;
}
 
h2 {
	font-size: 22px;
	color: #333333;
	padding: 0px;
	margin-top: 15px;
	margin-right: 0px;
	margin-bottom: 5px;
	margin-left: 0px;
}
 
hr {
color: #CCCCCC;
background-color: #CCCCCC;
height: 1px;
border: 0;
}
 
#view_port
{
	/*position: absolute;*/
}
 
.glasspane 
{
	z-index: 32766; 
	position: fixed; 
	opacity: 0.50; 
	background: black; 
	top: 0; 
	left: 0; 
	right: 0; 
	bottom: 0; 
	display: none;
}
 
.modalewindow 
{
	z-index: 32767; 
	position: fixed; 
	background: white; 
	top: 25%; 
	left: 40%; 
	right: 40%; 
	bottom: 25%; 
	border: 1px solid black; 
	padding: 25px;
	display: none; 
}

Ainsi que le code CSS dédié aux menus déroulant, largement inspiré du code de Marc Hertzog que je remercie pour ses explications dans son tutoriel:

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
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
 
 
.menucontainer 
{
	background-image: url(../../data/layout/menu_deroulant.gif);
	background-repeat: repeat-x;
	height: 20px;
	padding: 0px;
}
 
#menusepar 
{
	background-image: url(../../data/layout/underheader_loop.jpg);
	background-repeat: repeat-x;
	height: 4px;
	font-size:0;
}
 
#menuDeroulantleft
{
	z-index: 300;
	position: absolute;
	/*width: 644px;*/
 	height: 18px;
	list-style-type: none;
	margin: 0;
	padding: 0;
	border: 0;
	color: #003366;
	text-align: center;
	width: 575px;
	left: 0;
}
 
#menuDeroulantleft li
{
	overflow: hidden;
 font-weight: bold;
 float: left;
/* width: 170px;*/
 margin: 0;
 padding: 0;
 border: 0;
 color: #003366;
}
 
#menuDeroulantleft .sousMenu
{
 list-style-type: none;
 margin: 0;
 padding: 0;
 border: 0;
 text-align: left;
}
 
#menuDeroulantleft .sousMenu li
{
	/*width: 260px;*/
	overflow: hidden;
 font-weight:normal;
 font-size: 12px;
 
 float: none;
 margin: 0;
 padding: 0;
 border: 0;
}
 
#menuDeroulantleft li a:link, #menuDeroulantleft li a:visited
{
 display: block;
 height: 16px;
 color: #003366;
 /*background: #3399CC;*/
 margin: -1px;
 padding: 3px 10px;
 /*border-right: 1px solid #fff;*/
 text-decoration: none;
}
 
#menuDeroulantleft li a:hover 
{
	/*background-color: #FF6600;*/ 
	color:#336699; 
}
 
/*#menuDeroulant li a:active 
{
	background-color: #CC0000; 
	color:#6699CC 
}*/
 
#menuDeroulantleft .sousMenu li a:link, #menuDeroulantleft .sousMenu li a:visited
{
 display: block;
 color: #000;
 margin: 0;
 border: 0;
 text-decoration: none;
 /*background: transparent url("../../data/layout/fondTR.png") repeat;*/
 background-color: #C0C0C0;
}
 
#menuDeroulantleft .sousMenu li a:hover
{
 background-image: none;
 background-color: #2F4078;
 color: #FFFFFF;
}	
 
#menuDeroulantleft .sousMenu li a:active
{
 background-image: none;
 background-color: #DC1A1A;
 color: #FFFFFF;
}	
 
#menuDeroulantleft .sousMenu li
{
	/*overflow: hidden;*/
 float: none;
 margin: 0;
 padding: 0;
 border: 0;
 width: 200px;
 /*border-top: 1px solid #FFFFFF;
 border-right: 1px solid #FFFFFF;*/
}	
 
#menuDeroulantleft .sousMenu
{
 display: none;
 list-style-type: none;
 margin: 0;
 padding: 0;
 border: 0;
}	
 
#menuDeroulantleft li:hover > .sousMenu 
{ 
	display: block; 
}	
 
 
#menuDeroulantright
{
	position: absolute;
	/*width: 644px;*/
 	height: 20px;
	list-style-type: none;
	margin: 0;
	padding: 0;
	border: 0;
	color: #003366;
	text-align: center;
	right: 0;
	width: 820px;
}
 
#menuDeroulantright li
{
	overflow: hidden;
 font-weight: bold;
 float: right;
 /*width: 150px;*/
 margin: 0;
 padding: 0;
 border: 0;
 color: #003366;
}	
 
#menuDeroulantright .sousMenu
{
	overflow: hidden;
 float: none;
 list-style-type: none;
 margin: 0;
 padding: 0;
 border: 0;
 text-align: left;
}
 
#menuDeroulantright .sousMenu li
{
 /*width: auto;*/
	overflow: hidden;
 font-weight:normal;
 font-size: 12px;
 
 float: none;
 margin: 0;
 padding: 0;
 border: 0;
}	
 
#menuDeroulantright li a:link, #menuDeroulantright li a:visited
{
 display: block;
 height: 16px;
 color: #003366;
 /*background: #3399CC;*/
 margin: -1px;
 padding: 3px 10px;
 /*border-right: 1px solid #fff;*/
 text-decoration: none;
}
 
#menuDeroulantright li a:hover 
{
	 /*background-color: #FF6600;*/ color="#dc1a1a"color="#2f4078"
	 color:#336699; 
}
/*#menuDeroulantright li a:active 
{
	background-color: #CC0000; 
	color:#6699CC 
}*/
 
#menuDeroulantright .sousMenu li a:link, #menuDeroulantright .sousMenu li a:visited
{
 display: block;
 color: #000;
 margin: 0;
 border: 0;
 text-decoration: none;
 /*background: transparent url("../../data/layout/fondTR.png") repeat;*/
 background-color: #C0C0C0;
}
 
#menuDeroulantright .sousMenu li a:hover
{
 background-image: none;
 background-color: #2F4078;
 color: #FFFFFF;
}	
 
#menuDeroulantright .sousMenu li a:active
{
 background-image: none;
 background-color: #DC1A1A;
 color: #FFFFFF;
}	
 
#menuDeroulantright .sousMenu li
{
	overflow: hidden;
 float: none;
 margin: 0;
 padding: 0;
 border: 0;
 width: 260px;
 /*border-top: 1px solid #FFFFFF;
 border-right: 1px solid #FFFFFF;*/
}	
 
#menuDeroulantright .sousMenu
{
 display: none;
 list-style-type: none;
 margin: 0;
 padding: 0;
 border: 0;
}	
 
#menuDeroulantright li:hover > .sousMenu 
{
	display: block; 
}

Je sais que ça fait beaucoup, si vous préférez le code html généré par le php, pas de soucis, je peux le poster.

Je remercie d'avance ceux qui prendront le temps de s'y attarder, ainsi que ceux qui n'ont fait que lire, car il y en a quand même pas mal à lire....

**HiRoN** · 19/02/2009, 10h19

Je sais que ça fait beaucoup, si vous préférez le code html généré par le php, pas de soucis, je peux le poster.

Comme l'indique les règles du forum, merci de fournir le code généré (sans php)...

**heavenvibes** · 19/02/2009, 13h27

Merci pour la remarque, j'ai donc modifié une page générée (j'ai enlevé un maximum de choses qui n'avaient rien à voir avec le problème, essentiellement du contenu, le javascript), j'ai également modifié les chemins d'accès aux fichiers css pour ne pas être obligé de créer les sous-dossiers pour les tests.

J'ai aussi simplifié le menu déroulant afin qu'il n'y ait que 1 menu à gauche, et 2 menu à droite.

Bref, la pafe est dans son plus simple élément, et le problème d'IE6 perdure, donc, j'en suis au même point!!! Mais au moins, c'est plus facile de s'y retrouver pour vous maintenant!!!

Merci d'avance encore une fois!

**Bisûnûrs** · 19/02/2009, 14h21

C'est normal, IE6 ne comprend pas cette instruction :

Code :

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

#menuDeroulantright li:hover > .sousMenu

Tu peux essayer de regarder les menus qu'on propose sur Developpez, qui sont tous crossbrowser :
http://css.developpez.com/galerie/?p...orizontaux#MH1

Après tu n'as plus qu'à modifier l'apparence.

**heavenvibes** · 19/02/2009, 14h29

Merci Bisûnûrs, je vais y retourner pour m'en inspirer je pense, je les avais déjà vu mais je voulais éviter de rajouter du javascript pour la partie menu.

Et il n'y aurait pas possibilité de garder le menu tel quel, et avec un code javascript détecter si on est sous IE6 et activer le script affichant le sousMenu??? Car à priori, s'il n'y a que la partie permettant d'afficher ou non le sousMenu qui ne fonctionne pas sous IE6, on peut peut-être remplacer cette fonction par du JS, non???

**Bisûnûrs** · 19/02/2009, 14h54

Hum .. Je ne connais pas de hack pour ce comportement. Mais après une recherche rapide, tu peux peut-être essayer de t'inspirer de la méthode donnée ici :
http://drupal.org/node/49970

**Ethyde** · 21/02/2009, 10h08

Bonjour,

si tu souhaite ne fournir ton javascript, ou autre, que pour IE 6 tu peut utiliser les commentaires conditionnels. Quelque choses comme :

Code :

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

1
2
3
4
<!--[if lte IE 6]>
   <link rel="stylesheet" href=" " type="text/css" />
   <script src=" " type="text/javascript" language="JavaScript"></script>
<![endif]-->

Les syntaxes de commentaires conditionnels pour IE Windows

Le drame IE6

CSS

Vue hybride

Discussions similaires

Partager

Partager