[HTML] problème avec différents clients mail

**torn33260** · 03/04/2008, 10h37

Bonjour, j'ai un problème.

Je viens de creer une petite page html toute simple :

http://www.egeo.fr/ftp/mail.html

et quand on l'ouvre avec opera ou mozilla firefox la page est correctement envoyer graphiquement

Cependant avec internet explorer la mise en page est bouleversé... Que puis je faire pour cela? Merci

**Deallyra** · 03/04/2008, 10h52

Bonjour,

Donnes nous le code pour commencer

Je vois deux différences.

Ton texte en bleu après la bannière qui n'est plus centré.

Utilises tu un div? Si oui, margin : 0 auto dans un div
en bas, ton image/bouton est décalée vers la gauche.

**torn33260** · 03/04/2008, 11h26

l'entete en bleu est décalalé

le texte dans le cadre est alignés a gauche
le bouton tend vers la gauche

Mon 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
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
<html>
<head>
  <meta http-equiv="Content-Type"
 content="text/html; charset=ISO-8859-1">
  <title>delegation de cadres en temps partage</title>
</head>
<body>
<center>
<div style="text-align: center;"><font color="#000000"
 face="verdana" size="1"><br>
<br>
</font></div>
<table
 style="border: 1px solid black; font-family: Arial,Helvetica,sans-serif; font-size: 12px; color: rgb(51, 51, 51); text-align: justify; width: 653px; height: 928px;"
 cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td style="width: 381px;" colspan="2"><img
 style="width: 800px; height: 298px;" alt=""
 src="mailling/images/header.png"></td>
    </tr>
    <tr style="color: rgb(51, 51, 255);">
      <td colspan="2"
 style="padding: 15px 15px 10px; font-size: 20px; font-weight: bold; text-align: center; width: 381px;">Avec
EGEO externalisez vos fonctions support<br>
      <small>- Informatique, Qualit&eacute;
S&eacute;curit&eacute; Environnement, Marketing -</small><br>
au Juste Co&ucirc;t, au Juste Temps !<br>
      </td>
    </tr>
    <tr>
      <td><br>
      <br>
      </td>
      <td></td>
    </tr>
    <tr>
      <td style="padding: 20px 20px 20px 30px; width: 381px;">Un
collaborateur EGEO, sp&eacute;cialiste en informatique, QSE,
marketing
/ commercial intervient dans votre entreprise selon votre convenance
(1,
2, 3 jours ou plus par semaine,
par mois) pour mener &agrave; bien le projet confi&eacute; tel
que :</td>
      <td
 style="vertical-align: top; text-align: left; line-height: 22px; padding-left: 4px; padding-top: 15px; padding-bottom: 5px; width: 160px; background-color: rgb(23, 228, 255); height: 200px;"
 rowspan="10" colspan="1">
      <div style="text-align: center;"><strong>Vos
avantages EGEO,<br>
prestataire de services :</strong><br>
      <strong></strong></div>
      <strong> <br>
      </strong>&bull;&nbsp;
&nbsp; pas de frais de recrutement, pas de co&ucirc;t salariaux<br>
&bull;&nbsp; &nbsp;co&ucirc;t limit&eacute;
&agrave; la dur&eacute;e de la mission<br>
&bull;&nbsp; &nbsp;souplesse du contrat<br>
&bull;&nbsp; &nbsp;pertinance d'un oeil externe<br>
      <br>
      <br>
      <br>
      <div style="text-align: center;"><span
 style="font-weight: bold;">RESULTATS: Dotez-vous de
comp&eacute;tances&nbsp;expertes pour un co&ucirc;t</span><br>
      <span style="font-weight: bold;">&nbsp;ma&icirc;tris&eacute;
et consacrez vous &agrave; 100% &agrave; vos clients et votre
m&eacute;tier !</span></div>
      </td>
    </tr>
    <tr>
      <td style="padding: 5px 20px 3px 30px; width: 381px;"><img
 style="width: 8px; height: 8px;" alt=""
 src="mailling/images/pus.jpg"> Vous
devez &eacute;valuer les risques professionnels dans votre
soci&eacute;t&eacute; <br>
&nbsp; &nbsp; &nbsp; &nbsp; <img
 style="width: 17px; height: 14px;" alt=""
 src="mailling/images/fle.jpg"><span
 style="font-weight: bold;">Nous vous accompagnons</span>
pour
r&eacute;diger le document unique</td>
    </tr>
    <tr>
      <td style="padding: 5px 20px 3px 30px; width: 381px;"><img
 style="width: 8px; height: 8px;" alt=""
 src="mailling/images/pus.jpg"> Vous souhaitez
r&eacute;pondre aux normes ISO 9001, UIC, MASE, ...<br>
&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<img
 style="width: 17px; height: 14px;" alt=""
 src="mailling/images/fle.jpg"><span
 style="font-weight: bold;">Nous</span><span
 style="font-weight: bold;"> vous accompagnons</span>
dans la d&eacute;marche de certification<br>
      </td>
    </tr>
    <tr>
    </tr>
    <tr>
    </tr>
    <tr>
    </tr>
    <tr>
      <td style="padding: 5px 20px 3px 30px; width: 381px;"><img
 style="width: 8px; height: 8px;" alt=""
 src="mailling/images/pus.jpg">&nbsp;Face &agrave; la
mont&eacute;e des virus, spams, vous souhaitez s&eacute;curiser
votre parc informatique<br>
&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<img
 style="width: 17px; height: 14px;" alt=""
 src="mailling/images/fle.jpg"><span
 style="font-weight: bold;">Nous </span><span
 style="font-weight: bold;">vous accompagnons&nbsp;</span>pour
assurer vos sauvegardes </td>
    </tr>
    <tr>
      <td style="padding: 5px 20px 3px 30px; width: 381px;"><img
 style="width: 8px; height: 8px;" alt=""
 src="mailling/images/pus.jpg"> Vous et vos collaborateurs
voulez acc&eacute;der facilement &nbsp;&agrave; toutes
informations et documents informatiques<br>
&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<img
 style="width: 17px; height: 14px;" alt=""
 src="mailling/images/fle.jpg"><span
 style="font-weight: bold;">Nous </span><span
 style="font-weight: bold;">vous accompagnons </span>pour
b&acirc;tir votre r&eacute;seau informatique </td>
    </tr>
    <tr>
      <td style="padding: 5px 20px 3px 30px; width: 381px;"><img
 style="width: 8px; height: 8px;" alt=""
 src="mailling/images/pus.jpg"> Vous souhaitez trouver de
nouveaux clients pour augmenter votre chiffre d'affaires<br>
&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<img
 style="width: 17px; height: 14px;" alt=""
 src="mailling/images/fle.jpg"><span
 style="font-weight: bold;">Nous </span><span
 style="font-weight: bold;">vous accompagnons </span>pour
mettre &nbsp;en place des&nbsp;actions commerciales
adapt&eacute;es &agrave;
votre &nbsp;activit&eacute; ( portes ouvertes, promotion,
mailing, ...) </td>
    </tr>
    <tr>
      <td style="padding: 5px 20px 3px 30px; width: 381px;"><img
 style="width: 8px; height: 8px;" alt=""
 src="mailling/images/pus.jpg"> Vous souhaitez apporter un
soutien &agrave; vos commerciaux<br>
&nbsp;&nbsp;&nbsp;<img style="width: 17px; height: 14px;"
 alt="" src="mailling/images/fle.jpg"><span
 style="font-weight: bold;">Nous </span><span
 style="font-weight: bold;">vous accompagnons&nbsp;</span>dans
la conception d'argumentaires, fiches produits, catalogues, ... </td>
    </tr>
    <tr>
      <td><br>
      <br>
      </td>
      <td></td>
    </tr>
    <tr>
      <td colspan="1" rowspan="1"
 style="padding: 5px 20px 3px 30px; width: 648px;"><br>
      <span style="font-style: italic; font-weight: bold;">Profitez
de notre offre en b&eacute;n&eacute;ficiant <span
 style="text-decoration: underline;">d'un audit gratuit</span>
sur une des fonctions support !<br>
      <br>
      </span>Si vous souhaitez en savoir plus, contactez-nous !<br>
      <br>
      <br>
      </td>
      <td style="text-align: center;" rowspan="3"
 width="259">&nbsp;<img src="mailling/images/logo.gif"
 alt="" style="width: 150px; height: 120px;"></td>
    </tr>
    <tr>
    </tr>
    <tr>
    </tr>
    <tr>
    </tr>
    <tr>
      <td style="text-align: center; width: 648px;"
 colspan="2" rowspan="1"><a
 href="renseignement.html"><img
 style="border: 0px solid ; width: 203px; height: 126px;" alt=""
 src="mailling/images/btn1.png"></a></td>
    </tr>
    <tr>
      <td style="width: 648px;" colspan="2"
 align="center" valign="top"><img
 src="mailling/images/barre.jpg" alt=""
 style="width: 800px; height: 19px;" align="top"></td>
    </tr>
  </tbody>
</table>
<br>
<font face="Arial" size="1"> Publicit&eacute;
sans obligation de consultation, ni d'achat,&nbsp;
destin&eacute;e aux
soci&eacute;t&eacute;s et aux professionnels.<br>
Soci&eacute;t&eacute; EGEO 55Bis rue Camille Pelletan 33150
Cenon &nbsp;<br>
Tel. : 05 56 32 92 00 &nbsp; Fax : 05 56 32 85 55<br>
<br>
Si vous souhaiter ne plus recevoir de mail de la part de egeo <a
 href="desinscription.html">informer nous en ici</a><br>
</font></center>
</body>
</html>

Merci de ton aide

**Deallyra** · 03/04/2008, 12h00

Pourquoi ton code est découpé comme ça?

sinon, tu as des balises bbcode pour mettre en évidence ton code.
le bouton lors de l'édition est #

je regarde donc code et le réindente.

Sinon, je viens de voir que tu utilisais la balise centrer... elle n'est plus recommandée.

**Deallyra** · 03/04/2008, 12h35

Bon...

J'ai réindenté tout ton code..

Les tableaux ne servent pas à faire de mise en page.
http://pbnaigeon.developpez.com/tuto...e-en-page-CSS/

Si tu utilises des tableaux, il existe les attributs rowspan et colspan qui permettent de fusionner des lignes/colonnes.

La balise center est dépréciée.

Tout tes styles doivent être dans une feuille CSS

Et surtout, indentes ton code! Meilleure lecture de la part des autres, on n'aura pas à perdre 23 minutes pour savoir comment est constitué ton code...

Moi là, je passe la main

Je ne peux pas te dire quoi faire alors que ta mise en page via un tableau complique le tout ^^
enfin peut etre que quelqu'un se penchera sur cet aspect.

Pour ceux qui suivront, voici le code indenté

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
 
<!--doctype??? -->
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
		<title>delegation de cadres en temps partage</title>
	</head>
	<body>
		<center> <!--cette balise n'est plus indiquée pour centrer des éléments. Il faut voir les propriétés css margin-->
			<div style="text-align: center;">
				<font color="#000000"face="verdana" size="1">
					<br>
					<br>
				</font>
			</div>
 
			<!-- pourquoi donner un style à des break space? -->
			<table style="border: 1px solid black; font-family: Arial,Helvetica,sans-serif; font-size: 12px; color: rgb(51, 51, 51); text-align: justify; width: 653px; height: 928px;" cellpadding="0" cellspacing="0">
			<!-- mettre ton style dans une feuille css appelée via <link rel = "stylesheet" type = "text/css" href = "_Style/Feuille_De_Style.css" /> -->
				<tbody>
					<tr>
						<td style="width: 381px;" colspan="2">
							<img style="width: 800px; height: 298px;" alt="" src="mailling/images/header.png">
						</td>
					</tr>
					<tr style="color: rgb(51, 51, 255);">
						<td colspan="2" style="padding: 15px 15px 10px; font-size: 20px; font-weight: bold; text-align: center; width: 381px;">
							Avec EGEO externalisez vos fonctions support
							<br>
							<small>- Informatique, Qualit&eacute;S&eacute;curit&eacute; Environnement, Marketing -
							</small>
							<br>
							au Juste Co&ucirc;t, au Juste Temps !
							<br>
						</td>
					</tr>
					<tr>
						<td>
							<br>
							<br>
						</td>
						<td>
						</td>
					</tr>
			<!-- renseigne toi sur colspan et rowspan -->
					<tr>
						<td style="padding: 20px 20px 20px 30px; width: 381px;">
							Un collaborateur EGEO, sp&eacute;cialiste en informatique, QSE,marketing/ commercial intervient dans votre entreprise selon votre convenance(1,2, 3 jours ou plus par semaine,par mois) pour mener &agrave; bien le projet confi&eacute; telque :
						</td>
						<td style="vertical-align: top; text-align: left; line-height: 22px; padding-left: 4px; padding-top: 15px; padding-bottom: 5px; width: 160px; background-color: rgb(23, 228, 255); height: 200px;" rowspan="10" colspan="1">
							<div style="text-align: center;">
								<strong>
									Vos avantages EGEO,
									<br>
									prestataire de services :
								</strong>
								<br>
								<strong>
								</strong>
			<!-- Utilité de ton <strong> ? -->
							</div>
							<strong> 
								<br>
							</strong>
							&bull;&nbsp;&nbsp; pas de frais de recrutement, pas de co&ucirc;t salariaux
							<br>
							&bull;&nbsp; &nbsp;co&ucirc;t limit&eacute;&agrave; la dur&eacute;e de la mission
							<br>
							&bull;&nbsp; &nbsp;souplesse du contrat
							<br>
							&bull;&nbsp; &nbsp;pertinance d'un oeil externe
							<br>
							<br>
							<br>
							<br>
							<div style="text-align: center;">
								<span style="font-weight: bold;">
									RESULTATS: Dotez-vous de comp&eacute;tances&nbsp;expertes pour un co&ucirc;t
								</span>
								<br>
								<span style="font-weight: bold;">
									&nbsp;ma&icirc;tris&eacute;et consacrez vous &agrave; 100% &agrave; vos clients et votre m&eacute;tier !
								</span>
							</div>
						</td>
					</tr>
					<tr>
						<td style="padding: 5px 20px 3px 30px; width: 381px;">
							<img style="width: 8px; height: 8px;" alt="" src="mailling/images/pus.jpg"> 
							Vous devez &eacute;valuer les risques professionnels dans votre soci&eacute;t&eacute; 
							<br>
							&nbsp; &nbsp; &nbsp; &nbsp; 
							<img style="width: 17px; height: 14px;" alt="" src="mailling/images/fle.jpg">
								<span style="font-weight: bold;">
									Nous vous accompagnons
								</span>
								pour r&eacute;diger le document unique
						</td>
					</tr>
					<tr>
						<td style="padding: 5px 20px 3px 30px; width: 381px;">
							<img style="width: 8px; height: 8px;" alt="" src="mailling/images/pus.jpg"> 
							Vous souhaitez r&eacute;pondre aux normes ISO 9001, UIC, MASE, ...
							<br>
							&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;
							<img style="width: 17px; height: 14px;" alt="" src="mailling/images/fle.jpg">
							<span style="font-weight: bold;">
								Nous
							</span>
							<span style="font-weight: bold;"> 
								vous accompagnons
							</span>
							dans la d&eacute;marche de certification
							<br>
						</td>
					</tr>
					<tr>
					</tr>
					<tr>
					</tr>
					<tr>
					</tr>
					<tr>
			<!-- colspan et rowspan! -->
						<td style="padding: 5px 20px 3px 30px; width: 381px;">
							<img style="width: 8px; height: 8px;" alt="" src="mailling/images/pus.jpg">
							&nbsp;Face &agrave; la mont&eacute;e des virus, spams, vous souhaitez s&eacute;curiser votre parc informatique
							<br> 
							&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;
							<img style="width: 17px; height: 14px;" alt="" src="mailling/images/fle.jpg">
							<span style="font-weight: bold;">
								Nous 
							</span>
							<span style="font-weight: bold;">
								vous accompagnons&nbsp;
							</span>
							pour assurer vos sauvegardes 
						</td>
					</tr>
					<tr>
						<td style="padding: 5px 20px 3px 30px; width: 381px;">
							<img style="width: 8px; height: 8px;" alt="" src="mailling/images/pus.jpg"> 
							Vous et vos collaborateurs voulez acc&eacute;der facilement &nbsp;&agrave; toutes informations et documents informatiques
							<br>
							&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;
							<img style="width: 17px; height: 14px;" alt="" src="mailling/images/fle.jpg">
							<span style="font-weight: bold;">
								Nous 
							</span>
							<span style="font-weight: bold;">
								vous accompagnons 
							</span>
							pour b&acirc;tir votre r&eacute;seau informatique 
						</td>
					</tr>
					<tr>
						<td style="padding: 5px 20px 3px 30px; width: 381px;">
							<img style="width: 8px; height: 8px;" alt="" src="mailling/images/pus.jpg"> 
							Vous souhaitez trouver de nouveaux clients pour augmenter votre chiffre d'affaires
							<br> 
							&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;
							<img style="width: 17px; height: 14px;" alt="" src="mailling/images/fle.jpg">
							<span style="font-weight: bold;">
								Nous 
							</span>
							<span style="font-weight: bold;">
								vous accompagnons 
							</span>
							pour mettre &nbsp;en place des&nbsp;actions commerciales adapt&eacute;es &agrave; votre &nbsp;activit&eacute; ( portes ouvertes, promotion, mailing, ...) 
						</td>
					</tr>
					<tr>
						<td style="padding: 5px 20px 3px 30px; width: 381px;">
							<img style="width: 8px; height: 8px;" alt="" src="mailling/images/pus.jpg"> 
							Vous souhaitez apporter un soutien &agrave; vos commerciaux
							<br>
							&nbsp;&nbsp;&nbsp;
							<img style="width: 17px; height: 14px;" alt="" src="mailling/images/fle.jpg">
							<span style="font-weight: bold;">
								Nous 
							</span>
							<span style="font-weight: bold;">
								vous accompagnons&nbsp;
							</span>
							dans la conception d'argumentaires, fiches produits, catalogues, ... 
						</td>
					</tr>
					<tr>
						<td>
							<br>
							<br>
						</td>
						<td>
						</td>
					</tr>
					<tr>
						<td colspan="1" rowspan="1" style="padding: 5px 20px 3px 30px; width: 648px;">
							<br>
							<span style="font-style: italic; font-weight: bold;">
								Profitez de notre offre en b&eacute;n&eacute;ficiant 
								<span style="text-decoration: underline;">
									d'un audit gratuit
								</span>
								sur une des fonctions support !
								<br>
								<br>
							</span>
							Si vous souhaitez en savoir plus, contactez-nous !
							<br>
							<br>
							<br>
						</td>
						<td style="text-align: center;" rowspan="3" width="259">
							&nbsp;
							<img src="mailling/images/logo.gif" alt="" style="width: 150px; height: 120px;">
						</td>
					</tr>
					<tr>
					</tr>
					<tr>
					</tr>
					<tr>
					</tr>
					<tr>
						<td style="text-align: center; width: 648px;" colspan="2" rowspan="1">
							<a href="renseignement.html">
								<img style="border: 0px solid ; width: 203px; height: 126px;" alt="" src="mailling/images/btn1.png">
							</a>
						</td>
					</tr>
					<tr>
						<td style="width: 648px;" colspan="2" align="center" valign="top">
							<img src="mailling/images/barre.jpg" alt="" style="width: 800px; height: 19px;" align="top">
						</td>
					</tr>
				</tbody>
			</table>
			<br>
			<font face="Arial" size="1"> 
				Publicit&eacute; 	sans obligation de consultation, ni d'achat,&nbsp; 	destin&eacute;e aux soci&eacute;t&eacute;s et aux professionnels.
				<br>
				Soci&eacute;t&eacute; EGEO 55Bis rue Camille Pelletan 33150
				Cenon &nbsp;
				<br>
					Tel. : 05 56 32 92 00 &nbsp; Fax : 05 56 32 85 55
				<br>
				<br>
				Si vous souhaiter ne plus recevoir de mail de la part de egeo 
				<a href="desinscription.html">
					informer nous en ici
				</a>
				<br>
			</font>
		</center>
	</body>
</html>

[HTML] problème avec différents clients mail

HTML

Discussions similaires

Partager

Partager