Décalage entre Firefox et IE

**hexoseth** · 06/03/2008, 19h30

Bonjour,

J'ai un problème d'affichage entre Firefox et IE. voir http://hexoseth.serveftp.org/accueil.php

Le décalage se produit sur IE sur Firefox tout s'affiche bien. J'ai déjà corrigé un écart entre les 2 arrondis du header en appliquant un vertical-align : top

Je vous join les scripts car la j'ai plus d'idées, j'ai vérifié le padding, le margin sans succés.

Merci de votre aide

Le script template

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
 
<div>
 
<table id="up" cellpadding="0" cellspacing="0">
     <tr>
         <td id="domaine"> <a href="http://hexoseth.online.fr" >- hexoseth.serveftp.org -</a> </td>
     </tr>
</table>
 
<table id="page" cellpadding="0" cellspacing="0">
     <tr>
         <td> <img src="/images/space.gif" alt="" id="space" /> </td>
     </tr>
     <tr>
         <td>
             <div>
                 <table id="center" cellpadding="0" cellspacing="0">
                     <tr>
                         <td class="img_bord" > <img src="/images/left.jpg" alt="" /> </td>
                         <td>
                             <table class="box" cellspacing="0" cellpadding="0">
                                 <tr>
                                     <td id="header" colspan="2">
                                         <table class="box" cellpadding="0" cellspacing="0">
                                             <tr>
                                                 <td id="title"> <a href="" title=""></a>HS Pc - Hardware &amp; Software </td>
                                                 <td>banner</td>
                                             </tr>
                                         </table>
                                     </td>
                                 </tr>
                                 <tr>
                                     <td id="search_box"> <div id="search">XXXXXX</div> </td>
                                     <td id="menu_box" > <div id="menu"><?php include "include/menu.inc.php" ?></div> </td>
                                 </tr>
                             </table>
                         </td>
                         <td class="img_bord"><img src="/images/right.jpg" alt="" /></td>
                     </tr>
                 </table>
                 <table id="pathway_box" cellpadding="0" cellspacing="0">
                     <tr>
                         <td id="pathl"></td>
                         <td id="pathway">PathWay</td>
                         <td id="pathright"><div class="date"><?php print("$nbvisites"); ?> visiteurs&nbsp;&nbsp;&nbsp;<?php echo date('d-m-Y'); ?></div></td>
                         <td id="pathr">&nbsp;</td>
                     </tr>
                 </table>
                 <table id="corps_box" cellpadding="0" cellspacing="0">
                     <tr>
                         <td id="corpsl">&nbsp;</td>
                         <td id="menuv"> <div class="leftrow"> menu gauche </div> </td>
                         <td id="main">
						     <div class="main">
                                 <table class="box" cellspacing="0" cellpadding="0">
                                     <tr id="info_box">
                                         <td id="box1" colspan="3px">
                                             <div id="info_client">
                                                 <?php echo "Votre IP : $_SERVER[REMOTE_ADDR].&nbsp;&nbsp;Premi&egrave;re visite le  "; print($_COOKIE["1ere_visite"]); echo ", vous &eacute;tiez le "; print($_COOKIE["id_visite"]); echo " &egrave;me visiteurs."; ?>
                                             </div>
                                         </td>
                                     </tr>
                                     <tr>
                                         <td class="user"> <div> <p>&nbsp;Description page</p> </div> </td>
                                         <td id="spacer"> <div></div> </td> 
                                         <td class="user"> <div> 2 </div> </td>
                                     </tr>
                                     <tr id="user_box">
                                         <td id="usera" colspan="3px">
									         <div class="main">
                                                 Bonjour,<br />
                                                 <br />
                                                 D&eacute;sol&eacute; le site est momentan&eacute;ment indisponible. Je suis actuellement entrain de modifier la pr&eacute;sentation et le fonctionnement du site.
                                                 <br />
                                                 Merci de votre compr&eacute;hention.
                                             </div>
											 Le site a &eacute;t&eacute; valid&eacute; par le W3C, j'avance
                                         </td>
                                     </tr>
                                     <tr id="bas_box">
                                         <td id="bas" colspan="3px"> <div>bas</div> </td>
                                     </tr>
                                 </table>
							 </div>
                         </td>
                         <td id="menug">
                             <div class="rightrow">
                                 droite pub ou autre
                             </div>
                         </td>
                         <td id="bordr">&nbsp;</td>
                      </tr>
                 </table>
                 <table id="footer_box" cellspacing="0" cellpadding="0">
                     <tr>
                         <td class="img_bord" ><img src="/images/left2.jpg" alt="" /></td>
                         <td>
                             <table class="box" cellspacing="0" cellpadding="0">
                                 <tr>
                                     <td id="topl"><a href=""><img src="/images/ltop.jpg" alt="Top!" class="button" /></a> </td>
                                     <td align="center"><div class="footer">
                                         <a href="http://www.mamboteam.com">Design by Mamboteam.com!</a></div>
									 </td>
                                     <td id="topr"><a href=""><img src="/images/rtop.jpg" alt="Top!" class="button" /></a></td>
                                 </tr>
                             </table>
                         </td>
                         <td class="img_bord"><img src="/images/right2.jpg" alt="" /></td>
                     </tr>
                 </table>
             </div>
         </td>
     </tr>
  </table>
</div>

Le script 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
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
 
body {
	color			: #000000;
	padding			: 0px;
	margin-left		: 20px;
	margin-right		: 20px;
	margin-bottom		: 20px;
	font-size		: 12px;
	font-family		: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	background-color	: #ffffff;
}
 
#up {
	width			: 100%;
	height			: 20px;
	border			: 0;
	text-align		: center;
}
 
#domaine {
	color			: #eaeaea;
	font-size		: 12px;
	font-weight		: normal;
	font-family		: Verdana, Geneva, Arial, Helvetica, sans-serif;
}
 
#domaine a:link, #domaine a:visited {
	color			: #eaeaea;
	font-size		: 9px;
	font-weight		: bold;
	text-decoration		: none;
}
 
#domaine a:hover {
	color			: #eaeaea;
	font-size		: 9px;
	font-weight		: bold;
	text-decoration		: none;
}
 
#page {
	width			: 100%;
	border			: 0;
	text-align		: center;
}
 
#space {
	width			: 770px;
	height			: 1px;
}
 
#center {
	width			: 100%;
	border			: 0;
	background-image	: url(/images/center.jpg);
}
 
.img_bord {
	width			: 26px;
	border			: 0;
	vertical-align		: top;
}
 
.box {
	width			: 100%;
	border			: 0;
}
 
#header {
	color			: #000000;
	width			: 100%;
	height			: 100px;
	font-size		: 18px;
	font-weight		: bold;
	font-family		: Verdana, Geneva, Arial, Helvetica, sans-serif;
	padding-top		: 14px;
	text-align		: left;
	text-indent		: 8px;
	text-transform		: uppercase;
}
 
#header a:link, #header a:visited {
	color			: #f2f2f2;
	font-size		: 20px;
	font-weight		: bold;
	text-decoration		: none;
}
 
#header a:hover {
	color			: #f2f2f2;
	font-size		: 20px;
	font-weight		: bold;
	text-decoration		: none;
}
 
#title {
	width			: 100%;
	padding-left		: 10px;
}
 
#search_box {
	width			: 400px;
	height			: 29px;
}
 
#search {
	float			: left;
	width			: 125px;
	height			: 16px;
	border			: 1px solid #cccccc;
	padding			: 0px;
	overflow		: hidden;
	margin-top		: 5px;
}
 
#menu_box {
	width			: 100%;
 
}
 
#menu{
	color			: red;
	height			: 29px;
	font-size		: 20px;
	font-weight		: normal;
}
 
#menu ul {
	float			: left;
	height			: 29px;
	margin			: 0px;
	list-style		: none;
	padding-left		: 0px;
	padding-top		: 0;
}
 
#menu li {
	display			: inline;
	height			: 15px;
	padding-top		: 0px;
	padding-left		: 15px;
}
 
#pathway_box {
	width			: 100%;
	border			: 0;
	text-align		: center;
}
 
#pathl {
	width			: 11px;
	height			: 25px;
	background-image	: url(/images/shadowl.jpg);
}
 
#pathway {
	height			: 25px;
	text-align		: left;
	border-top		: 5px solid #ffffff;
	border-bottom		: 1px solid #999999;
	padding-left		: 5px;
	background-color	: #f1f1f1;
}
 
#pathright {
	height			: 25px;
	text-align		: right;
	border-top		: 5px solid #ffffff;
	border-bottom		: 1px solid #999999;
	background-color	: #f1f1f1;
}
 
.date {
	font-size		: 12px;
	color			: #700000;
	padding-right		: 10px;
}
 
#pathr {
	width			: 11px;
	height			: 25px;
	text-align		: right;
	background-image	: url(/images/shadowr.jpg);
}
 
#corps_box {
	width			: 100%;
	border			: 0;
	text-align		: center;
}
 
#corpsl {
	padding-left		: 8px;
	vertical-align		: top;
	background-image	: url(/images/shadowl.jpg);
	background-repeat	: repeat-y;
}
 
#menuv {
	width			: 168px;
	vertical-align		: top;
	background-image	: url(/images/lb.gif);
	background-repeat	: repeat-y;
}
 
.leftrow {
	background-color	: #f1f1f1; 
	width			: 168px;
	height			: 100%;
	margin-right		: 5px;
}
 
 
#main {
	width			: 100%;
	vertical-align		: top;
	background-color	: #fafafa;
}	
 
.main { 
	float			: left; 
	width			: 100%;
	margin			: 0px; 
	padding			: 0px;
	background-color	: #ee9999;
}
 
#info_box {
	vertical-align		: top;
	background-color	: #f1f1f1;
}
 
#box1 {
	border-top		: 3px solid #ffffff;
}
 
.user {
	border-top		: 3px solid #ffffff;
	vertical-align		: top;
	background-color	: #f1f1f1;
 
}
 
#spacer {
	width			: 4px;
	border-top		: 3px solid #ffffff;
	vertical-align		: top;
	background-color	: #fefefe;
}
 
#user_box {
	text-align		: left;
	vertical-align		: top;
}
 
#usera {
	padding			: 5px;
	border-top		: 4px solid #ffffff;
}
 
#bas_box {
	background-color	: #f1f1f1;
}
 
#bas {
	border-top		: 3px solid #ffffff;
	vertical-align		: top;
}
 
#menug {
	width			: 168px;
	vertical-align		: top;
	background-image	: url(/images/rb.gif);
	background-repeat	: repeat-y;
}
 
.rightrow {
	width			: 168px;
	height			: 100%;
	text-align		: right;
	margin-left		: 5px;
	background-color	: #f1f1f1;
}
 
#bordr {
	padding-right		: 8px;
	vertical-align		: top;
	background-image	: url(/images/shadowr.jpg);
	background-repeat	: repeat-y;
}
 
#footer_box {
	width			: 100%;
	border			: 0;
	background-image	: url(/images/center2.jpg);
}
 
.button {
	border			: 0;
}
 
#topl {
	width			: 30px;
	text-align		: left;
}
 
#topr {
	width			: 30px;
	text-align		: right;
}
 
.valid_w3c {
	width			: 88px;
	height			: 31px;
	border			: 0;
}
 
.validation {
	width			: 100%;
	text-align		: center;
}
 
 
 
 
 
 
 
 
td, tr, p, div {
  font-family      : Arial, Helvetica, sans-serif;
  font-size        : 12px;
  color            : #333333;
}
 
hr {
  color            : #999999;
  height           : 1px;
  width            : 100%;
}
 
a:link, a:visited {
  font-size        : 11px;
  color            : #990099;
  text-decoration  : none;
  font-weight      : bold;
}
a:hover {
  font-size        : 11px;
  color            : #333333;
  text-decoration  : none;
  font-weight      : bold;
}
 
.footer a:link, .footer a:visited {
  font-size        : 11px;
  color            : #f5f5f5;
  text-decoration  : none;
  font-weight      : bold;
}
.footer a:hover {
  font-size        : 11px;
  color            : #333333;
  text-decoration  : none;
  font-weight      : bold;
}

**Halleck** · 07/03/2008, 09h29

on voudrait bien t'aider mais il y a un htaccess sur ton lien, on peut pas afficher la page sans les mots de passe

Authorization Required...

**Deallyra** · 07/03/2008, 09h37

xD +1

mais à tout hasard, met ça dans ton css... je sais pas si ça corrigera...

Code :

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

1
2
3
4
5
6
 
*
{
margin : 0;
padding : 0;
}

tu as dit l'avoir essayé mais sous cette forme ou sur un # ou . ?

**hexoseth** · 07/03/2008, 13h58

J'ai autoriser les access à la page.

Pour

Code :

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

1
2
3
4
5
6
 
*
{
margin : 0;
padding : 0;
}

J'avais déjà essayer. Maintenant que vous pouvez allez voir sa vous donnera une petite idée.

**Deallyra** · 07/03/2008, 15h02

ok...
atta je regarde un truc rapide...

**Deallyra** · 07/03/2008, 15h08

hala...
un petit joujou pour toi

Code :

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

1
2
3
4
5
6
7
 
		<!--[if IE]>
			<style type="text/css"> 
				/* placer les corrections pour toutes les version d'IE dans ce commentaire conditionnel */
				*{ zoom : 1;}
			</style>
		<![endif]-->

du vieux code ^^
mais qui marche

**hexoseth** · 07/03/2008, 15h25

C'est bien jolie se petit bout de code mais sa ne va pas m'aidé car si je veux mettre les petit bout de code qui pose problème encore faudrai t il que je sache lesquelles.

**Deallyra** · 07/03/2008, 15h29

agrandit la taille de ton bandeau et regarde si ca marche...
bidouille un peu quoi

**hexoseth** · 07/03/2008, 15h49

Sa fait deux jour que je bosse dessus. J'ai vérifié les padding margin j'en ai ajouter modifier, j'ai mis des dimensions enlevé d'autre, les div aussi y sont passé le css complet. Et la je vois pas je suis pas du genre à baissé les bras je continu encore en ce moment même de trouver la soluce.

Petite info si sa peu aidé mon menu est dans une div lorsque je modifie la hauteur de la cellule celui-ci le menu ne bouge bas. A priori il reste a la même place et donc on ne le voit plus.

Dans le header descend plus bas que ce qu il devrai sous IE mais rien a faire.

Si je m'en remet a votre aide c'est pour avoir un point de vu exterieur car j'ai peu être oublié quelque chose.

**Deallyra** · 07/03/2008, 16h02

ce que tu faisais, c'est essayer de trouver une solution conjointe à IE et firefox...
Sur firefox, tu as un style qui te convient et, par chance, il existe un commentaire conditionnel qui ne fonctionne que sous IE ^^
c'est une nouvelle base de départ