5568 sujets

Sémantique web et HTML

Newsletter outlook 2007 et redimensionnement des images

bonjour
je suis en train de m'arracher les cheveux avec une newsletter et outlook 2007...

grace à plusieurs posts de ce forum j'ai réussi à réparer pas mal de choses mais il me reste un soucis avec un redimensionnement d'image où les proportions ne sont pas respectées.
pour certaines raisons, j'affiche des images qui sont de dimensions plus grandes mais je veux qu'elles soient de 160px de large que j'indique... dans un navigateur et tous les webmails et logiciels de mails (comme thunderbird) ca se fait sans pb mais pas avec outlook 2007

voici mon code, les images posant probleme ont le nom PROBLEME.jpg


<!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" xml:lang="en" lang="en"> 
<head> 
	<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
	<title>La lettre d'informations</title> 
</head> 
<body bgcolor="#dbe9f3" text="#333333"> 
<center>
<a href='http://XXXX'>Vous n'arrivez pas &agrave; visualiser correctement cet e-mail, cliquez ici</a>
</center>
<br /><br />
<table width="620" bgcolor="#FFFFFF" border="0" style="padding:3px;">
	<tr>
		<td colspan="3" width="610">
			<a href="http://XXX"><img src="http://XXXX.gif" alt="XXXX" border="0"/></a>
		</td>
	</tr>
	<tr><td colspan="3" height="10">&nbsp;</td></tr>
	<tr>
		<td width="130" valign="top">
			<table width="130" border="0">
				<tr>
					<td width="130" bgcolor="#E9E9E9" style="padding-top: 2px;padding-bottom: 2px;margin-top:1px;">
						<a href="http://XXXX" style="text-decoration:none"><font size="2" color="#666666" face="Trebuchet MS, Helvetica, sans-serif">XXX</font></a>
					</td>
				</tr> 
				<tr>
					<td width="130" bgcolor="#FFFFFF" style="padding-top: 2px;padding-bottom: 2px;margin-top:1px;">
						<a href="http://XXXX" style="text-decoration:none"><font size="2" color="#666666" face="Trebuchet MS, Helvetica, sans-serif">XXX</font></a>
					</td>
				</tr> 
				<tr>
					<td width="130" bgcolor="#E9E9E9" style="padding-top: 2px;padding-bottom: 2px;margin-top:1px;">
						<a href="http://XXXX" style="text-decoration:none"><font size="2" color="#666666" face="Trebuchet MS, Helvetica, sans-serif">XXX</font></a>
					</td>
				</tr> 
				<tr>
					<td width="130" bgcolor="#FFFFFF" style="padding-top: 2px;padding-bottom: 2px;margin-top:1px;">
						<a href="http://XXXX" style="text-decoration:none"><font size="2" color="#666666" face="Trebuchet MS, Helvetica, sans-serif">XXX</font></a>
					</td>
				</tr> 
				<tr>
					<td width="130" bgcolor="#E9E9E9" style="padding-top: 2px;padding-bottom: 2px;margin-top:1px;">
						<a href="http://XXXX" style="text-decoration:none"><font size="2" color="#666666" face="Trebuchet MS, Helvetica, sans-serif">XXX</font></a>
					</td>
				</tr> 
				<tr>
					<td width="130" bgcolor="#FFFFFF" style="padding-top: 2px;padding-bottom: 2px;margin-top:1px;">
						<a href="http://XXXX" style="text-decoration:none"><font size="2" color="#666666" face="Trebuchet MS, Helvetica, sans-serif">XXX</font></a>
					</td>
				</tr> 
			</table>
		</td>
		<td style="width:10px;">&nbsp;</td>
		<td width="470">
			<table width="470" cellpadding="0" cellspacing="0" border="0">
				<tr>
					<td>
						<a href="http://XXXX"><img src="http://XXXX/rsshome.gif" border="0" style="margin:0 0 0 5px;padding:0px;" alt="rss" align="left"/></a>
						&nbsp;&nbsp;
						<a href="http://XXXX" style="text-decoration:none;"><font size="3" color="#333333"><strong>Actualit&eacute;s</strong></font></a>
					</td>
				</tr>
				<tr style="height:10"><td>&nbsp;</td></tr>
				<tr>
					<td>
						<table width="470" border="0">
							<tr valign="top">
								<td width="170">
									<a href="http://XXXX">
									<img src="http://PROBLEME.jpg" alt="XXXX" width="160" border="0" align="left" style="display: block;";/></a>
								</td>
								<td width="300">
									<a href="http://XXXX" style="text-decoration:none;margin-bottom:6px;"><font size="4" color="#00BCE4"><strong>XXXX</strong></font></a>
									<br />
									<font size="2" color="#666666" face="Trebuchet MS, Helvetica, sans-serif">XXXX</font>
									<div style="margin-top:15px;margin-left:130px;">
										<a href="http://XXXX"><img src="http://XXXX/puce_en_savoir_plus.png" border="0" align="left" alt="puce" style="margin-top:-1px;"/></a>
									</div>
								</td>
							</tr>
						</table>
					</td>
				</tr>
				<tr><td height="20">&nbsp;</td></tr>
				<tr>
					<td>
						<table width="470" border="0">
							<tr valign="top">
								<td width="170">
									<a href="http://XXXX">
									<img src="http://PROBLEME.jpg" alt="XXXX" width="160" border="0" align="left" style="display: block;";/></a>
								</td>
								<td width="300">
									<a href="http://XXXX" style="text-decoration:none;margin-bottom:6px;"><font size="4" color="#00BCE4"><strong>XXXX</strong></font></a>
									<br />
									<font size="2" color="#666666" face="Trebuchet MS, Helvetica, sans-serif">XXXX</font>
									<div style="margin-top:15px;margin-left:130px;">
										<a href="http://XXXX"><img src="http://XXXX/puce_en_savoir_plus.png" border="0" align="left" alt="puce" style="margin-top:-1px;"/></a>
									</div>
								</td>
							</tr>
						</table>
					</td>
				</tr>
				<tr><td height="20">&nbsp;</td></tr>
				<tr>
					<td>
						<table width="470" border="0">
							<tr valign="top">
								<td width="170">
									<a href="http://XXXX">
									<img src="http://PROBLEME.jpg" alt="XXXX" width="160" border="0" align="left" style="display: block;";/></a>
								</td>
								<td width="300">
									<a href="http://XXXX" style="text-decoration:none;margin-bottom:6px;"><font size="4" color="#00BCE4"><strong>XXXX</strong></font></a>
									<br />
									<font size="2" color="#666666" face="Trebuchet MS, Helvetica, sans-serif">XXXX</font>
									<div style="margin-top:15px;margin-left:130px;">
										<a href="http://XXXX"><img src="http://XXXX/puce_en_savoir_plus.png" border="0" align="left" alt="puce" style="margin-top:-1px;"/></a>
									</div>
								</td>
							</tr>
						</table>
					</td>
				</tr>
				<tr><td height="20">&nbsp;</td></tr>
				<tr>
					<td>
						<table width="470" border="0">
							<tr valign="top">
								<td width="170">
									<a href="http://XXXX">
									<img src="http://PROBLEME.jpg" alt="XXXX" width="160" border="0" align="left" style="display: block;";/></a>
								</td>
								<td width="300">
									<a href="http://XXXX" style="text-decoration:none;margin-bottom:6px;"><font size="4" color="#00BCE4"><strong>XXXX</strong></font></a>
									<br />
									<font size="2" color="#666666" face="Trebuchet MS, Helvetica, sans-serif">XXXX</font>
									<div style="margin-top:15px;margin-left:130px;">
										<a href="http://XXXX"><img src="http://XXXX/puce_en_savoir_plus.png" border="0" align="left" alt="puce" style="margin-top:-1px;"/></a>
									</div>
								</td>
							</tr>
						</table>
					</td>
				</tr>
				<tr><td height="20">&nbsp;</td></tr>
			</table>  
		</td>
	</tr> 
</table>
</body>
</html>


merci d'avance
stephane
bon j'essaie d'avancer seul...

j'ai un peu modifié mon code, je calcule la hauteur de l'image en faisant un ratio par rapport à la largeur de 160px que je souhaite afficher. malheureusement outlook se fout toujours des dimensions indiquées.

quelq'un a une idée?



<tr>
<td>
<table width="470" border="0">
<tr valign="top">
	<td width="170">
	<a href="http://XXX"><img src="http://PROBLEME.jpg" alt="XXX" width="160" height="106" border="0" align="left" style="display: block;"/></a>
	</td>
	<td width="300">
	<a href="http://XXX" style="text-decoration:none;margin-bottom:6px;"><font size="4" color="#00BCE4"><strong>XXX</strong></font></a>
	<br />
	<font size="2" color="#666666" face="Trebuchet MS, Helvetica, sans-serif">XXX</font>
	<div style="margin-top:15px;margin-left:130px;">
	<a href="http://XXX">
		<img src="http://XXX.png" border="0" align="left" alt="puce" style="margin-top:-1px;"/>
	</a>
	</div>
	</td>
</tr>
</table>
</td>
</tr>

Modifié par siddhartha (08 Oct 2009 - 20:19)
Salut,

Tu devrais utiliser plusieurs tableaux au lieu de mettre des colspan/rowspan, mais aussi mettre des padding et margin à 0 partout. Pour moi ça m'as résolu tout les problèmes d'intégration sous outlook 2007.
Bonjour
Moi aussi je rencontre ce soucis sur outlook 2007.
J'ai créer ma newsletter (760 de largeur)avec Photoshop puis je l'ouvre avec IE8 :Fichier>>Envoyer>>Page par courrier électronique et là c l'anarchie totale, mes images dépassent la largeur de 760.
j'ai essayé d'utiliser des tableaux imbriqués mais le problème persiste.
un coup de main svp
Cordialement merci
Sujet clos
Aller à