Mise en forme html e-mail pour Outlook
J'ai une newsletter html qui fonctionne dans la plupart des clients de messagerie, mais la mise en forme est foiré dans Outlook.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
background-color: #98AFC7;
}
</style>
<title></title>
</head>
<body>
<table border="1px solid" cellspacing="0" cellpadding="10px" width="600" style="margin-left: auto; margin-right: auto; height:auto; background-color: #ffffff; margin-top: 60px;">
<tr>
<td align="top" style="padding: 10px; font-family: arial; font-size: 12px;" ><center>Email not displaying correctly?<a href="#"><strong> View it in your browser</strong></a></center></td>
</tr>
<tr>
<td style="border: 1px solid; height: 80px; text-align: center; padding: 10px;"><img src="http://demo.frostmiller.com/email/img/banner.jpg" alt="Banner will go here" align="middle" style="border: 1px solid;"></td>
</tr>
<tr>
<td>
<table style="border: 0; cellspacing: 0; cellpadding: 10px; height: auto;">
<tr>
<td valign="baseline" style="padding: 10px; width:400px; border: 1px solid; halign: top;">
<h3>Top Stories</h3>
<ul>
<li>Topic 1</li>
<li>Topic 2</li>
<li>Topic 3</li>
</ul>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</td>
<td valign="baseline" style="padding: 10px; border: 1px solid;">
<h3>Latest News</h3>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td cellpadding="10px" style="border: 1px solid; cellspacing: 0; width: 100%; height: auto; text-align: center;">
<strong>Copyright © 2011 Frost Miller Group </strong>
</td>
</tr>
<tr>
<td style="border: 1px solid; cellspacing: 0; cellpadding: 10px; width: 100%; height: auto">
<center>
<a href="#">Contact Us</a>
<a href="#">Terms of Use</a>
<a href="#">Trademarks</a>
<a href="#">Privacy Statement</a>
<a href="#">Site Feedback</a>
</center>
</td>
</tr>
</table>
</body>
</html>Quels changements dois-je faire pour qu'il s'affiche correctement dans Outlook?
Vous devez vous connecter pour publier un commentaire.
Pour être en mesure de vous donner spécifiques aider, vous ont à expliquer quelles sont les pièces spécifiquement "se faire massacrer", ou peut-être offrir une capture d'écran. Il permet également de savoir quelle est la version d'Outlook que vous rencontrez le problème.
De toute façon, CampaignMonitor.com's guide CSS a souvent aidé à me sortir de débogage client de messagerie incohérences.
À partir de ce guide, vous pouvez voir plusieurs choses juste ne fonctionne pas bien ou pas du tout dans Outlook, voici certains des faits saillants les plus importants:
E:first-child,E:hover,E > F(Enfant combinator),E + F(à côté de la fratrie combinator),E ~ F(Général frère combinator). Malheureusement les moyens de recourir à des solutions de contournement comme des styles en ligne.white-spacene fonctionne pas.background-imagepropriété ne fonctionne pas.height,width, et lamax-versions ne sont pas utilisables ou avoir des bugs sur certains éléments.display,floats etpositionsont tous à l'extérieur).En bref: combinant CSS et Outlook peut être une douleur. Soyez prêt à utiliser de nombreux laid solutions de contournement.
PS. Dans votre cas particulier, il y a deux petits problèmes dans votre code html qui peuvent vous causer un comportement étrange. Il n'y a "
align=top" où il est probablement censé utiliservertical-align. Aussi:cell-paddingpourtds n'existe pas.Vous devriez certainement vérifier la MSDN sur ce Outlook prendra en charge en ce qui concerne le css et le html. Le lien est ici: http://msdn.microsoft.com/en-us/library/aa338201(v=office.12).aspx. Si vous n'avez pas au moins office 2007, vous avez vraiment besoin de mettre à niveau comme il existe de grandes différences entre 2007 et les versions antérieures. Aussi essayer de sauver de l'électronique qui fichier et de les examiner avec firefox, vous verrez ce que c'est d'être changé par outlook et peut-être avoir un plus spécifique la question à se poser. Vous pouvez utiliser Word pour afficher l'e-mail comme une sorte de preview et (mais vous n'obtiendrez pas d'info sur ce que les styles sont/ne sont pas appliqués.
J'ai utilisé VML(Vector Markup Language) basé sur la mise en forme dans mon modèle d'e-mail.
Dans VML Fonction vous disposez d'écrire votre code dans les commentaires
J'ai pris de l'aide de ce site.
https://litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design#supporttable