[CSS] Bug bizarre sous IE mais pas FF

**totofweb** · 12/09/2006, 18h31

Bonjour
Voici la page problématique : www.totofweb.net (la page d'accueil)

Je conçois mon site sous linux et firefox. Je l'ai testé avec FF 1.5, Mozilla 1.7 et Konqueror et tout fonctionne bien. Mais j'ai récemment été voir sous IE et il y a un bug d'affichage : lorsque l'on survole les liens de la colonne centrale, ça dérègle tout d'une manière assez bizarre. Le CSS est valide, le XHTML aussi (si on fait abstraction des erreurs dûes au rajout automatique du numéro de session, ce qui ne dépend pas de moi). Il n'y a rien de spécial dans le CSS qui justifie ça, notament on pourrait croire que ça vient d'un a:hover, mais il ne contient que

Envoyé par http://www.totofweb.net/css/drifting_screen.css

a:hover {
text-decoration:none;
background-color: #EEEEEE;
}

Alors où est l'erreur ? Ou plutôt : comment faire pour que ça s'affiche bien aussi sous IE ?

Merci
Totofweb

**fallais** · 12/09/2006, 19h55

Ah ouai ca c'est du bug

Met nous une balise d'une de tes liens (tout ce qui l'encadre : <p>,<a>,<span>) ainsi que le code CSS complet

**totofweb** · 12/09/2006, 20h08

La structure globale de la page :

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
<!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" xml:lang="fr" lang="fr-FR">
  <head>
    <!-- etc... -->
    <link rel="stylesheet" type="text/css" href="css/drifting_screen.css" media="screen, tv, projection" />
    <!-- etc... -->
  </head>
  <body>
    <div id="layoutBox"><!-- Le cadre principal entourant toute la page -->
      <div id="headerBox"><!-- Ici, l'encadré du haut, avec le titre --></div>
      <div id="menuBox"><!-- Ici le menu de gauche --></div>
      <div id="projectBox"><!-- Ici la colonne de droite --></div>
      <div id="mainContent" style="margin: 10px 16em 0 16em;">
        <!-- Ici la colonne centrale -->
        <h1>Edito</h1>
        <p>Blablablabla</p>
        <p>Un exemple de lien <a href="blabla.php" title="titre"><b>mon lien</b></a>.</p>
        <!-- une image centrée avec un lien -->
        <div style="text-align: center;"><a href="blablabla.php" title="titre"><img src="img.jpg" width="320" height="240" alt="texte alternatif" /></a></div>
        <div class="footer"><!-- des trucs en bas de la page --></div>
      </div>
      <div class="spacer"> </div><!-- Bug fix classique -->
    </div>
  </body>
</html>

Le CSS est dispo ici : http://www.totofweb.net/css/drifting_screen.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
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
/* -- ELEMENT STYLES -- */
 
body {
  font-family: arial, helvetica, arial, sans-serif;
  font-size: 80%;
  color: #234163;
  background-color: #EEF3FA;
  margin: 30px;
}
 
p {
  text-align: justify;
}
 
a {
  color: #5A799D;
}
 
a:hover {
  text-decoration:none;
  background-color: #EEEEEE;
}
 
acronym {
  cursor: help;
  border-bottom: 1px dashed #AAAAAA;
}
 
div.console {
  font-family: Monospace, courrier;
  background: #EEEEEE;
  border: #D1D7DC 1px solid;
  border-left: #D1D7DC 5px solid;
}
 
img {
  border: 0px;
}
 
ul {
  list-style-image: url(../images/design/bullet.gif);
}
 
blockquote {
  background: #EEEEEE;
  border: #D1D7DC 1px solid;
  border-left: #D1D7DC 5px solid;
}
 
blockquote .auteur {
	text-align: right;
	font-size: 90%;
	font-style: italic;
	margin: 0;
	padding: 0;
}
 
table {
  font-size: 90%;
  color: #000000;
}
 
 
/* -- MAIN CONTAINER -- */
 
#layoutBox {
  /*float: left;*/
  border: 1px solid #5A799D;
  background-color: #FFFFFF;
  padding: 10px;
}
 
 
/* -- HEADER CONTAINER -- */
 
#headerBox {
  height: 4em;
  border: 1px solid #5A799D;
  background: #7897BB url(../images/design/hdr_bg.jpg) repeat-x bottom;
}
 
#headerLeftBox {
  float: left;
  width: 60%;
  height:4em;
  background: url(../images/design/hdr_left.jpg) no-repeat bottom left;
  text-align: right;
}
 
#headerRightBox {
  float: right;
  width: 40%;
  height: 4em;
  background: url(../images/design/hdr_right.jpg) no-repeat bottom right;
}
 
 
/* -- HEADER STYLES -- */
 
.title {
  font-family: times new roman, helvetica, arial, sans-serif;
  font-size: 280%;
  font-weight: bold;
  font-style: italic;
  color: #FFFFFF;
  line-height: 0.9em;
}
 
.subTitle {
  font-size: 90%;
  color: #5A799D;
}
 
 
/* -- MENU CONTAINER -- */
 
#menuBox {
  /*float: left;*/
position:absolute;
left:3.2em;
  width: 15em;
  /*margin: 10px 0 0 0;*/
margin-top:10px;
  border-right: 1px solid #5A799D;
  text-align: left;
}
 
#menuBox p {
  margin: 5px 0 10px 2px;
}
 
#menuBox br {
  margin-top: 30px;
}
 
 
#projectBox {
  /*float: right;*/
position:absolute;
right:3.2em;
  width: 15em;
  /*margin: 10px 0 0 0;*/
margin-top:10px;
  border-left: 1px solid #5A799D;
  text-align: left;
}
 
#projectBox p {
  margin: 5px 0 10px 2px;
}
 
#projectBox br {
  margin-top: 30px;
}
 
 
/* -- CONTENT CONTAINER -- */
 
#mainContent {
  /*position:absolute;*/
  /*margin: 10px 16em 0 16em;*/
  border-left: 1px solid #5A799D;
}
 
#mainContent br {
  margin-top: 10px;
}
 
#mainContent p {
  padding: 0px 5px 2px 10px;
}
 
.spacer {
  height: 1px;
  clear: both;
}
 
/* Used by items meant for text only rendering */
 
.noDisplay {
  display: none;
}
 
 
/* -- HEADER/FOOTER STYLES (menuBox & mainContent) -- */
 
#mainContent h1, #menuBox h1, #projectBox h1, .menuFooter, .footer, .h1 {
  font-family: times new roman, helvetica, arial, sans-serif;
  font-size: 125%;
  font-weight: bold;
  letter-spacing: 0.05em;
  color: #5A799D;
  background: #EEF3FA url(../images/design/hdr_icon.gif) no-repeat bottom right;
  border-top: 1px solid #5A799D;
  border-bottom: 1px solid #5A799D;
  display: block;
  padding: 2px 2px 2px 10px;
  margin: 0 0 10px 0;
}
 
#mainContent h1, #projectBox h1, .footer {
  border-right: 1px solid #5A799D;
}
 
.menuFooter, .footer {
  margin-bottom: 0px;
}
 
#menuBox h1, .menuFooter, .h1 {
  border-left: 1px solid #5A799D;
}
 
#mainContent h2, #menuBox h2, #projectBox h2 {
  font-size: 100%;
  font-weight: bold;
  background-color: #EEEEEE;
  display: block;
  padding: 0px 0px 0px 5px;
  margin-bottom: 0px;
}
 
#mainContent h2 {
  margin-left: 10px;
}
 
#mainContent h1, #mainContent h2, .footer {
  clear: right;  /* Set to both if you don't care about Internet Explorer */
}
 
.footer {
  font-family: arial, helvetica, arial, sans-serif;
  font-size: 80%;
  font-weight: normal;
  border-right: 1px solid #5A799D;
  border-left: 0px;
}
 
.footer a:hover {
  background-color: #D6E1F1;
}
 
.footer br {
  margin: -20px;
}
 
 
/* -- MENU/NEWS ITEM STYLES -- */
 
.newsGroup {
  padding: 0px 5px 0px 5px;
  margin-bottom: 30px;
}
 
.menuGroup {
  padding: 5px 0 5px 0;
  margin-bottom: 30px;
}
 
.menuGroup a {
  color: #35567C;
  text-indent: 3em;
  text-decoration: none;
  margin-bottom: 2px;
  display: block;
}
 
.menuGroup a:hover {
  color: #FFFFFF;
  background-color: #5A799D;
}
 
/* -- IMAGE STYLES -- */
 
.imgRight, .imgLeft {
  padding: 10px 5px 5px 10px;
  border: 1px solid #FFFFFF;
}
 
.imgRight {
  float: right;
}
 
/* Below style will not work correctly unless clear = "both" on the
   #mainContent h1, #mainContent h2, .footer class */
 
.imgLeft {
  float: left;
}

**Auteur** · 12/09/2006, 23h53

bonjour,

en ce qui me concerne je n'ai pas de problème (j'ai testé avec IE5). Si ce n'est que le site n'est pas adapté aux basses résolutions (chevauchement des textes).

**totofweb** · 13/09/2006, 17h59

C'est exact, la page d'accueil passe mal en 800x600, mais ça se résoud sans problèmes en changeant la taille de l'image centrale.

Si tu n'as pas de bug, tant mieux pour toi, ça dépend peut-être des versions de IE. Tu es sûr qu'il n'y a rien d'anormal lorsque tu survole les liens de la colonne centrale ? Je tiens à préciser que pour que le problème se fasse voir, il faut que la taille de la fenêtre soit suffisemment grande pour que le bug puisse se fasse voir, soit 1024x768 ou plus.

**Auteur** · 13/09/2006, 20h35

ok, j'ai vu. j'ai augmenté la résolution.

En effet, il y un bug sur les liens du cadre central. Mais il y a plus tordu : passe le curseur sur l'image du pingouin. Le bug s'élimine. Lors du sruvol de l'image, j'ai remarqué qu'un bout de texte caché en partie par l'image prend la place qu'il doit avoir. C'est une piste.

Je regarde ce que tu as fait et je te tiens au courant.

**totofweb** · 13/09/2006, 21h40

Le problème a été résolu. En fait j'éi viré un à un chaque élément de la page jusqu'à trouver ce qui faisait merder : la petite image en float:left; qui était de l'autre côté du texte par rapport au pinguoin était la responsable. Je n'ai pas vraiment compris pourquoi, puisque son css ne comportait que ce float, mais toujours est-il que c'est résolu (et au passage, le site passe maintenant en 800x600 même si ça fait un peu petit...).

[CSS] Bug bizarre sous IE mais pas FF

CSS

Discussions similaires

Partager

Partager