I'm trying to fix an issue on outlook 2010. I have to tables in my HTML email.
I can't understand why my sidebar has a large top gap on outlook 2010 (on every other email client it's ok)
http://hpics.li/e4807bb
I try to remove every block one by one and the problem is the group of people image.
Here is my email code.
Does someone have a solution or any clue ?
Thanks guys
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Fondation Groupe Adecco</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0," />
<style type="text/css">
#import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800);
#import url(http://fonts.googleapis.com/css?family=PT+Sans:400,700);
html { width: 100%; }
body {margin:0; padding:0; width:100%; -webkit-text-size-adjust:none; -ms-text-size-adjust:none;}
img {border:0; -ms-interpolation-mode:bicubic;}
table {table-layout:fixed;}
.ReadMsgBody { width: 100%;}
.ExternalClass {width: 100%;}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; }
a:hover {text-decoration:underline !important;}
.images {display:block !important; width:100% !important;}
[style*="Open Sans"] {
font-family: 'Open Sans', Arial, sans-serif !important
}
[style*="PT Sans"] {
font-family: 'PT Sans', Arial, sans-serif !important
}
.img_mob {
width: 100% !important;
}
/* MEDIA QUIRES */
#media only screen and (max-width:640px)
{
body {width:auto!important;}
table[class=devicewidth] {width:70%!important;}
table[class=devicewidth] table {width:100%!important;}
img.resize {max-width: 100%!important;}
}
#media only screen and (max-width:480px)
{
table[class=devicewidth] {width:320px!important;}
.full {display:block;width:100%;}
* {
-webkit-text-size-adjust: none !important;
}
table[class="none"], tr[class="none"], td[class="none"], br[class="none"], span[class="none"] {
display: none !important;
}
*[class].table {
width: 320px !important;
}
*[class].small {
display: block !important;
width: 320px !important;
overflow: visible !important;
float: none !important;
height: auto !important;
}
*[class].solutions {
width: 320px !important;
height: 279px !important;
}
*[class].groupe {
width: 320px !important;
height: 180px !important;
}
.none {
display: none !important;
}
}
</style>
</head>
<body topmargin="0" rightmargin="0" bottommargin="0" leftmargin="0">
<!-- PRE HEADER -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#eb212e">
<tr>
<td>
<table width="700" border="0" cellspacing="0" cellpadding="0" align="center" class="devicewidth" style="">
<tr>
<td valign="middle" height="" style="padding:10px 1px 10px;">
<table width="280" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td align="left" style="color: #f2c5c8;font-family: Arial;font-size: 12px;font-weight: 400; padding:0px 1px 0px 0;">
<b>Newsletter Fondation groupe Adecco</b>
</td>
</tr>
</table>
<table width="400" border="0" cellspacing="0" cellpadding="0" align="right">
<tr>
<td align="left" style="color: #f2c5c8;font-family: Arial;font-size: 12px;font-weight: 400; padding:0px 1px 0px 0;">
Si vous avez des difficult�s pour visualiser ce message. Cliquez ici
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- ESPACE -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#f3f3f3">
<tr>
<td height="30"> </td>
</tr>
</table>
<!-- HEADER -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#f3f3f3">
<tr>
<td>
<table width="700" border="0" cellspacing="0" cellpadding="0" align="center" class="devicewidth" style="">
<tr>
<td valign="middle" height="">
<table width="700" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td align="center" valign="top"><img src="http://s362172362.onlinehome.fr/mail/adecco/head.jpg" width="700" height="165" style="display:block" border="0" title="Adecco vous propose ses solutions" alt="Adecco vous propose ses solutions" class="none"><!--[if !mso]><!-- -->
<img src="http://s362172362.onlinehome.fr/mail/adecco/head_mob.jpg" width="0" height="0" class="small block hide solutions" border="0" style="width:0px; overflow:hidden; float:left; display:none; line-height:0px; margin:0; padding:0;" alt="Adecco vous propose ses solutions" title="Adecco vous propose ses solutions">
<!--<![endif]--></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- ESPACE -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#f3f3f3">
<tr>
<td height="8"></td>
</tr>
</table>
<!-- HEADER -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#f3f3f3" valign="top">
<tr>
<td>
<table width="700" border="0" cellspacing="0" cellpadding="0" align="center" class="devicewidth" style="">
<tr>
<td valign="middle" height="">
<table width="460" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td valign="top" align="left" style="color:#000000; font-family:Arial, Helvetica, sans-serif, 'PT Sans'; font-size:13px; padding:0px 0px 0px 0;">
<table border="0" cellspacing="0" cellpadding="0" align="left" width="100%" bgcolor="#ffffff">
<tr>
<td style="padding:20px;">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="35%">
<img src="http://s362172362.onlinehome.fr/mail/adecco/christophe.jpg" alt="">
</td>
<td width="55%">
<img src="http://s362172362.onlinehome.fr/mail/adecco/edito.png" alt=""><br />
<span style="color:#724c68; font-family: Arial;font-size: 16px;font-weight: 400;text-transform: uppercase;">Christophe Catoir, président</span>
</td>
</tr>
</table>
<p style="color: #414042;font-family: Arial;font-weight: 400;font-size: 14px;line-height: 21px;">Le début d'année 2015 a été hélas endeuillé par une vague de violence intolérable envers nos valeurs républicaines, et avec pour effet secondaire une stigmatisation accrue d'une partie de nos concitoyens qui luttent pour s'intégrer dans la société.<br />Au coeur de son engagement pour l'égalité des chances en amont de l'emploi, la Fondation Groupe Adecco a su développer des partenariats plein de sens avec des associations qui oeuvrent au quotidien pour transmettre aux jeunes l'esprit d'entreprendre et une meilleure connaissance du monde.</p>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#f3f3f3">
<tr>
<td height="30"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#f3f3f3">
<tr>
<td>
<img src="http://s362172362.onlinehome.fr/mail/adecco/actualites.png" alt="">
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#f3f3f3">
<tr>
<td height="30"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#ffffff">
<tr>
<td width="35%">
<img src="http://s362172362.onlinehome.fr/mail/adecco/actu.jpg" alt="">
</td>
<td style="padding:20px;">
<h2 style="font-family: Arial;font-weight: 400;color: #724c68;font-size: 18px;line-height: 23px; margin-top:0;">Appels à projets : découvrez nos lauréats</h2>
<p style="font-family: Arial;font-weight: 400;color: #414042;font-size: 14px;line-height: 21px;">22 associations soutenues par les signataires de la Chaîne du OUI ont été primées par la Fondation. Au total, 100 000 ? leur seront versés.</p>
LIRE LA SUITE
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#f3f3f3">
<tr>
<td height="8"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#ffffff">
<tr>
<td width="35%">
<img src="http://s362172362.onlinehome.fr/mail/adecco/actu.jpg" alt="">
</td>
<td style="padding:20px;">
<h2 style="font-family: Arial;font-weight: 400;color: #724c68;font-size: 18px;line-height: 23px; margin-top:0;">La Fondation présente au 1er forum des athlètes</h2>
<p style="font-family: Arial;font-weight: 400;color: #414042;font-size: 14px;line-height: 21px;">Le 21 janvier dernier s'est tenu à Paris le 1er forum des athlètes de haut niveau organisé par le CNOSF et auquel a participé la Fondation pour présenter son programme en faveur de la reconversion des sportifs.</p>
LIRE LA SUITE
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#f3f3f3">
<tr>
<td height="8"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#ffffff">
<tr>
<td width="35%">
<img src="http://s362172362.onlinehome.fr/mail/adecco/actu.jpg" alt="">
</td>
<td style="padding:20px;">
<h2 style="font-family: Arial;font-weight: 400;color: #724c68;font-size: 18px;line-height: 23px; margin-top:0;">Appels à projets : découvrez nos lauréats</h2>
<p style="font-family: Arial;font-weight: 400;color: #414042;font-size: 14px;line-height: 21px;">22 associations soutenues par les signataires de la Chaîne du OUI ont été primées par la Fondation. Au total, 100 000 ? leur seront versés.</p>
LIRE LA SUITE
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#f3f3f3">
<tr>
<td height="30"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#c8d35d">
<tr>
<td width="100%;">
<img src="http://s362172362.onlinehome.fr/mail/adecco/groupe.jpg" style="width:100%;" class="img_mob" title="" alt="" />
</td>
</tr>
<tr>
<td style="padding:20px;">
<p style="font-family: Arial;font-weight: 400;color: white;font-size: 18px;line-height: 21px;">Arpejeh : atelier découverte des métiers (Marseille) ou parrainage d'un jeune (France entière)</p>
LIRE LA SUITE
<p style="font-family: Arial;font-weight: 400;color: white;font-size: 18px;line-height: 21px;">Arpejeh : atelier découverte des métiers (Marseille) ou parrainage d'un jeune (France entière)</p>
LIRE LA SUITE
<p style="font-family: Arial;font-weight: 400;color: white;font-size: 18px;line-height: 21px;">Arpejeh : atelier découverte des métiers (Marseille) ou parrainage d'un jeune (France entière)</p>
LIRE LA SUITE
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#f3f3f3">
<tr>
<td height="30"></td>
</tr>
</table>
</td>
</tr>
</table>
<table width="220" border="0" cellspacing="0" cellpadding="0" align="right">
<tr>
<td valign="top" align="left" style="color:#000000; font-family:Arial, Helvetica, sans-serif, 'PT Sans'; font-size:13px; padding:0px 0px 0px 0;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#eb212e">
<tr>
<td style="padding:20px;">
<img src="http://s362172362.onlinehome.fr/mail/adecco/decouvrez.png" alt="">
<ul style="padding-left:15px;font-size: 15px;font-weight: 300;line-height: 25px; color:white; font-family: Arial;">
<li>nos missions</li>
<li>organisations</li>
<li>nos programmes</li>
<li>appels à projets</li>
</ul>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#f3f3f3">
<tr>
<td height="8"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#724c68">
<tr>
<td>
<img src="http://s362172362.onlinehome.fr/mail/adecco/temoignage.jpg" class="img_mob" alt="">
</td>
</tr>
<tr>
<td style="padding:20px;">
<img src="http://s362172362.onlinehome.fr/mail/adecco/temoignage.png" alt="">
<p style="color:white;font-family: Arial;font-size: 18px;font-weight: 400;line-height: 26px;">"C'est une réelle joie, un vrai privilège d'avoir pu vivre cette expérience."</p>
<p style="color:white;font-family: Arial;font-size: 14px;font-weight: 400;line-height: 21px;">Retrouvez le témoignage d'Olivier Léon, Responsable des Opérations Nationales Adecco France qui nous fait part de sa récente expérience aux côtés de 100 000 entrepreneurs.</p>
LIRE LA SUITE
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#f3f3f3">
<tr>
<td height="30"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="">
<tr>
<td style="padding: 0 8px;">
<span style="text-transform: uppercase; color:#a9a9a9;font-family: Arial;font-size: 16px;font-weight: 700;line-height: 26px;text-transform: uppercase;">En 2015, la fondation a renouvelé son partenariat pour :</span>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="">
<tr>
<td style="padding:20px 10px;" width="30%">
<img src="http://s362172362.onlinehome.fr/mail/adecco/2.png" alt="">
</td>
<td>
<span style="color: #454545;font-family: Arial;font-size: 12px;font-weight: 700;line-height: 17px;">ans avec le Comité Paralympique et Sportif Français (CPSF) dans le cadre du PAE.</span>
</td>
</tr>
<tr>
<td style="padding:20px 10px;" width="30%">
<img src="http://s362172362.onlinehome.fr/mail/adecco/12.png" alt="">
</td>
<td>
<span style="color: #454545;font-family: Arial;font-size: 12px;font-weight: 700;line-height: 17px;">sportifs ont témoigné de cet accompagnement à travers...</span>
</td>
</tr>
<tr>
<td style="padding:20px 10px;" width="30%">
<img src="http://s362172362.onlinehome.fr/mail/adecco/1.png" alt="">
</td>
<td>
<span style="color: #454545;font-family: Arial;font-size: 12px;font-weight: 700;line-height: 17px;">film co-produit par le Labho, le CNOSF, le CPSF et la Fondation.</span>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#f3f3f3">
<tr>
<td height="30"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#9b6f8f">
<tr>
<td>
<img src="http://s362172362.onlinehome.fr/mail/adecco/questions-reponses.jpg" class="img_mob" alt="">
</td>
</tr>
<tr>
<td style="padding:20px;">
<p style="color: white;font-family: Arial;font-size: 14px;font-weight: 400;line-height: 21px;">Qu'est-ce que le mécénat de compétences et comment y participer au sein du Groupe Adecco ?</p>
</td>
</tr>
<tr>
<td align="center" valign="middle">
<div>
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="#" style="height:50px;v-text-anchor:middle;width:180px;" arcsize="15%" stroke="f" fillcolor="#ffffff">
<w:anchorlock/>
<center>
<![endif]-->
Mécénat de compétences
<!--[if mso]>
</center>
</v:roundrect>
<![endif]-->
</div>
</td>
</tr>
<tr>
<td height="30"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#f3f3f3">
<tr>
<td height="8"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#17b8cb">
<tr>
<td style="padding:20px 20px 0;">
<img src="http://s362172362.onlinehome.fr/mail/adecco/contact.png" alt="">
</td>
</tr>
<tr>
<td style="padding:20px;">
<img src="http://s362172362.onlinehome.fr/mail/adecco/mail.png" alt="">
<img src="http://s362172362.onlinehome.fr/mail/adecco/facebook.png" alt="">
<img src="http://s362172362.onlinehome.fr/mail/adecco/twitter.png" alt="">
<img src="http://s362172362.onlinehome.fr/mail/adecco/linkedin.png" alt="">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- FOOTER -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#f3f3f3">
<tr>
<td>
<table width="700" border="0" cellspacing="0" cellpadding="0" align="center" class="devicewidth" style="">
<tr>
<td height="30"> </td>
</tr>
<tr>
<td align="center" style="padding: 0 50px 50px; color: #999; font-family:Arial, Helvetica, sans-serif, 'PT Sans'; font-size: 13px; font-weight: 700;">
�2015 Groupe Adecco - Tous droits r�serv�s<br />Vous recevez cette newsletter car vous �tes abonn� aux actualit�s de la Fondation Groupe Adecco.<br />Si vous souhaitez vous d�sinscrire, cliquez ici.
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Yeah, I have seen this issue a lot with sidebars. You have two choices here. You can fiddle with all of the padding/margins/borders and some MSO stuff as per this blog: https://www.emailonacid.com/blog/article/email-development/removing_unwanted_spacing_or_gaps_between_tables_in_outlook_2007_2010
Or you can use "ghost columns" just for Outlook to make it line up, like so:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Fondation Groupe Adecco</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0," />
<style type="text/css">
#import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800);
#import url(http://fonts.googleapis.com/css?family=PT+Sans:400,700);
html { width: 100%; }
body {margin:0; padding:0; width:100%; -webkit-text-size-adjust:none; -ms-text-size-adjust:none;}
img {border:0; -ms-interpolation-mode:bicubic;}
table {table-layout:fixed;}
.ReadMsgBody { width: 100%;}
.ExternalClass {width: 100%;}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; }
a:hover {text-decoration:underline !important;}
.images {display:block !important; width:100% !important;}
[style*="Open Sans"] {
font-family: 'Open Sans', Arial, sans-serif !important
}
[style*="PT Sans"] {
font-family: 'PT Sans', Arial, sans-serif !important
}
.img_mob {
width: 100% !important;
}
/* MEDIA QUIRES */
#media only screen and (max-width:640px)
{
body {width:auto!important;}
table[class=devicewidth] {width:70%!important;}
table[class=devicewidth] table {width:100%!important;}
img.resize {max-width: 100%!important;}
}
#media only screen and (max-width:480px)
{
table[class=devicewidth] {width:320px!important;}
.full {display:block;width:100%;}
* {
-webkit-text-size-adjust: none !important;
}
table[class="none"], tr[class="none"], td[class="none"], br[class="none"], span[class="none"] {
display: none !important;
}
*[class].table {
width: 320px !important;
}
*[class].small {
display: block !important;
width: 320px !important;
overflow: visible !important;
float: none !important;
height: auto !important;
}
*[class].solutions {
width: 320px !important;
height: 279px !important;
}
*[class].groupe {
width: 320px !important;
height: 180px !important;
}
.none {
display: none !important;
}
}
</style>
</head>
<body topmargin="0" rightmargin="0" bottommargin="0" leftmargin="0">
<!-- PRE HEADER -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#eb212e">
<tr>
<td>
<table width="700" border="0" cellspacing="0" cellpadding="0" align="center" class="devicewidth" style="">
<tr>
<td valign="middle" height="" style="padding:10px 1px 10px;">
<table width="280" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td align="left" style="color: #f2c5c8;font-family: Arial;font-size: 12px;font-weight: 400; padding:0px 1px 0px 0;">
<b>Newsletter Fondation groupe Adecco</b>
</td>
</tr>
</table>
<table width="400" border="0" cellspacing="0" cellpadding="0" align="right">
<tr>
<td align="left" style="color: #f2c5c8;font-family: Arial;font-size: 12px;font-weight: 400; padding:0px 1px 0px 0;">
Si vous avez des difficult�s pour visualiser ce message. Cliquez ici
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- ESPACE -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#f3f3f3">
<tr>
<td height="30"> </td>
</tr>
</table>
<!-- HEADER -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#f3f3f3">
<tr>
<td>
<table width="700" border="0" cellspacing="0" cellpadding="0" align="center" class="devicewidth" style="">
<tr>
<td valign="middle" height="">
<table width="700" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td align="center" valign="top"><img src="http://s362172362.onlinehome.fr/mail/adecco/head.jpg" width="700" height="165" style="display:block" border="0" title="Adecco vous propose ses solutions" alt="Adecco vous propose ses solutions" class="none"><!--[if !mso]><!-- -->
<img src="http://s362172362.onlinehome.fr/mail/adecco/head_mob.jpg" width="0" height="0" class="small block hide solutions" border="0" style="width:0px; overflow:hidden; float:left; display:none; line-height:0px; margin:0; padding:0;" alt="Adecco vous propose ses solutions" title="Adecco vous propose ses solutions">
<!--<![endif]--></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- ESPACE -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#f3f3f3">
<tr>
<td height="8"></td>
</tr>
</table>
<!-- HEADER -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#f3f3f3" valign="top">
<tr>
<td>
<table width="700" border="0" cellspacing="0" cellpadding="0" align="center" class="devicewidth" style="">
<tr>
<td valign="middle" height="">
<!--[if (gte mso 9)|(IE)]>
<table width="100%" style="border-spacing:0;" >
<tr>
<td width="700" valign="top" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" >
<![endif]-->
<table width="460" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td valign="top" align="left" style="color:#000000; font-family:Arial, Helvetica, sans-serif, 'PT Sans'; font-size:13px; padding:0px 0px 0px 0;">
<table border="0" cellspacing="0" cellpadding="0" align="left" width="100%" bgcolor="#ffffff">
<tr>
<td style="padding:20px;">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="35%">
<img src="http://s362172362.onlinehome.fr/mail/adecco/christophe.jpg" alt="">
</td>
<td width="55%">
<img src="http://s362172362.onlinehome.fr/mail/adecco/edito.png" alt=""><br />
<span style="color:#724c68; font-family: Arial;font-size: 16px;font-weight: 400;text-transform: uppercase;">Christophe Catoir, président</span>
</td>
</tr>
</table>
<p style="color: #414042;font-family: Arial;font-weight: 400;font-size: 14px;line-height: 21px;">Le début d'année 2015 a été hélas endeuillé par une vague de violence intolérable envers nos valeurs républicaines, et avec pour effet secondaire une stigmatisation accrue d'une partie de nos concitoyens qui luttent pour s'intégrer dans la société.<br />Au coeur de son engagement pour l'égalité des chances en amont de l'emploi, la Fondation Groupe Adecco a su développer des partenariats plein de sens avec des associations qui oeuvrent au quotidien pour transmettre aux jeunes l'esprit d'entreprendre et une meilleure connaissance du monde.</p>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#f3f3f3">
<tr>
<td height="30"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#f3f3f3">
<tr>
<td>
<img src="http://s362172362.onlinehome.fr/mail/adecco/actualites.png" alt="">
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#f3f3f3">
<tr>
<td height="30"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#ffffff">
<tr>
<td width="35%">
<img src="http://s362172362.onlinehome.fr/mail/adecco/actu.jpg" alt="">
</td>
<td style="padding:20px;">
<h2 style="font-family: Arial;font-weight: 400;color: #724c68;font-size: 18px;line-height: 23px; margin-top:0;">Appels à projets : découvrez nos lauréats</h2>
<p style="font-family: Arial;font-weight: 400;color: #414042;font-size: 14px;line-height: 21px;">22 associations soutenues par les signataires de la Chaîne du OUI ont été primées par la Fondation. Au total, 100 000 ? leur seront versés.</p>
LIRE LA SUITE
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#f3f3f3">
<tr>
<td height="8"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#ffffff">
<tr>
<td width="35%">
<img src="http://s362172362.onlinehome.fr/mail/adecco/actu.jpg" alt="">
</td>
<td style="padding:20px;">
<h2 style="font-family: Arial;font-weight: 400;color: #724c68;font-size: 18px;line-height: 23px; margin-top:0;">La Fondation présente au 1er forum des athlètes</h2>
<p style="font-family: Arial;font-weight: 400;color: #414042;font-size: 14px;line-height: 21px;">Le 21 janvier dernier s'est tenu à Paris le 1er forum des athlètes de haut niveau organisé par le CNOSF et auquel a participé la Fondation pour présenter son programme en faveur de la reconversion des sportifs.</p>
LIRE LA SUITE
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#f3f3f3">
<tr>
<td height="8"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#ffffff">
<tr>
<td width="35%">
<img src="http://s362172362.onlinehome.fr/mail/adecco/actu.jpg" alt="">
</td>
<td style="padding:20px;">
<h2 style="font-family: Arial;font-weight: 400;color: #724c68;font-size: 18px;line-height: 23px; margin-top:0;">Appels à projets : découvrez nos lauréats</h2>
<p style="font-family: Arial;font-weight: 400;color: #414042;font-size: 14px;line-height: 21px;">22 associations soutenues par les signataires de la Chaîne du OUI ont été primées par la Fondation. Au total, 100 000 ? leur seront versés.</p>
LIRE LA SUITE
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#f3f3f3">
<tr>
<td height="30"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#c8d35d">
<tr>
<td width="100%;">
<img src="http://s362172362.onlinehome.fr/mail/adecco/groupe.jpg" style="width:100%;" class="img_mob" title="" alt="" />
</td>
</tr>
<tr>
<td style="padding:20px;">
<p style="font-family: Arial;font-weight: 400;color: white;font-size: 18px;line-height: 21px;">Arpejeh : atelier découverte des métiers (Marseille) ou parrainage d'un jeune (France entière)</p>
LIRE LA SUITE
<p style="font-family: Arial;font-weight: 400;color: white;font-size: 18px;line-height: 21px;">Arpejeh : atelier découverte des métiers (Marseille) ou parrainage d'un jeune (France entière)</p>
LIRE LA SUITE
<p style="font-family: Arial;font-weight: 400;color: white;font-size: 18px;line-height: 21px;">Arpejeh : atelier découverte des métiers (Marseille) ou parrainage d'un jeune (France entière)</p>
LIRE LA SUITE
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#f3f3f3">
<tr>
<td height="30"></td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td><td width="220" valign="top" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" >
<![endif]-->
<table width="220" border="0" cellspacing="0" cellpadding="0" align="right">
<tr>
<td valign="top" align="left" style="color:#000000; font-family:Arial, Helvetica, sans-serif, 'PT Sans'; font-size:13px; padding:0px 0px 0px 0;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#eb212e">
<tr>
<td style="padding:20px;">
<img src="http://s362172362.onlinehome.fr/mail/adecco/decouvrez.png" alt="">
<ul style="padding-left:15px;font-size: 15px;font-weight: 300;line-height: 25px; color:white; font-family: Arial;">
<li>nos missions</li>
<li>organisations</li>
<li>nos programmes</li>
<li>appels à projets</li>
</ul>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#f3f3f3">
<tr>
<td height="8"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#724c68">
<tr>
<td>
<img src="http://s362172362.onlinehome.fr/mail/adecco/temoignage.jpg" class="img_mob" alt="">
</td>
</tr>
<tr>
<td style="padding:20px;">
<img src="http://s362172362.onlinehome.fr/mail/adecco/temoignage.png" alt="">
<p style="color:white;font-family: Arial;font-size: 18px;font-weight: 400;line-height: 26px;">"C'est une réelle joie, un vrai privilège d'avoir pu vivre cette expérience."</p>
<p style="color:white;font-family: Arial;font-size: 14px;font-weight: 400;line-height: 21px;">Retrouvez le témoignage d'Olivier Léon, Responsable des Opérations Nationales Adecco France qui nous fait part de sa récente expérience aux côtés de 100 000 entrepreneurs.</p>
LIRE LA SUITE
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#f3f3f3">
<tr>
<td height="30"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="">
<tr>
<td style="padding: 0 8px;">
<span style="text-transform: uppercase; color:#a9a9a9;font-family: Arial;font-size: 16px;font-weight: 700;line-height: 26px;text-transform: uppercase;">En 2015, la fondation a renouvelé son partenariat pour :</span>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="">
<tr>
<td style="padding:20px 10px;" width="30%">
<img src="http://s362172362.onlinehome.fr/mail/adecco/2.png" alt="">
</td>
<td>
<span style="color: #454545;font-family: Arial;font-size: 12px;font-weight: 700;line-height: 17px;">ans avec le Comité Paralympique et Sportif Français (CPSF) dans le cadre du PAE.</span>
</td>
</tr>
<tr>
<td style="padding:20px 10px;" width="30%">
<img src="http://s362172362.onlinehome.fr/mail/adecco/12.png" alt="">
</td>
<td>
<span style="color: #454545;font-family: Arial;font-size: 12px;font-weight: 700;line-height: 17px;">sportifs ont témoigné de cet accompagnement à travers...</span>
</td>
</tr>
<tr>
<td style="padding:20px 10px;" width="30%">
<img src="http://s362172362.onlinehome.fr/mail/adecco/1.png" alt="">
</td>
<td>
<span style="color: #454545;font-family: Arial;font-size: 12px;font-weight: 700;line-height: 17px;">film co-produit par le Labho, le CNOSF, le CPSF et la Fondation.</span>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#f3f3f3">
<tr>
<td height="30"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#9b6f8f">
<tr>
<td>
<img src="http://s362172362.onlinehome.fr/mail/adecco/questions-reponses.jpg" class="img_mob" alt="">
</td>
</tr>
<tr>
<td style="padding:20px;">
<p style="color: white;font-family: Arial;font-size: 14px;font-weight: 400;line-height: 21px;">Qu'est-ce que le mécénat de compétences et comment y participer au sein du Groupe Adecco ?</p>
</td>
</tr>
<tr>
<td align="center" valign="middle">
<div>
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="#" style="height:50px;v-text-anchor:middle;width:180px;" arcsize="15%" stroke="f" fillcolor="#ffffff">
<w:anchorlock/>
<center>
<![endif]-->
Mécénat de compétences
<!--[if mso]>
</center>
</v:roundrect>
<![endif]-->
</div>
</td>
</tr>
<tr>
<td height="30"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#f3f3f3">
<tr>
<td height="8"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#17b8cb">
<tr>
<td style="padding:20px 20px 0;">
<img src="http://s362172362.onlinehome.fr/mail/adecco/contact.png" alt="">
</td>
</tr>
<tr>
<td style="padding:20px;">
<img src="http://s362172362.onlinehome.fr/mail/adecco/mail.png" alt="">
<img src="http://s362172362.onlinehome.fr/mail/adecco/facebook.png" alt="">
<img src="http://s362172362.onlinehome.fr/mail/adecco/twitter.png" alt="">
<img src="http://s362172362.onlinehome.fr/mail/adecco/linkedin.png" alt="">
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- FOOTER -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#f3f3f3">
<tr>
<td>
<table width="700" border="0" cellspacing="0" cellpadding="0" align="center" class="devicewidth" style="">
<tr>
<td height="30"> </td>
</tr>
<tr>
<td align="center" style="padding: 0 50px 50px; color: #999; font-family:Arial, Helvetica, sans-serif, 'PT Sans'; font-size: 13px; font-weight: 700;">
�2015 Groupe Adecco - Tous droits r�serv�s<br />Vous recevez cette newsletter car vous �tes abonn� aux actualitis de la Fondation Groupe Adecco.<br />Si vous souhaitez vous disinscrire, cliquez ici.
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
The "ghost columns" are just tables hidden in conditional tags that make it display as two adjacent TDs.
Related
If I change font weight it also change the font-family of it. How can I stop it
body{
font-family: 'sans-serif';
}
<body>
<table style="width: 100%">
<tr style="font-weight: 500">
<td style="font-size: 11px;">Shipper Account #</td>
<td style="font-size: 12px;">9585558</td>
</tr>
<tr style="font-weight: 500">
<td style="font-size: 11px;">Shipper Account #</td>
<td style="font-size: 12px;">9585558</td>
</tr>
</table>
</body>
My template looks responsive in Litmus' gmail versions, but is actually isn't, even though I am not using attribute selectors and my webkit fix is on the div tag. I'm also getting a major shift on Outlook 2016. I'm sure the error is minor but I can't find it. Thanks.
Here's my body tag:
CSS:
#media only screen and (min-width:600px) {
.mw35 {
width: 35% !important;
}
.mw65 {
width: 65% !important;
}
}
</style>
HTML:
<!-- STORY 2 CONTENT -->
<tr>
<td><!--[if mso | IE]> <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600px;"> <tr> <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"> <![endif]-->
<div style="margin:0px auto;max-width:600px;background:#FFFFFF;">
<table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;background:#FFFFFF;" align="left" border="0">
<tr>
<td style="text-align:left;vertical-align:top;border:0px;direction:ltr;font-size:0px;padding:0px 40px; display: inline-block;"><!--[if mso | IE]> <table role="presentation" border="0" cellpadding="0" cellspacing="0"> <tr> <td style="vertical-align:top;width:35%;"> <![endif]-->
<div class="mw35" style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;">
<table role="presentation" cellpadding="0" cellspacing="0" style="border:0px;vertical-align:middle;" width="100%" border="0">
<tr>
<td style="word-wrap:break-word;font-size:0px;padding: 0px 15px 20px 0px;" align="left"><table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:collapse;border-spacing:0px;" align="left" border="0">
<tr>
<td><img alt="image 2" height="auto" src="https://dummyimage.com/154x121/ecf8fb/fff" style="border:0px;border-radius:0px;display:block;font-size:13px;outline:none;text-decoration:none;width:100%;height:auto;" width="308"></td>
</tr>
</table></td>
</tr>
</table>
</div>
<!--[if mso | IE]> </td><td style="vertical-align:top;width:65%;"> <![endif]-->
<div class="mw65" style="vertical-align:top;display:inline-block;direction:ltr;font-size:16px;text-align:left;width:100%;">
<table role="presentation" cellpadding="0" cellspacing="0" style="border:0px;vertical-align:top;" width="100%" border="0">
<tr>
<td style="word-wrap:break-word;font-size:0px;padding:0px 0px 10px 0px;" align="center"><div style="cursor:auto;color:#F15B5D;font-family:'Open Sans', arial, sans-serif; text-align:left;"> <span style="margin: 0; font-family:arial,helvetica,sans-serif; color:#333333; font-size:22px; line-height:26px; font-weight:normal;"><b>LOREM IPSUM 2</b></span> </div></td>
</tr>
<tr>
<td style="word-wrap:break-word;font-size:0px;padding:0px 0px 10px 0px;" align="center"><div style="cursor:auto;color: #727272;font-family:sans-serif;font-size:16px;font-weight:normal;line-height:25.2px;text-align:left;">
<p style="margin: 0;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div></td>
</tr>
<tr>
<td style="word-wrap:break-word;font-size:0px;padding:10px 0px 30px 0px;" align="center"><table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:separate;" align="left" border="0">
<tr>
<td style="border:1px solid rgba(230,236,238,1);border-radius:4px;color:#FFFFFF;cursor:auto;padding:10px 20px;" align="center" valign="middle" bgcolor="#FFFFFF"><span>CTA</span></td>
</tr>
</table></td>
</tr>
</table>
</div>
<!--[if mso | IE]> </td></tr></table> <![endif]--></td>
</tr>
</table>
</div></td>
</tr>
Here are screen shots of how it lays correctly vs the entire body shift. Also, the responsive fix which appears correctly.
correct display
shifted
responsive display
Regarding Gmail, I'm guessing you might be using a mobile Gmail app (iOS or Android) with a non Gmail account (like an Outlook.com email address for example). This specific case, often referred to as GANGA (for Gmail Apps with Non Gmail Accounts), doesn't support <style> tags and thus media queries (as reported on Can I email). In order to get your email to work in GANGA, you must code it with a fluid/hybrid or mobile first approach so that the layout can work even without media queries.
As for Outlook, I'm not sure what major shift you're referring to. One thing I see though is that your code is not ready for Outlook at 120 dpi rendering, and that could be part of your issue. As documented here, to get a good rendering in Outlook at 120dpi, you need to:
Add the xmlns:o="urn:schemas-microsoft-com:office:office" namespace in your <html> tag.
Add the <!--[if mso]><xml><o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]--> declaration in your <head>.
Use the width property in CSS instead of the width attribute in HTML.
Use the width attribute on image elements with the desired width for Outlook. (Here your image is set at width="308" while it should only be displayed at 154px in Outlook on desktop. So it should be width="154" instead).
Here’s a full email code I adjusted and tests.
<!DOCTYPE html>
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Need help for webkit bug fix in responsive email</title>
<style>
#media only screen and (min-width:600px) {
.mw35 {
width: 35% !important;
}
.mw65 {
width: 65% !important;
}
}
</style>
<!--[if mso]>
<xml>
<o:OfficeDocumentSettings>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
</head>
<body>
<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="width:600px; margin:0 auto;" align="center">
<!-- STORY 2 CONTENT -->
<tr>
<td><!--[if mso | IE]> <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600px;"> <tr> <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"> <![endif]-->
<div style="margin:0px auto;max-width:600px;background:#FFFFFF;">
<table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;background:#FFFFFF;" align="left" border="0">
<tr>
<td style="text-align:left;vertical-align:top;border:0px;direction:ltr;font-size:0px;padding:0px 40px; display: inline-block;"><!--[if mso | IE]> <table role="presentation" border="0" cellpadding="0" cellspacing="0" style="width:100%;"> <tr> <td style="vertical-align:top;width:35%;"> <![endif]-->
<div class="mw35" style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;">
<table role="presentation" cellpadding="0" cellspacing="0" style="border:0px;vertical-align:middle;" width="100%" border="0">
<tr>
<td style="word-wrap:break-word;font-size:0px;padding: 0px 15px 20px 0px;" align="left"><table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:collapse;border-spacing:0px;" align="left" border="0">
<tr>
<td><img alt="image 2" height="auto" src="https://dummyimage.com/154x121/ecf8fb/fff" style="border:0px;border-radius:0px;display:block;font-size:13px;outline:none;text-decoration:none;width:100%;height:auto;" width="154"></td>
</tr>
</table></td>
</tr>
</table>
</div>
<!--[if mso | IE]> </td><td style="vertical-align:top;width:65%;"> <![endif]-->
<div class="mw65" style="vertical-align:top;display:inline-block;direction:ltr;font-size:16px;text-align:left;width:100%;">
<table role="presentation" cellpadding="0" cellspacing="0" style="border:0px;vertical-align:top;" width="100%" border="0">
<tr>
<td style="word-wrap:break-word;font-size:0px;padding:0px 0px 10px 0px;" align="center"><div style="cursor:auto;color:#F15B5D;font-family:'Open Sans', arial, sans-serif; text-align:left;"> <span style="margin: 0; font-family:arial,helvetica,sans-serif; color:#333333; font-size:22px; line-height:26px; font-weight:normal;"><b>LOREM IPSUM 2</b></span> </div></td>
</tr>
<tr>
<td style="word-wrap:break-word;font-size:0px;padding:0px 0px 10px 0px;" align="center"><div style="cursor:auto;color: #727272;font-family:sans-serif;font-size:16px;font-weight:normal;line-height:25.2px;text-align:left;">
<p style="margin: 0;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div></td>
</tr>
<tr>
<td style="word-wrap:break-word;font-size:0px;padding:10px 0px 30px 0px;" align="center"><table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:separate;" align="left" border="0">
<tr>
<td style="border:1px solid rgba(230,236,238,1);border-radius:4px;color:#FFFFFF;cursor:auto;padding:10px 20px;" align="center" valign="middle" bgcolor="#FFFFFF"><span>CTA</span></td>
</tr>
</table></td>
</tr>
</table>
</div>
<!--[if mso | IE]> </td></tr></table> <![endif]--></td>
</tr>
</table>
</div></td>
</tr>
</table>
</body>
</html>
You can find a test run for this code on Email on Acid here.
When sending the layout to Outlook 2016 it takes the multi-column table section and shrinks the width of the left and right (possibly increasing the width of the spacer center column too).
Have tried to add a spacer image at the bottom of each column to keep the width, but don't want those to have to load/soak up the file size. depending on the number of rows I add.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml "
xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name=”x-apple-disable-message-reformatting”>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
/*////// CLIENT-SPECIFIC STYLES //////*/
.ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail/Outlook.com to display emails at full width. */
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div{line-height:100%;} /* Force Hotmail/Outlook.com to display line heights normally. */
table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;} /* Remove spacing between tables in Outlook 2007 and up. */
#outlook a{padding:0;} /* Force Outlook 2007 and up to provide a "view in browser" message. */
img{-ms-interpolation-mode: bicubic;} /* Force IE to smoothly render resized images. */
body, table, td, p, a, li, blockquote{-ms-text-size-adjust:100%; -webkit-text-size-adjust:100%;} /* Prevent Windows- and Webkit-based mobile platforms from changing declared text sizes. */
/* CLIENT-SPECIFIC STYLES */
body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
img { -ms-interpolation-mode: bicubic; }
/* RESET STYLES */
img { max-width: 100% !important; height:auto !important; border: 0; line-height: 100%; outline: none; text-decoration: none; }
table { border-collapse: collapse !important; }
body { margin: 0 !important; padding: 0 !important; width: 100% !important; min-width:100% !important;}
/* iOS BLUE LINKS */
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
*[class=table]
{
max-width: 600px !important;
width: 100% !important;
border-collapse: collapse !important;
height:auto !important; }
/* MOBILE STYLES */
#media only screen and (max-device-width: 480px)
{
.img-max {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
}
.max-width {
width: 100% !important;
max-width: 100% !important;
border-collapse: collapse !important;
height:auto !important;
}
.mobile-wrapper {
width: 100% !important;
max-width: 100% !important;
height:auto !important;
}
.mobile-padding {
padding-left: 5% !important;
padding-right: 5% !important;
}
.img-social {
width: 15% !important;
max-width: 50% !important;
height: auto !important;
}
*[class=stack]
{
display: block !important;
}
}
/* ANDROID CENTER FIX */
div[style*="margin: 16px 0;"] { margin: 0 !important; }
#actual-table { border-collapse: collapse; }
#actual-table td {
width: 20%;
padding: 10px;
vertical-align: top;
}
#actual-table td:nth-child(even) {
background: #ccc;
}
#actual-table td:nth-child(odd) {
background: #eee;
}
</style>
</head>
<body style="text-align:center; margin: 0 !important; padding: 0; !important;" >
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top" width="100%" background="bg.jpg" style="background-size: cover; padding: 0;background: #999999;" bgcolor="#999999" class="mobile-wrapper">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;" >
<tr>
<td align="center" valign="top" style="padding: 0;">
<table cellpadding="0" cellspacing="0" width="100%"><tr><td><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<tr>
<td align="left" valign="top" style="padding-top:8px;padding-bottom:5px;">
<font face="Arial, Verdana, Helvetica, sans-serif" color="#000000" font="" size="1">View in browser</font> <font face="Arial, Verdana, Helvetica, sans-serif" color="#000000" font="" size="1">Link to Forward To A Friend</font> </td></tr>
</table></td></tr></table>
<table cellpadding="0" cellspacing="0" width="100%"><tr><td> <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<tr>
<td align="center" valign="top" style="padding:0;">
<img src="" class="banner" style="display:block;" />
</td>
</tr>
</table></td></tr></table>
</td>
</tr></table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td align="center" height="100%" valign="top" width="100%" style="background-color: #999999;" bgcolor="#999999" class="mobile-wrapper">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table cellpadding="0" cellspacing="0" width="100%"><tr><td><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<tr>
<td class="stack" align="center" valign="top" style="padding-top:10px;padding-right:10px;padding-left:10px;padding-bottom:10px;background-color:#F4BB8A;" bgcolor="#F4BB8A">
<font face="Times New Roman, Times, serif" color="#000000" font="" size="4"><strong>Add A Headline To Announce Your Main Topic</strong></font></td></tr>
<tr>
<td class="stack" align="left" valign="top" style="padding-top:10px;padding-right:10px;padding-left:10px;padding-bottom:10px;background-color:#F6F7F3;" bgcolor="#F6F7F3"><font face="Arial, Verdana, Helvetica, sans-serif" color="#000000" font="" size="3">
Add a brief message. If readers need to know more than you can fit here, add a link to an outside resource that covers the rest.<br />
THE MAXIMUM SIZE FOR IMAGES IN THIS SECTION IS 580px WIDE.
</font>
</td>
</tr>
<tr>
<td align="left" valign="top" style="padding:10px;background-color:#999999;" bgcolor="#999999">
</td>
</tr>
</table></td></tr></table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td align="center" height="100%" valign="top" width="100%" style="background-color: #999999;" bgcolor="#999999" >
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;" >
<tr>
<td align="center" valign="top" style="font-size:0;">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600" id="actual-table">
<tr>
<td align="left" valign="top" width="280" style="background-color: #999999;" bgcolor="#999999" >
<![endif]-->
<div style="display:inline-block; max-width:50%; min-width:280px; vertical-align:top; width:100%; height:100%;background-color: #999999;" bgcolor="#999999" class="mobile-wrapper">
<table cellpadding="0" cellspacing="0" width="100%"><tr><td><table align="center" border="0" cellpadding="0" cellspacing="0" width="280" style="max-width:280px;" class="max-width">
<tbody>
<tr>
<td align="center" valign="top" style="padding-bottom:10px;background-color:#999999;" bgcolor="#999999"> </td>
</tr>
<tr>
<td align="left" valign="top" style="padding:10px;background-color:#393B63;" bgcolor="#393B63">
<font face="Times New Roman, Times, serif" color="#F6F7F3" size="3"><strong>I ♥ Email</strong></font></td>
</tr>
<tr>
<td align="left" valign="top" style="padding:10px;background-color:#F6F7F3;" bgcolor="#F6F7F3"><font face="Arial, Verdana, Helvetica, sans-serif" color="#000000" size="2">Include article copy. Be sure to make the articles short and concise. People tend to only read a couple of paragraphs at a time.<br />
<br />
THE MAXIMUM SIZE FOR IMAGES IN THIS SECTION IS 260px WIDE.<br />
<br />
When editing sections from copied mailings, delete old messages by clicking the red X, move messages up or down in order of importance by clicking the blue up and down arrows and add new sections by clicking the add section here (green '+' icon).</font></td>
</tr>
<tr>
<td align="left" valign="top" style="padding:10px;background-color:#999999;" bgcolor="#999999">
</td>
</tr>
</tbody>
</table></td></tr></table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
<td width="20" style="padding:0; font-size: 1px;"> </td>
<td align="right" valign="top" width="280" style="background-color: #999999;" bgcolor="#999999" >
<![endif]-->
<div style="display:inline-block; max-width:50%; min-width:280px; vertical-align:top; width:100%; height:100%;background-color: #999999;" bgcolor="#999999" class="mobile-wrapper">
<table cellpadding="0" cellspacing="0" width="100%"><tr><td><table align="center" border="0" cellpadding="0" cellspacing="0" width="280" style="max-width:280px;" class="max-width">
<tbody>
<tr>
<td align="center" valign="top" style="padding-bottom:10px;background-color:#999999;" bgcolor="#999999"> </td>
</tr>
<tr>
<td align="left" valign="top" style="padding:10px;background-color:#393B63;" bgcolor="#393B63">
<font face="Times New Roman, Times, serif" color="#F6F7F3" size="2"><strong>I ♥ Email</strong></font></td>
</tr>
<tr>
<td align="left" valign="top" style="padding:10px;background-color:#F6F7F3;" bgcolor="#F6F7F3"><font face="Arial, Verdana, Helvetica, sans-serif" color="#000000" size="2">Include article copy. Be sure to make the articles short and concise. </font>
</td>
</tr>
<tr>
<td align="left" valign="top" style="padding:10px;background-color:#999999;" bgcolor="#999999">
</td>
</tr>
</tbody>
</table></td></tr></table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td align="center" height="100%" valign="top" width="100%" bgcolor="#999999" style="background: #999999;padding: 0;">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table cellpadding="0" cellspacing="0" width="100%"><tr><td><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<tr>
<td class="stack" align="left" valign="top" style="padding-top:10px;padding-right:10px;padding-left:10px;padding-bottom:10px;background-color:#F4BB8A;" bgcolor="#F4BB8A">
<font face="Times New Roman, Times, serif" color="#000000" font="" size="3"><strong>Design emails people love</strong></font></td></tr>
<tr>
<td class="stack" align="!3BODYFONTALIGN!" valign="top" style="padding-top:10px;padding-right:10px;padding-left:10px;padding-bottom:10px;background-color:#FFFFFF;" bgcolor="#FFFFFF"><font face="Arial, Verdana, Helvetica, sans-serif" color="#000000" font="" size="2">Include article copy. Be sure to make the articles short and concise. People tend to only read a couple of paragraphs at a time.<br /><br />
THE MAXIMUM SIZE FOR IMAGES IN THIS SECTION IS 580px WIDE.
</font>
</td>
</tr>
<tr>
<td align="left" valign="top" style="padding:10px;background-color:#999999;" bgcolor="#999999">
</td>
</tr>
</table>
</td></tr></table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td align="center" height="100%" valign="top" width="100%" bgcolor="#0F0D35" style="background: #0F0D35;padding: 0;">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table cellpadding="0" cellspacing="0" width="100%"><tr><td><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<tr>
<td class="stack" align="center" valign="top" style="padding:10px;background-color:#0F0D35;" bgcolor="#0F0D35">
<font face="Arial, Verdana, Helvetica, sans-serif" color="#FFFFFF" font="" size="2"></font></td>
</tr>
</table></td></tr></table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td align="center" height="100%" valign="top" width="100%" style="background-color: #0F0D35;" bgcolor="#0F0D35" class="mobile-wrapper">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table width="600" border="0" cellspacing="5" cellpadding="5"> <tr> <td colspan="3"> <hr align="left" width="100%" noshade> <p> <font size="-2" face="Verdana, Arial, Helvetica, sans-serif" color= "#FFFFFF"><strong>Generated by</strong></font> <img src= "https://images.marketvolt.com/mv_gif_transparent.gif" width="60" height="55" hspace="4" vspace="0" border="0" align="middle"><font size="-2" face= "Verdana, Arial, Helvetica, sans-serif" color= "#FFFFFF"><strong>Learn more</strong></font> </p> </td> </tr></table><img width="1" height="1" src="https://images.marketvolt.com/space.gif">
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</body>
</html>
After a couple days of trying to figure this out via my own research, I've officially given up and have come to you experts for help.
I have a client who is requesting the following image be used for their email signature with phone number, email and website clickable, so I've resorted to slicing it up and going that route because image mapping isn't working when being sent from his Mac, although it works on his Mac when I send it via Gmail.
They are using Outlook on a Mac for their business. I'm testing this on Outlook via PC and on other clients via EmailOnAcid before delivering the end-product and having the following problems:
Outlook sent to Outlook
Outlook to Gmail
Outlook to Outlook w/ Line-Height: 0
Outlook to Gmail w/ Line-Height: 0
So essentially, everything initially looks great when sent from Outlook to Outlook, but those annoying horizontal gaps occur in Outlook to Gmail.
When I do the line-height trick, Outlook to Outlook now collapses upon itself while Gmail is now looking good.
I've tried all the tricks here - https://www.emailonacid.com/blog/article/email-development/12_fixes_for_the_image_spacing_in_html_emails - and elsewhere to no avail.
FYI The code might not be very consistent anymore because I've tried a bunch of different things, but it should give you an idea. Also, the resulting image is a bit over twice the size as what I need due to making things high-resolution in the end.
Any help would be super-appreciated... Thanks!
<!DOCTYPE html>
<html>
<head>
<meta>
<title>Untitled Document</title>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="980">
<tr>
<td><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_01.jpg" style="display: block;"></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="49px"><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_02.jpg" style="display: block;"></td>
<td height="49px"><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_03.jpg" style="display: block;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_04.jpg" style="display: block;"></td>
<td><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_05.jpg" style="display: block;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_06.jpg" style="display: block;"></td>
<td><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_07.jpg" style="display: block;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_08.jpg" style="display: block;"></td>
<td><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_09.jpg" style="display: block;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_10.jpg" style="display: block;"></td>
<td><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_11.jpg" style="display: block;"></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Try style="border-collapse: collapse !important;" on every TD element and table. That will be your first step.
<!DOCTYPE html>
<html>
<head>
<meta>
<title>Untitled Document</title>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="980">
<tr>
<td style="border-collapse: collapse !important;"><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_01.jpg" style="display: block;"></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse !important;">
<tr>
<td height="49px" style="border-collapse: collapse !important;"><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_02.jpg" style="display: block;"></td>
<td height="49px" style="border-collapse: collapse !important;"><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_03.jpg" style="display: block;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse !important;">
<tr>
<td style="border-collapse: collapse !important;"><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_04.jpg" style="display: block;"></td>
<td style="border-collapse: collapse !important;"><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_05.jpg" style="display: block;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse !important;">
<tr>
<td style="border-collapse: collapse !important;"><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_06.jpg" style="display: block;"></td>
<td style="border-collapse: collapse !important;"><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_07.jpg" style="display: block;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse !important;">
<tr>
<td style="border-collapse: collapse !important;"><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_08.jpg" style="display: block;"></td>
<td style="border-collapse: collapse !important;"><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_09.jpg" style="display: block;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse !important;">
<tr>
<td style="border-collapse: collapse !important;"><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_10.jpg" style="display: block;"></td>
<td style="border-collapse: collapse !important;"><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_11.jpg" style="display: block;"></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
I have had some luck with this template in Outlook before. Frankly, I am not sure why. What I do to make it work is to open this in Word, copy and paste into Outlook. Dunno, Give it a try?
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Email Signature</title>
<style type="text/css">
body {
background-color: #ffffff;
margin: 0;
padding: 0;
color: #000;
font-family: Arial, Helvetica, sans-serif;
font-size: 75%;
line-height: 5px;
top: auto;
}
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0; /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
padding-right: 15px;
padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
}
a img {
border: none;
}
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
color: #42413C;
text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}
a:visited {
color: #6E6C64;
text-decoration: underline;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
text-decoration: none;
}
/* ~~ this fixed width container surrounds all other elements ~~ */
.container {
background-color: #FFF;
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
}
/* ~~ This is the layout information. ~~
1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
*/
.content {
padding: 0px 0;
}
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the overflow:hidden on the .container is removed */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
.container .content div center a {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<blockquote>
<table border="0" cellpadding="0" cellspacing="0" width="980">
<tr>
<td><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_01.jpg" style="display: block;"></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="49px"><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_02.jpg" style="display: block;"></td>
<td height="49px"><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_03.jpg" style="display: block;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_04.jpg" style="display: block;"></td>
<td><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_05.jpg" style="display: block;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_06.jpg" style="display: block;"></td>
<td><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_07.jpg" style="display: block;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_08.jpg" style="display: block;"></td>
<td><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_09.jpg" style="display: block;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_10.jpg" style="display: block;"></td>
<td><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_11.jpg" style="display: block;"></td>
</tr>
</table>
</td>
</tr>
</table>
</blockquote>
</div>
</div>
</body>
</html>
I'm building a mobile friendly email and the main images do not load when the email initially loads (the small facebook and twitter icons in the footer do load). I say, loading rather than displaying bc there aren't any red x's on the screen or any indication there there should be images there. However, if I go back to the inbox and click on the email to view it again, the images load just fine. I tested this on the iPhone and Android in the web email clients, yahoo and gmail, and it's happening in all those instances. I've received mobile emails in the past where the images load just fine, so it's got to be my code. I've been having a heard time finding the answer to this, so I hope someone here is familiar with this issue and can help me out. Let me know if you have questions. I appreciate the help, very much.
Note: I discovered it's also not displaying the images in Safari but only on first load. When the page is reloaded - just like in the mobile browsers, it loads the images.
Here's a link from Campaign Monitor:
http://testclient.createsend4.com/t/ViewEmail/y/8B8E5FE792737812
Here's the code:
<html>
<head>
<!-- If you delete this tag, the sky will fall on your head -->
<meta name="viewport" content="width=device-width" />
<title></title>
<style type="text/css">
<!--
img {display:block; border:0;}
body {
background-color: #ffffff;
-webkit-font-smoothing:antialiased;
-webkit-text-size-adjust:none;
margin:0;
padding:0;
} -->
</style>
</head>
<body bgcolor="#ffffff" style="width:100%;height:100%;">
<table cellpadding="0" cellspacing="0" width="100%" align="center" bgcolor="#ffffff" border="0" style="font-family:Arial, Helvetica, sans-serif">
<tr><td>
<!-- HEADER -->
<div class="content" style="max-width:600px;margin:0 auto;display:block;">
<table cellpadding="0" cellspacing="0" height="37" align="center" bgcolor="#ffffff" border="0" style="font-family:Arial, Helvetica, sans-serif">
<tr>
<td valign="bottom" style="text-align:center; color:#5b5a5a; font-size:11px;">
Email not displaying correctly? <webversion style="color:#5b5a5a; text-decoration:underline;">View it in your browser</webversion>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" height="34" align="center" bgcolor="#ffffff" border="0" style="font-family:Arial, Helvetica, sans-serif">
<tr>
<td style="color:#939497; text-align:center;"><strong>Shop Online</strong> | <strong>Find A Store</strong> | <strong>Forward To A Friend</strong>
</td>
</tr>
</table>
</div>
<table cellpadding="0" cellspacing="0" width="100%" align="center" bgcolor="#000000" border="0" style="font-family:Arial, Helvetica, sans-serif">
<tr><td>
<div class="content" style="max-width:600px;margin:0 auto;display:block;">
<table cellpadding="0" cellspacing="0" align="center" bgcolor="#000000" style="font-family:Arial, Helvetica, sans-serif" border="0">
<tr>
<td><img src="images/2959_BYRTO_July_emailer_06.png" width="100%" style="display:block;border:0;color:#ffffff;" alt="Beyond RTO Home Furnishings & Appliances For Less." border="0" /></td>
</tr>
</table>
</div>
</td></tr>
</table>
<!-- PROMO -->
<div class="content" style="max-width:600px;margin:0 auto;display:block;">
<table cellpadding="0" cellspacing="0" align="center" bgcolor="#ffffff" style="font-family:Arial, Helvetica, sans-serif" border="0">
<tr>
<td><img src="images/2959_BYRTO_July_emailer_07.jpg" border="0" width="100%" style="display:block;" alt="Celebrate Christmas in July - Register to Win $1000 Shopping Spree!"/></td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" align="center" bgcolor="#ffffff" style="font-family:Arial, Helvetica, sans-serif" border="0">
<tr>
<td><img src="images/2959_BYRTO_July_emailer_08.jpg" border="0" width="100%" style="display:block;" alt="Plus enjoy this bonus offer and SAVE!"/></td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" align="center" bgcolor="#ffffff" style="font-family:Arial, Helvetica, sans-serif" border="0">
<tr>
<td><img src="images/2959_BYRTO_July_emailer_09.jpg" width="100%" border="0" style="display:block;" alt="Reveal Your Deal with Beyond RTO!"/></td>
</tr>
</table>
</div>
<!-- FOOTER -->
<table cellpadding="0" cellspacing="0" width="100%" align="center" bgcolor="#000000" border="0" style="font-family:Arial, Helvetica, sans-serif">
<tr><td>
<div class="content" style="max-width:600px;margin:0 auto;display:block;">
<table cellpadding="0" cellspacing="0" align="center" bgcolor="#000000" style="font-family:Arial, Helvetica, sans-serif" border="0">
<tr>
<td><img src="images/2959_BYRTO_July_emailer_10.png" width="100%" border="0" style="display:block;" alt="Beyond RTO Home Furnishings & Appliances For Less."/></td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" height="21" align="center" style="font-family:Arial, Helvetica, sans-serif" border="0">
<tr>
<td align="center" valign="top" style="font-size:13px;color:#939497;"><strong>Shop Online</strong> | <strong>Find A Store</strong> | <strong>Forward To A Friend</strong></td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" align="center" style="font-family:Arial, Helvetica, sans-serif" border="0">
<tr>
<td><img src="images/2959_BYRTO_July_emailer_13.png" width="40" height="44" border="0" style="display:block;"/></td>
<td><img src="images/2959_BYRTO_July_emailer_14.png" width="36" height="44" border="0" style="display:block;"/></td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" height="50" align="center" style="font-family:Arial, Helvetica, sans-serif" border="0">
<tr>
<td align="center" valign="top" style="font-size:10px;color:#bebebe;line-height:14px;">
© Copyright 2013 Baber's. All Rights Reserved.<br/>
You are currently subscribed as [email]. Click here to <unsubscribe style="color:#82c13a;text-decoration:underline;">unsubscribe</unsubscribe>.</td>
</tr>
</table>
</div>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html>
I finally figured this out. Once I discovered this was also happening in Safari, it was easier to trouble shoot. I figured out that some of the tables did not have a width defined and Safari requires a width value and so do mobile email clients apparently. I normally have widths on all my tables, so didn't realize that was the culprit this time.