html à côté des tables dans les e-mails sont contraints sous dans Outlook 2007 et au-dessus
Je viens de courir mon premier frustration avec Outlook briser mes e-mails html.
J'ai un conteneur de table qui est de 640 px de large. Dans c'est deux 320px des tables une aligner à gauche, aligner à droite.
Ils placent côte à côte, dans TOUS les clients de messagerie à l'exception de Word Moteur Outlook (2007 et plus).
C'est la partie importante. J'ai le code pour rendre le contenant de la table deviennent des 320px de large lorsqu'il est affiché sur le téléphone mobile. Cela force les deux tables les unes sur les autres.
Cela fonctionne exactement comme prévu pour les mobiles.
Mais Outlook sur un ordinateur de bureau rend la aligné à gauche de la table, puis en dessous il rend la main droite de la table ci-dessous la gauche mais toujours aligné à droite, créant un grand vide sous la main gauche de la table et un grand écart au-dessus de la main droite de la table.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
img
{display:block;}
a
{text-decoration:none;}
a:hover
{text-decoration: underline !important;}
td.contentblock p {
color:#FFFFFF;
font-size:16px;
font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
margin-top:0;
margin-bottom:12px;
padding-top:0;
padding-bottom:0;
font-weight:normal;
}
td.contentblock p a {
color:#e45808;
text-decoration:none;
}
.heading {
font-size:24px;
font-weight:bold;
}
@media only screen and (max-device-width: 480px) {
table[class="table"], td[class="cell"] {
width: 320px !important;
}
td[class="footershow"] {
width: 320px !important;
}
table[class="hide"], img[class="hide"], td[class="hide"], br[class="hide"], div[class="hide"] {
display: none !important;
}
img[class="divider"] {
height: 1px !important;
}
img[id="header"] {
width: 320px !important;
height: 69px !important;
}
img[id="main"] {
width: 320px !important;
height: 45px !important;
}
img[id="footer"] {
width: 320px !important;
height: 43px !important;
}
p[class="reminder"] {
font-size: 11px !important;
}
span[class="secondary"] {
line-height: 20px !important;
margin-bottom: 15px !important;
font-size: 13px !important;
}
}
</style>
</head>
<body bgcolor="#e4e4e4" topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" style="-webkit-font-smoothing: antialiased;width:100% !important;background:#e4e4e4;-webkit-text-size-adjust:none;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#EEEEEE">
<tr>
<td bgcolor="#EEEEEE" width="100%">
<table width="640" cellpadding="0" cellspacing="0" border="0" align="center" class="table">
<tr>
<td width="640" class="cell" style="color:#FFF;">
<table class="table" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td bgcolor="#cc6600" class="contentblock cell" style="color:#FFFFFF;font-size:16px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<table width="320" bgcolor="#cc6600" cellpadding="0" cellspacing="0" border="0" align="left">
<tr>
<td>
<a href="#" target="_blank" title="#" style="text-decoration:none;color:#FFF;"><img src="http://www.example.com/image_01.png" alt="#" width="320" height="167" border="0" style="display:block;" /></a>
</td>
</tr>
</table>
<table width="320" bgcolor="#cc6600" cellpadding="0" cellspacing="0" border="0" align="right">
<tr>
<td>
<a href="#" target="_blank" title="#" style="text-decoration:none;color:#FFF;"><img src="http://www.example.com/image_02.png" alt="#" width="320" height="167" border="0" style="display:block;" /></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Si quelqu'un pouvait m'aider à trouver un moyen d'avoir encore mes deux côte à côte tables dans Outlook, mais encore de les avoir re-aligner l'un sous l'autre dans les téléphones mobiles, je serais très reconnaissante.
OriginalL'auteur Almeister9 | 2014-04-16
Vous devez vous connecter pour publier un commentaire.
La réponse rapide est de faire de la largeur de l'intérieur de tableaux de quelques pixels plus petits. Comme il est, Outlook ajoute quelques pixels entre eux, provoquant la 320 + (quelques pixels) + 320 > 640.
D'une façon plus précise consiste à ajouter
mso-table-lspace
etmso-table-rspace
de réduire l'écart. Voir cet exemple.votre commentaire m'a fait rire..... Je souhaite la même chose à chaque fois que j'ai besoin de créer des e-mails.... 😀
Connaissez-vous des HTML inspecteur pour Outlook? Comment avez-vous été inspecter les éléments, autres que purement essai et de l'erreur entre le code source et de générer des e-mail?
La plupart des e-mail concepteurs d'utiliser un outil comme Tournesol ou e-Mail à l'Acide pour tester leurs créations à travers toutes les versions d'Outlook (et tous les autres principaux clients de messagerie). Certains fournisseurs de services de messagerie comme Mailchimp et Campaign Monitor ces services construit dans, de gagner un supplément de frais d'abonnement.
OriginalL'auteur John
J'ai trouvé que vous avez besoin pour permettre à 25px entre les tables pour empêcher Outlook de les empiler comme ça.
L'autre solution est d'utiliser de code conditionnel pour Outlook pour envelopper chaque table dans une cellule d'un wrapper de la table. Cela signifie que, dans Outlook, ils ne serez tous les deux sur la même ligne d'une table, de sorte qu'ils ne peuvent pas éventuellement bosse vers le bas.
La
(gte mso 9)
ciblera toutes les versions de microsoft Outlook 2000 et jusqu', mais, en réalité, Outlook 2000, 2002 et 2003 de rendre l'utilisation d'IE, et ne reconnaissent pas que le code, qui est pourquoi vous pouvez également utiliser(IE)
dans l'instruction conditionnelle if.Cela a fonctionné pour moi dans toutes les versions d'Outlook, j'ai dans le Tournesol. J'ai juste utilisé [si mso]. Nice one!
OriginalL'auteur Nicole Scoble