Probléme de largeur d'un mail

Question

Miala

15 Oct 2009 à 10:27

Bonjour à tous,

Je suis entrain de réaliser un mail en HTML, mais quand je l'envoi sur une boîte de messagerie Lotus, ma largeur est écrasée.

Quand je reçois mon mail, il fait toute la largeur de ma page.
J'ai mis une div pour englober ma table avec une largeur donner, j'ai mis une largeur fixe à ma table, mais il ne veut rien savoir il reste en plein écran.

Voici ma structure (ne pouvant pas mettre le contenu):


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>

	<head>
	  <title></title>
	</head>

	<body style="text-align: center;">
			<div style="visibility:hidden">
				<img src="" width=1 height=1>
			</div>
			<div width="580"> 
				<table cellpadding="0" cellspacing="0" border="0" width="580" style="border: 1px solid rgb(230,231,226); width: 580px; margin: auto; text-align: left; font-family: Arial; font-size: 12px;">
					<tr>
						<td>
							<table cellpadding="0" cellspacing="0" border="0" style="margin: auto; text-align: left; font-family: Arial; font-size: 12px;">
								<tr>
									<td><img src="" height="295" /></td>
								</tr>
								<tr>
									<td style="padding-left:47px; font-size: 11px; font-family: Arial;color: #555555;">
										
									</td>
								</tr>
								<tr style='height:10px;'>
									<td>&nbsp;</td>
								</tr>
								<tr>
									<td style="padding-left:47px; font-size: 11px; font-family: Arial;color: #555555;">
										
									</td>
								</tr>
								<tr style='height:10px;'>
									<td>&nbsp;</td>
								</tr>
								<tr>
									<td style="padding-left:47px; font-size: 11px; font-family: Arial;color: #555555;">
										
									</td>
								</tr>
								<tr>
									<td style="padding-left:47px; font-size: 11px; font-family: Arial;color: #555555;">
										
									</td>
								</tr>
								<tr style='height:10px;'>
									<td>&nbsp;</td>
								</tr>
								<tr>
									<td style="padding-left:47px; font-size: 11px; font-family: Arial;color: #555555;">
										
									</td>
								</tr>
								<tr style='height:10px;'>
									<td>&nbsp;</td>
								</tr>
								<tr>
									<td>
										<center><table width="100%" border="0" cellspacing="0" cellpadding="0">
										  <tr>
											<td align="center">
												<table width="249" border="0" cellspacing="0" cellpadding="0">
												  <tr>
													<td><img src="" width="249" height="44" /></td>
												  </tr>
												  <tr>
													<td>
														<table width="249" border="0" cellspacing="0" cellpadding="0">
														  <tr>
															<td width="27"><img src="" width="27" height="113" /></td>
															<td width="178">
																<table width="178" border="0" cellspacing="0" cellpadding="0">
																  <tr>
																	<td style="text-align: center;font-family:Arial, Helvetica, sans-serif; font-size:11px"></td>
																  </tr>
																  <tr>
																	<td style="text-align: center;font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#FD5816"><img src="" width="22" height="15" align="middle" /></td>
																  </tr>
																  <tr>
																	<td style="text-align: center;"><img src="" width="1" height="5" /></td>
																  </tr>
																  <tr>
																	<td style="text-align: center;font-family:Arial, Helvetica, sans-serif; font-size:11px"></td>
																  </tr>
																  <tr>
																	<td style="text-align: center;font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#FD5816"><img src="" width="22" height="15" align="middle" /></td>
																  </tr>
																  <tr>
																	<td style="text-align: center;"><img src="" width="1" height="5" /></td>
																  </tr>
																  <tr>
																	<td style="text-align: center;font-family:Arial, Helvetica, sans-serif; font-size:10px"></td>
																  </tr>
																  <tr>
																	<td style="text-align: center;font-family:Arial, Helvetica, sans-serif; font-size:10px"></td>
																  </tr>
																</table>
															</td>
															<td width="44"><img src="" width="44" height="113" /></td>
														  </tr>
														</table>
													</td>
												  </tr>
												  <tr>
													<td><img src="" width="249" height="5" /></td>
												  </tr>
												</table>
											</td>
										  </tr>
										</table></center>
									</td>
								</tr>
								<tr style='height:10px;'>
									<td>&nbsp;</td>
								</tr>
								<tr>
									<td style="text-align: center; font-size: 11px; font-family: Arial;color: #005289; font-weight: bold;">
										
									</td>
								</tr>
								<tr style='height:10px;'>
									<td>&nbsp;</td>
								</tr>
								<tr>
									<td style="padding-left:47px; font-size: 11px; font-family: Arial;color: #555555;">
										Cordialement,
									</td>
								</tr>
								<tr style='height:10px;'>
									<td>&nbsp;</td>
								</tr>
								<tr>
									<td style="padding-left:340px; font-size: 11px; font-family: Arial;color: #555555;">
										
									</td>
								</tr>
								<tr>
									<td style="padding-left:340px; font-size: 11px; font-family: Arial;color: #555555;">
										
									</td>
								</tr>
								<tr style='height:10px;'>
									<td>&nbsp;</td>
								</tr>
								<tr>
									<td style="padding-left:47px; font-size: 11px; font-family: Arial;color: #555555;">
										
									</td>
								</tr>
								<tr style='height:10px;'>
									<td>&nbsp;</td>
								</tr>
								<tr>
									<td>
										<img src="" />
									</td>
								</tr>
								<tr style='text-align:center;'>
									<td style="font-size: 11px; font-family: Arial;color: #555555;">
										
									</td>
								</tr>
								<tr>
									<td>
										<img src="" />
									</td>
								</tr>
								<tr style='height:10px;'>
									<td>&nbsp;</td>
								</tr>
								<tr style='height:10px;'>
									<td>&nbsp;</td>
								</tr>
								<tr>
									<td style="padding-left:20px; font-size: 9px; font-family: Arial;color: #555555;">
										
									</td>
								</tr>
								<tr>
									<td style="padding-left:20px; font-size: 9px; font-family: Arial;color: #555555;">
										
									</td>
								</tr>
								<tr>
									<td style="padding-left:20px; font-size: 9px; font-family: Arial;color: #555555;">
									
									</td>
								</tr>
								<tr style='height:10px;'>
									<td>&nbsp;</td>
								</tr>
								<tr>
									<td style="padding-left:20px; font-size: 9px; font-family: Arial;color: #555555;">
										
									</td>
								</tr>
								<tr>
									<td style="padding-left:20px; font-size: 9px; font-family: Arial;color: #555555;">
										
									</td>
								</tr>
								<tr>
									<td style="padding-left:20px; font-size: 9px; font-family: Arial;color: #555555;">
										
									</td>
								</tr>
								<tr>
									<td style="padding-left:20px; font-size: 9px; font-family: Arial;color: #555555;">
										
									</td>
								</tr>
								<tr style='height:10px;'>
									<td>&nbsp;</td>
								</tr>
								<tr>
									<td align="right">
										<img src="" alt="" width="128" height="39" />
									</td>
								</tr>
								<tr style='height:10px;'>
									<td>&nbsp;</td>
								</tr>
								<tr>
									<td bgcolor="#816c5b" height="20">
										<table width="100%" height="20" border="0" cellspacing="0" cellpadding="0">
											<tr>
												<td style="text-align: center; font-size: 11px; font-family: Arial;color: #ffffff;">
													
												</td>
											</tr>
											<tr>
												<td style="text-align: center; font-size: 11px; font-family: Arial;color: #ffffff;">
													
												</td>
											</tr>
										</table>
									</td>
								</tr>
							</table>
						</td>
					</tr>
				</table>
			</div>
	</body>
</html>

J'espère que vous pourrez m'aider. Depuis mardi je travail sur ce mail et Lotus ne veut rien savoir. Il apparait correctement dans Yahoo, Outlook 2007, Hotmail, Thunderbird, ...

Merci d'avance et bonne journée à tous.

Miala

16 Oct 2009 à 12:16

Personne n'as remarqué une erreur dans mon code HTML?

Je ne trouve vraiment, si quelqu'un a une petite idée ça m'aiderais beaucoup.

Merci d'avance.

~~supprimé~~

17 Oct 2009 à 10:09

Bonjour,
J'ais mis une image a moi dans toutes tes balises image,
le html affiche ce que tu as écris.
Puis je me suis envoyé ce html par mail, même résultat

Mais quand je dis que ça affiche ce que tu as écris.
Je veux dire avec les width et height que tu as mis un peut partou !

Regardes les TOPO de html sur ce site tu verras comment procéder pour obtenir ce que tu veux.
Modifié par Christele (17 Oct 2009 - 10:11)

Miala

18 Oct 2009 à 08:49

Bonjour à tous,

Oui il affiche mon bien mon mail partout sauf sur Lotus Note en faite.
Je l'ai testé sur Yahoo, Outlook, Hotmail, Noos, Thunderbird, ... Il s'affiche correctement, mais dés que je l'envoie sur une adresse Lotus Note la largeur du mail prend toute la page et tout le texte est collé à gauche.

Je sais pas si tu as essayer un envoi sur une adresse Lotus Note c'est pour ça que j'explique ceci.

En tout cas merci pour ta réponse, je vais essayer de voir sur Internet les topo html.

Bon dimanche à tous.
Modifié par Miala (18 Oct 2009 - 19:41)

jQz

18 Oct 2009 à 11:17

Bonjour Miala,

Déjà, ton code XHTML comporte 14 Erreurs et 14 warning(s).
Pour les corriger, rends-toi sur le validateur du W3C.

Ensuite, tu as dis que tu avais spécifié une largeur à ton div :

<div width="580">

Malheureusement, ce bout de code est incorrect

Ce que je te conseil de faire :

Tu ajoutes un id ou une class à ta balise en faisant bien attention à ceci puis tu lui attribue les propriétés CSS

Ce qui donne :

<div id="page" style="width: 580px;">le contenu de ta page</div>

A noter qu'il serait judicieux d'inclure le CSS par l'intermédiaire d'une feuille de style.

Heyoan

18 Oct 2009 à 11:39

Salut,

jQz a écrit :
A noter qu'il serait judicieux d'inclure le CSS par l'intermédiaire d'une feuille de style.

Ce n'est pas forcément une bonne idée pour un email. Smiley cligne

A noter que Lotus Note (dans ses versions < 8) est un des pires logiciels qui soient pour restituer des mails mis en forme !

Lire Comment régler les problèmes d'email en HTML/CSS.

jQz

18 Oct 2009 à 11:56

a écrit :
Ce n'est pas forcément une bonne idée pour un email.

Je n'y avais absolument pas pensé Smiley rolleyes

.

Miala

18 Oct 2009 à 19:39

Merci pour vos réponse, j'ai modifier mon mail vendredi pour qu'il n'y ai plus d'erreur, j'ai mis la largeur dans ma div correctement mais comme a dit Heyoan Lotus Note est horrible.

K'ai déjà effectuer un mail compatible avec Lotus Note mais il n'y avait que tu texte et il était collé à gauche.

Oui j'ai pas mis de CSS parce que oui c'est pas une très bonne idée.

Merci pour ton lien Heyoan, je vais regarder ça dés mon retour dans mon entreprise.

Encore merci et bonne soirée à tous.

Sujet clos

Sémantique web et HTML

Probléme de largeur d'un mail