3
Je suis en train de développer une campagne d'e-mail, mais je suis confronté à un problème spécifique à Outlook 2007/10 uniquement. Je suppose que cela est dû au fait qu'il utilise le moteur de rendu Word. Ce code fonctionne bien sur une majorité significative d'autres clients testés en utilisant Litmus.HTML Email Affichage incorrect Outlook 2007/10, espace supplémentaire entre les images
La largeur totale de la table est 650px, chaque rangée contient 3 images constituant une largeur totale de 650px.
Image2 http://www.hallwaystudios.com/screenshots/uploads/uMaf2YsD.png
C'est Outlook 2010 et notez l'image mise en surbrillance est un petit espace expose entre elle et l'image à droite. Cette image est dans sa propre cellule de tableau et j'ai appliqué display: bloque CSS.
Mon code entier peut être trouvé ci-dessous. Cet e-mail est envoyé dans le moniteur de campagne.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>We've Moooved...</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
HTML,BODY {
margin: 0;
padding: 0;
}
IMG {
display: block;
padding: 0;
margin: 0;
vertical-align:bottom;
}
TABLE,TR,TD {
border-collapse: collapse;
}
P {
margin: 5px 0px;
}
</style>
</head>
<body bgcolor="#ffffff">
<table width="100%" cellpadding="0" cellspacing="0" align="center" background="images/background.jpg" bgcolor="#282828" style="padding-bottom: 20px; background-color:#282828; width: 100%">
<tr>
<td style="color: #FFFFFF; text-align: center; padding: 10px;" align="center">
<font color="#FFFFFF" face="Arial,Helvetica,Verdana,Calibri,sans-serif" size="2" style="font-size: 12px; line-height: 20px;">
Having trouble viewing this email? <webversion style="color:#FFFFFF">Click here to view it in your browser</webversion>
</font>
</td>
</tr>
<tr><td>
<table border="0" cellpadding="0" cellspacing="0" width="650" align="center" style="margin: 0 auto; text-align: center; background-color: #000" bgcolor="#000">
<tr>
<td><img src="images/spacer.gif" width="26" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="3" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="84" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="41" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="75" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="9" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="40" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="83" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="42" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="13" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="53" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="18" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="40" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="6" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="68" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="19" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="29" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="1" border="0" alt="" /></td>
</tr>
<tr>
<td rowspan="3" colspan="10"><a href="http://www.hallwaystudios.com/"><span></span><img name="campaign_r1_c1" src="images/campaign_r1_c1.png" width="416" height="110" border="0" alt="" style="display: block" /></a></td>
<td colspan="8" bgcolor="#000000"><span></span><img src="images/spacer.gif" width="1" height="39" border="0" alt="" style="display: block" /></td>
</tr>
<tr>
<td colspan="8"><span></span><img name="campaign_r2_c11" src="images/campaign_r2_c11.jpg" width="234" height="34" border="0" alt="" style="display: block" /></td>
<td><span></span><img src="images/spacer.gif" width="1" height="34" border="0" alt="" style="display: block" /></td>
</tr>
<tr>
<td colspan="8"><span></span><img name="campaign_r3_c11" src="images/campaign_r3_c11.jpg" width="234" height="37" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="18"><span></span><img name="campaign_r4_c1" src="images/campaign_r4_c1.jpg" width="650" height="157" border="0" alt="" style="display: block" /></td>
</tr>
<tr>
<td rowspan="3" align="right" width="26"><span></span><img name="campaign_r5_c1" src="images/campaign_r5_c1.jpg" width="26" height="408" border="0" alt="" style="display: block" /></td>
<td rowspan="3" colspan="10" valign="top" background="images/campaign_r5_c2.jpg" bgcolor="CEF2EE" align="left" style="background:#CEF2EE url(images/campaign_r5_c2.jpg) top left no-repeat" height="408" width="443">
<!--[if gte mso 9]>
<v:rect style="width:443px;height:408px;" strokecolor="none">
<v:fill type="tile" color="#CEF2EE" src="http://www.hallwaystudios.com/images/email/campaign_r5_c2.jpg" /></v:fill>
</v:rect>
<v:shape id="theText" style="position:absolute;width:443px;height:408px;">
<![endif]-->
<font color="#000000" face="Arial,Helvetica,Verdana,Calibri,sans-serif" size="2" style="font-size: 14px; line-height: 20px; text-align: left;"><multiline><p style="margin: 0px 0px 6px">Thanks to all of your support, our team has thrived and grown<br>We looked far and wide to find a space, that we can call our own</p> <p style="margin:6px 0px">We love our new office; it’s so easy to reach<br>It’s down the road in Watford (sadly not the beach)<br>Near the station, M1 and M25, we’re very well connected<br>Of course we miss the countryside, but nothing else has been affected</p><p style="margin:6px 0px">We still do great <a href="http://www.hallwaystudios.com/services/" style="color: #000000"><strong><font color="#000000">design</font></strong></a>, be it web, literature, brand or logo,<br>And know how to <a href="http://www.hallwaystudios.com/services/" style="color:#c92234"><font color="#c92234"><strong>promote</strong></font></a> your business through social media, email and SEO.<br>We <a href="http://www.hallwaystudios.com/services/" style="color:#1f75b0"><font color="#1f75b0"><strong>develop</strong></font></a> the technology: e-commerce, web or bespoke software<br>And we make sure you’re involved at every stage to create results beyond compare.</p><p style="margin:6px 0px">So make sure you come and visit, for a coffee and some cake<br>We'd be delighted to show you round, and love an excuse to bake!</p><p style="margin: 6px 0px 0px">To get your free cake and coffee, call us or click on the button to the right<br>And arrange to see us and Betty the cow, (she heard we had moo-ved and appeared one night...)</p></multiline></font>
<!--[if gte mso 9]>
</v:shape>
<![endif]-->
</td>
<td colspan="7" align="left"><img name="campaign_r5_c12" src="images/campaign_r5_c12.jpg" width="181" height="163" border="0" alt="" style="display: block" /></td>
</tr>
<tr>
<td colspan="3" align="left"><img name="campaign_r6_c12" src="images/campaign_r6_c12.jpg" width="64" height="51" border="0" alt=""></td>
<td align="left"><a href="http://www.hallwaystudios.com/contact/"><img name="campaign_r6_c15" src="images/campaign_r6_c15.jpg" width="68" height="51" border="0" alt="" style="display: block" /></a></td>
<td colspan="3" align="left"><img name="campaign_r6_c16" src="images/campaign_r6_c16.jpg" width="49" height="51" border="0" alt="" style="display: block" /></td>
<tr>
<td colspan="7" align="left"><img name="campaign_r7_c12" src="images/campaign_r7_c12.jpg" width="181" height="194" border="0" alt="" style="display: block" /></td>
</tr>
<tr>
<td colspan="18"><img name="campaign_r8_c1" src="images/campaign_r8_c1.jpg" width="650" height="98" border="0" alt="" style="display: block" /></td>
</tr>
<tr>
<td colspan="18"><span></span><img name="campaign_r9_c1" src="images/campaign_r9_c1.jpg" width="650" height="178" border="0" alt="" style="display: block" /></td>
</tr>
<tr width="650">
<td align="right"><img name="campaign_r10_c1" src="images/campaign_r10_c1.jpg" width="26" height="96" border="0" alt="" style="display: block" /><span></span></td>
<td colspan="4" align="right"><a href="http://www.hallwaystudios.com/contact/#map"><span></span><img name="campaign_r10_c2" src="images/campaign_r10_c2.jpg" width="203" height="96" border="0" alt="" style="display: block" /></a></td>
<td colspan="13" align="left"><span></span><img name="campaign_r10_c6" src="images/campaign_r10_c6.jpg" width="421" height="96" border="0" alt="" style="display: block" /></td>
</tr>
<tr>
<td colspan="18"><span></span><img name="campaign_r11_c1" src="images/campaign_r11_c1.jpg" width="650" height="145" border="0" alt="" style="display: block" /></td>
</tr>
<tr>
<td colspan="18" bgcolor="#000000"><img src="images/social_footer.jpg" usemap="#Map" border="0" /></td>
</tr>
<tr>
<td colspan="18" bgcolor="#000000" align="center">
<font color="#FFFFFF" face="Arial,Helvetica,Verdana,Calibri,sans-serif" size="2">
Censored</font></p>
<p><small>
Would you like to <preferences style="color:#FFFFFF">
<font color="#FFFFFF">update your details</font></preferences>? Or <unsubscribe style="color:#FFFFFF"><font color="#FFFFFF">unsubscribe from our awesome email list</font></unsubscribe> (Betty will miss you)?
</small></p>
</font>
</td>
</tr>
</table>
</td></tr>
</table>
<map name="Map" id="Map">
<area shape="rect" coords="31,2,112,67" href="http://www.facebook.com/hallwaystudios" target="_blank" alt="Facebook" />
<area shape="rect" coords="279,1,362,70" href="http://www.linkedin.com/company/hallway-studios-limited" target="_blank" alt="LinkedIn" />
<area shape="rect" coords="404,2,486,81" href="http://www.hallwaystudios.com/" target="_blank" alt="Hallway Studios" />
<area shape="rect" coords="526,-9,622,77" href="[forwardtoafriend]" />
<area shape="rect" coords="155,-2,237,67" href="http://twitter.com/hallwaystudios" target="_blank" alt="Twitter" />
</map>
</body>
</html>
Toutes les idées seraient appréciées!
double possible de http://stackoverflow.com/questions/11117950/removing-white -spacing-between-images-in-a-table/11118089 # 11118089 – Ankit
@Ankit Si c'était je ne l'aurais pas posté, l'autre sujet n'a pas été résolu non plus – Chris
@Chris J'ai ce problème exactement maintenant comme bien, exactement. Je vous le ferai savoir si je le découvre. –