I have this code that works great to remove the spaces between images but then when I embed it into a gmail message and send it, the receiver gets an email with spaces between images.
Anyone has any idea why it does that into gmail and not in a regular browser?
Thanks
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>img_test</title>
<style type="text/css">
table {
border: none;
border-collapse: collapse;
}
table img {
display: block;
}
</style>
</head>
<body>
<table width="auto" border="0" border-spacing="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td><img src="https://picsum.photos/200" alt="" height="auto" width="100%" /></td>
</tr>
<tr>
<td><img src="https://picsum.photos/200" alt="" height="auto" width="100%" /></td>
</tr>
</tbody>
</table>
</body>
</html>
But if I try the template done by professionals below it works perfectly fine on gmail, its mobile reponsive and no spacing everything is smooth.
<!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" xmlns:o="urn:schemas-microsoft-com:office:office" style="width:100%;font-family:Arial, sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;padding:0;Margin:0">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta name="x-apple-disable-message-reformatting">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="telephone=no" name="format-detection">
<title>New Template</title>
<!--[if (mso 16)]>
<style type="text/css">
a {text-decoration: none;}
</style>
<![endif]-->
<!--[if gte mso 9]><style>sup { font-size: 100% !important; }</style><![endif]-->
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG></o:AllowPNG>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<style type="text/css">
#outlook a {
padding:0;
}
.ExternalClass {
width:100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height:100%;
}
.es-button {
mso-style-priority:100!important;
text-decoration:none!important;
}
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;
}
.es-desk-hidden {
display:none;
float:left;
overflow:hidden;
width:0;
max-height:0;
line-height:0;
mso-hide:all;
}
[data-ogsb] .es-button {
border-width:0!important;
padding:10px 20px 10px 20px!important;
}
[data-ogsb] .es-button.es-button-1 {
padding:10px 30px!important;
}
#media only screen and (max-width:600px) {p, ul li, ol li, a { line-height:150%!important } h1 { font-size:30px!important; text-align:center; line-height:120%!important } h2 { font-size:26px!important; text-align:center; line-height:120%!important } h3 { font-size:20px!important; text-align:center; line-height:120%!important } .es-header-body h1 a, .es-content-body h1 a, .es-footer-body h1 a { font-size:30px!important } .es-header-body h2 a, .es-content-body h2 a, .es-footer-body h2 a { font-size:26px!important } .es-header-body h3 a, .es-content-body h3 a, .es-footer-body h3 a { font-size:20px!important } .es-menu td a { font-size:16px!important } .es-header-body p, .es-header-body ul li, .es-header-body ol li, .es-header-body a { font-size:16px!important } .es-content-body p, .es-content-body ul li, .es-content-body ol li, .es-content-body a { font-size:16px!important } .es-footer-body p, .es-footer-body ul li, .es-footer-body ol li, .es-footer-body a { font-size:16px!important } .es-infoblock p, .es-infoblock ul li, .es-infoblock ol li, .es-infoblock a { font-size:12px!important } *[class="gmail-fix"] { display:none!important } .es-m-txt-c, .es-m-txt-c h1, .es-m-txt-c h2, .es-m-txt-c h3 { text-align:center!important } .es-m-txt-r, .es-m-txt-r h1, .es-m-txt-r h2, .es-m-txt-r h3 { text-align:right!important } .es-m-txt-l, .es-m-txt-l h1, .es-m-txt-l h2, .es-m-txt-l h3 { text-align:left!important } .es-m-txt-r img, .es-m-txt-c img, .es-m-txt-l img { display:inline!important } .es-button-border { display:block!important } a.es-button, button.es-button { font-size:20px!important; display:block!important; border-width:10px 0px 10px 0px!important } .es-btn-fw { border-width:10px 0px!important; text-align:center!important } .es-adaptive table, .es-btn-fw, .es-btn-fw-brdr, .es-left, .es-right { width:100%!important } .es-content table, .es-header table, .es-footer table, .es-content, .es-footer, .es-header { width:100%!important; max-width:600px!important } .es-adapt-td { display:block!important; width:100%!important } .adapt-img { width:100%!important; height:auto!important } .es-m-p0 { padding:0px!important } .es-m-p0r { padding-right:0px!important } .es-m-p0l { padding-left:0px!important } .es-m-p0t { padding-top:0px!important } .es-m-p0b { padding-bottom:0!important } .es-m-p20b { padding-bottom:20px!important } .es-mobile-hidden, .es-hidden { display:none!important } tr.es-desk-hidden, td.es-desk-hidden, table.es-desk-hidden { width:auto!important; overflow:visible!important; float:none!important; max-height:inherit!important; line-height:inherit!important } tr.es-desk-hidden { display:table-row!important } table.es-desk-hidden { display:table!important } td.es-desk-menu-hidden { display:table-cell!important } .es-menu td { width:1%!important } table.es-table-not-adapt, .esd-block-html table { width:auto!important } table.es-social { display:inline-block!important } table.es-social td { display:inline-block!important } }
</style>
</head>
<body style="width:100%;font-family:Arial, sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;padding:0;Margin:0">
<div class="es-wrapper-color" style="background-color:#F6F6F6">
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" color="#f6f6f6"></v:fill>
</v:background>
<![endif]-->
<table class="es-wrapper" width="100%" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;padding:0;Margin:0;width:100%;height:100%;background-repeat:repeat;background-position:center top">
<tr style="border-collapse:collapse">
<td valign="top" style="padding:0;Margin:0">
<table class="es-content" cellspacing="0" cellpadding="0" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;table-layout:fixed !important;width:100%">
<tr style="border-collapse:collapse">
<td align="center" style="padding:0;Margin:0">
<table class="es-content-body" cellspacing="0" cellpadding="0" bgcolor="#ffffff" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:#FFFFFF;width:600px">
<tr style="border-collapse:collapse">
<td align="left" style="Margin:0;padding-top:15px;padding-bottom:15px;padding-left:20px;padding-right:20px">
<!--[if mso]><table style="width:560px" cellpadding="0" cellspacing="0"><tr><td style="width:270px" valign="top"><![endif]-->
<table class="es-left" cellspacing="0" cellpadding="0" align="left" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;float:left">
<tr style="border-collapse:collapse">
<td align="left" style="padding:0;Margin:0;width:270px">
<table width="100%" cellspacing="0" cellpadding="0" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px">
<tr style="border-collapse:collapse">
<td class="es-infoblock" align="left" style="padding:0;Margin:0;line-height:14px;font-size:12px;color:#CCCCCC"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:Arial, sans-serif;line-height:14px;color:#CCCCCC;font-size:12px"><span style="text-align:center"></span>Put your preheader text here<span style="text-align:center"></span></p></td>
</tr>
</table></td>
</tr>
</table>
<!--[if mso]></td><td style="width:20px"></td><td style="width:270px" valign="top"><![endif]-->
<table class="es-right" cellspacing="0" cellpadding="0" align="right" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;float:right">
<tr style="border-collapse:collapse">
<td align="left" style="padding:0;Margin:0;width:270px">
<table width="100%" cellspacing="0" cellpadding="0" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px">
<tr style="border-collapse:collapse">
<td align="right" class="es-infoblock" style="padding:0;Margin:0;line-height:14px;font-size:12px;color:#CCCCCC"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:Arial, sans-serif;line-height:14px;color:#CCCCCC;font-size:12px">View in browser</p></td>
<table width="100%" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px">
<tr style="border-collapse:collapse">
<td valign="top" align="center" style="padding:0;Margin:0;width:560px">
<table width="100%" cellspacing="0" cellpadding="0" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px">
<tr style="border-collapse:collapse">
<td align="center" style="padding:0;Margin:0;padding-left:10px;padding-right:10px"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:Arial, sans-serif;line-height:21px;color:#333333;font-size:14px"><span style="font-size:16px"><span style="font-family:'trebuchet ms', helvetica, sans-serif"><span style="line-height:150%">Sign up </span></span>and learn about stocks and hot offers. Also we publish interesting articles every week.</span></p></td>
</tr>
<tr style="border-collapse:collapse">
<td align="center" style="Margin:0;padding-bottom:10px;padding-left:10px;padding-right:10px;padding-top:15px"><span class="es-button-border" style="border-style:solid;border-color:#2cb543;background:#47598b;border-width:0px;display:inline-block;border-radius:30px;width:auto">Sign up with Facebook</span></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr style="border-collapse:collapse">
<td style="padding:0;Margin:0;background-color:#efefef;background-position:left top" bgcolor="#efefef" align="left">
<!--[if mso]><table style="width:600px" cellpadding="0" cellspacing="0"><tr><td style="width:300px" valign="top"><![endif]-->
<table class="es-left" cellspacing="0" cellpadding="0" align="left" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;float:left">
<tr style="border-collapse:collapse">
<td align="left" style="padding:0;Margin:0;width:300px">
<table width="100%" cellspacing="0" cellpadding="0" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px">
<tr style="border-collapse:collapse">
<td align="center" style="padding:0;Margin:0;font-size:0"><img class="adapt-img" src="https://pzekhx.stripocdn.email/content/guids/CABINET_0e80a7555db07e59a031455280a74c7f/images/2261501079577592.adapt" alt="Palm beach Sydney" title="Palm beach Sydney" width="300" style="display:block;border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic"></td>
</tr>
</table></td>
</tr>
</table>
<!--[if mso]></td><td style="width:0px"></td><td style="width:300px" valign="top"><![endif]-->
<table class="es-right" cellspacing="0" cellpadding="0" align="right" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;float:right">
<tr style="border-collapse:collapse">
<td align="left" style="padding:0;Margin:0;width:300px">
<table width="100%" cellspacing="0" cellpadding="0" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px">
<tr style="border-collapse:collapse">
<td align="left" style="padding:0;Margin:0;padding-top:15px;padding-left:25px;padding-right:25px"><h3 style="Margin:0;line-height:24px;mso-line-height-rule:exactly;font-family:Arial, sans-serif;font-size:20px;font-style:normal;font-weight:bold;color:#333333;text-align:left">Palm beach Sydney</h3></td>
</tr>
<tr style="border-collapse:collapse">
<td align="left" style="padding:0;Margin:0;padding-left:25px;padding-right:25px"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:Arial, sans-serif;line-height:21px;color:#333333;font-size:14px">TO FANS OF EXCURSIONS</p></td>
</tr>
<tr style="border-collapse:collapse">
<td align="left" style="Margin:0;padding-top:15px;padding-bottom:15px;padding-left:25px;padding-right:25px;font-size:0">
<table width="10%" height="100%" cellspacing="0" cellpadding="0" border="0" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px">
<tr style="border-collapse:collapse">
<td style="padding:0;Margin:0;border-bottom:2px solid #cccccc;background:#FFFFFF none repeat scroll 0% 0%;height:1px;width:100%;margin:0px"></td>
</tr>
</table></td>
</tr>
<tr style="border-collapse:collapse">
<td align="left" style="Margin:0;padding-top:5px;padding-bottom:10px;padding-left:25px;padding-right:25px"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:Arial, sans-serif;line-height:21px;color:#333333;font-size:14px">Palm Beach, or "Palmy", lies at the end of a long peninsula, fringed by surf on one side and tranquil Pittwater on the other.</p></td>
</tr>
</table></td>
</tr>
</table>
<!--[if mso]></td></tr></table><![endif]--></td>
</tr>
<tr style="border-collapse:collapse">
<td style="padding:0;Margin:0;background-color:#efefef;background-position:left top" bgcolor="#efefef" align="left">
<!--[if mso]><table style="width:600px" cellpadding="0" cellspacing="0"><tr><td style="width:300px" valign="top"><![endif]-->
<table class="es-left" cellspacing="0" cellpadding="0" align="left" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;float:left">
<tr style="border-collapse:collapse">
<td align="left" style="padding:0;Margin:0;width:300px">
<table width="100%" cellspacing="0" cellpadding="0" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px">
<tr style="border-collapse:collapse">
<td align="right" style="padding:0;Margin:0;padding-top:25px;padding-left:25px;padding-right:25px"><h3 style="Margin:0;line-height:24px;mso-line-height-rule:exactly;font-family:Arial, sans-serif;font-size:20px;font-style:normal;font-weight:bold;color:#333333">Best of Paris</h3></td>
</tr>
<tr style="border-collapse:collapse">
<td align="right" style="padding:0;Margin:0;padding-left:25px;padding-right:25px"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:Arial, sans-serif;line-height:21px;color:#333333;font-size:14px">IDEALLY FOR COUPLES</p></td>
</tr>
<tr style="border-collapse:collapse">
<td align="right" style="Margin:0;padding-top:15px;padding-bottom:15px;padding-left:25px;padding-right:25px;font-size:0">
<table width="10%" height="100%" cellspacing="0" cellpadding="0" border="0" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px">
<tr style="border-collapse:collapse">
<td style="padding:0;Margin:0;border-bottom:2px solid #cccccc;background:#FFFFFF none repeat scroll 0% 0%;height:1px;width:100%;margin:0px"></td>
</tr>
</table></td>
</tr>
<tr style="border-collapse:collapse">
<td align="right" style="Margin:0;padding-top:5px;padding-bottom:10px;padding-left:25px;padding-right:25px"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:Arial, sans-serif;line-height:21px;color:#333333;font-size:14px">This is the favorite place to visit over and over again! No photo or video can capture what you feel when you are next to it or under it.</p></td>
</tr>
</table></td>
</tr>
</table>
<!--[if mso]></td><td style="width:0px"></td><td style="width:300px" valign="top"><![endif]-->
<table class="es-right" cellspacing="0" cellpadding="0" align="right" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;float:right">
<tr style="border-collapse:collapse">
<td align="left" style="padding:0;Margin:0;width:300px">
<table width="100%" cellspacing="0" cellpadding="0" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px">
<tr style="border-collapse:collapse">
<td align="center" style="padding:0;Margin:0;font-size:0"><img class="adapt-img" src="https://pzekhx.stripocdn.email/content/guids/CABINET_0e80a7555db07e59a031455280a74c7f/images/75111501079553681.png" alt="Paris" title="Paris" width="300" style="display:block;border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic"></td>
</tr>
</table></td>
</tr>
</table>
<!--[if mso]></td></tr></table><![endif]--></td>
</tr>
<tr style="border-collapse:collapse">
<td style="padding:0;Margin:0;background-color:#ffffff" bgcolor="#ffffff" align="left">
<table width="100%" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px">
<tr style="border-collapse:collapse">
<td valign="top" align="center" style="padding:0;Margin:0;width:600px">
<table width="100%" cellspacing="0" cellpadding="0" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px">
<tr style="border-collapse:collapse">
<td align="center" style="padding:0;Margin:0;padding-bottom:10px;padding-top:25px"><h2 style="Margin:0;line-height:29px;mso-line-height-rule:exactly;font-family:Arial, sans-serif;font-size:24px;font-style:normal;font-weight:normal;color:#333333">Lorem ipsum</h2></td>
</tr>
<tr style="border-collapse:collapse">
<td align="center" style="Margin:0;padding-top:5px;padding-left:15px;padding-right:15px;padding-bottom:25px"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:Arial, sans-serif;line-height:21px;color:#333333;font-size:14px">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitatio.</p></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr style="border-collapse:collapse">
<td style="Margin:0;padding-top:15px;padding-bottom:15px;padding-left:20px;padding-right:20px;background-position:left top" align="left">
<!--[if mso]><table style="width:560px" cellpadding="0" cellspacing="0"><tr><td style="width:270px" valign="top"><![endif]-->
<table class="es-left" cellspacing="0" cellpadding="0" align="left" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;float:left">
<tr style="border-collapse:collapse">
<td class="es-m-p20b" align="left" style="padding:0;Margin:0;width:270px">
<table width="100%" cellspacing="0" cellpadding="0" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px">
<tr style="border-collapse:collapse">
<td align="center" style="padding:0;Margin:0;font-size:0"><img class="adapt-img" src="https://pzekhx.stripocdn.email/content/guids/CABINET_3ede03beea8a58107b9bdc4e935fac00/images/82621501164735240.png" alt="Paris" title="Paris" width="270" style="display:block;border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic"></td>
</tr>
<tr style="border-collapse:collapse">
<td align="left" style="padding:0;Margin:0;padding-top:5px;padding-bottom:5px"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:Arial, sans-serif;line-height:21px;color:#333333;font-size:14px"><span class="product-name">Best of Paris</span></p></td>
align="center" style="padding:0;Margin:0;line-height:120%;font-size:0;color:#CCCCCC"><a target="_blank" href="https://viewstripo.email/?utm_source=templates&utm_medium=email&utm_campaign=tourism&utm_content=promo_newsletter" style="-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;text-decoration:underline;color:#CCCCCC;font-size:12px"><img src="https://pzekhx.stripocdn.email/content/guids/CABINET_9df86e5b6c53dd0319931e2447ed854b/images/64951510234941531.png" alt width="125" style="display:block;border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic"></a></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</div>
</body>
</html>
you can use chrome's developer tool. like just copy your code written within body tag (exclude body ) and go to Gmail, compose and inspect the message section of composing and paste your code there.
Similarly, copy the code written within the style tag(exclude style) and paste into Chrome developer tool.
for more info use reference:embed Html into gmail
You have a basic code and asking why it isn't working as a bit complicated code. It obviously wont. HTML renders differently in emails than in browser because it depends on the email client.
You can use builders like stripo or unlayer or may others and export code for free. Don't copy paste that code into the mailer but test it through https://putsmail.com/
Related
The following code has several issues when sending all Html5 newsletters I coded.
I received footer code from the client, but it seems that it doesn't work more.
Remaining parts of the newsletters works well.
I copied an empty template mail I usually use to code my htmls.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>xxxxxx/title>
<style>
ul {
list-style-position: inside;
padding-left: 0;
}
a {
color: inherit !important;
text-decoration: none !important;
}
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;
}
.content {
width: 100%;
max-width: 600px; !important
}
/* GENERAL STYLE RESETS */
body, #bodyTable { height:100% !important; width:100% !important; margin:0 !important; padding:0 !important; }
table, td { border-collapse:collapse; }
.hyphenate {
/* Careful, this breaks the word wherever it is without a hyphen */
overflow-wrap: break-word;
word-wrap: break-word;
/* Adds a hyphen where the word breaks */
-webkit-hyphens: auto;
-ms-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
/*remove blue links for iOS*/
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;}
#media only screen and (max-width: 480px) {
/* MUESTRA ENLACE EN MOVIL */
.bloque{width: 100%; display: block!important; height: 40px!important; vertical-align: middle!important}
.bloque2{width: 100%; display: block!important; vertical-align: middle!important}
.bloque2 table{width: 100% !important;}
table.body {float:left;width:100% !important;padding:0;font-size:13px !important}
.ancho{width:100% !important}
.ancho2{width:100% !important;text-align:center !important}
.ancho3{width:33% !important;margin-bottom:12px !important}
.ancho3_2{width:25% !important;margin-bottom:12px !important}
.anchotlfn{width:26% !important;margin-bottom:12px !important}
.ancho4{width:98% !important}
.anchon{width:50% !important}
.separa{ padding:8px 0 !important}
.iber{margin:20px 0 0 25% !important}
.logo{width:40% !important}
.logo2{width:76% !important}
td.izqui{text-align:left !important}
.verde{width:100% !important;font-size:14px !important}
.gg{width:100% !important;font-size:18px !important}
.verde2{width:100% !important;font-size:13px !important}
.oculto{display:none !important}
.pie{line-height:auto !important;font-size:11px !important}
.pdtop{padding-top:10px!important}
.pdbot{padding-bottom:10px!important}
.pe{width:80% !important;padding-top:3px !important}
.alto{ height:10px !important;}
.centrado{text-align:center !important; padding:5px 0 20px 0 !important;}
.nopad{padding-left: 0px !important}
.izq{text-align:left !important; float:left !important}
}
</style>
</head>
<body bgcolor="#FFFFFF" style="font-family:Arial,Helvetica,sans-serif;font-size:13px;color:#000511">
<!--[if mso]>
<table width="600" border="0" align="center" margin bgcolor="#ffffff" cellpadding="0" cellspacing="0">
<tr>
<td>
<![endif]-->
<table class="content" width="100%" border="0" align="center" bgcolor="#5c881a" cellpadding="0" cellspacing="0" style="margin: 0 auto">
<tr>
<td bgcolor="#FFFFFF"><table width="550" border="0" cellspacing="0" cellpadding="0" class="ancho">
<tr>
<td width="24"> </td>
<td width="502"><table width="75%" border="0" cellspacing="0" cellpadding="0" class="ancho" align="left">
<tr>
<td> </td>
</tr>
<tr>
<td style="color:#262626;font-size:12px;font-family:Arial,Helvetica,sans-serif">Se non riesci a visualizzare correttamente il messaggio, clicca qui</td>
</tr>
<tr>
<td> </td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="15" class="ancho">
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="img/xxx.jpg" width="100%" border="0" alt="a"></td>
</tr>
<tr>
<td><img src="img/bordo-top.gif" width="100%" border="0" style="display: block;"></td>
</tr>
<tr>
<td bgcolor="#FFFFFF">
<table width="100%" border="0" cellspacing="0" cellpadding="45">
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="justify" style="color:#5c881a;font-size:16px;font-family:Arial,Helvetica,sans-serif; line-height: 23px; text-align: justify;">test
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td><img src="img/bordo.gif" width="100%" border="0" style="display: block;"></td>
</tr>
<tr>
<td>
<br>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr bgcolor="#5d881a">
<td width="160" height="60" valign="middle" bgcolor="#5d881a" class="bloque pdtop"
style="text-align: left; color:#ffffff;font-size:11px;font-family:Arial,Helvetica,sans-serif;">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="43"><img src="img/tel.gif"></td>
<td valign="middle"
style="text-align: left; color:#ffffff;font-size:11px;font-family:Arial,Helvetica,sans-serif;">
xxx xxx xxx</td>
</tr>
</tbody>
</table>
</td>
<td width="140" height="60" valign="middle" bgcolor="#5d881a" class="bloque"
style="text-align: left; width:140px; color:#ffffff;font-size:11px;font-family:Arial,Helvetica,sans-serif">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="43"><img src="img/sito.gif"></td>
<td valign="middle"
style="text-align: left; color:#ffffff;font-size:11px;font-family:Arial,Helvetica,sans-serif;">
<a href="" target="_blank"
style="color: #ffffff; text-decoration: none">xxxxxxxxx.it</a>
</td>
</tr>
</tbody>
</table>
</td>
<td width="255" height="60" valign="middle" bgcolor="#5d881a" class="bloque"
style="text-align: left; width:255px; color:#ffffff;font-size:11px;font-family:Arial,Helvetica,sans-serif" >
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="43"><img src="img/mail.gif"></td>
<td valign="middle"
style="text-align: left; color:#ffffff;font-size:11px;font-family:Arial,Helvetica,sans-serif;">
<a style="color: #ffffff; text-decoration: none"
href="mailto:servizioclienti#iberdrola.it">servizioclienti#xxxxxxxxx.it</a>
</td>
</tr>
</tbody>
</table>
</td>
<td height="60" width="110" valign="middle" bgcolor="#5d881a" class="bloque pdbot"
style="text-align: left; width:110px; color:#ffffff;font-size:11px;font-family:Arial,Helvetica,sans-serif">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="46"><a href="https://www.facebook.com/xxxxxxxxx/"
target="_blank"><img src="img/fb.gif" border="0"></a></td>
<td width="46"><a href="https://twitter.com/xxxxxxxxx" target="_blank"><img
src="img/tw.gif" border="0"></a></td>
<td><a href="https://www.instagram.com/xxxxxxxxx/" target="_blank"><img
src="img/ig.gif" border="0"></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr><td><img src="img/line.gif" width="100%"></td></tr>
<tr><td style="text-align: left; color:#ffffff;font-size:14px;font-family:Arial,Helvetica,sans-serif"><br><br>XXXXX</td></tr>
</table>
</td>
</tr>
</table></td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
<tr>
</table>
<![endif]-->
</body>
</html>
expected mobile visualization screenshot
actual visualization when the mail is sent
Desktop visualization
I am able to send simple HTML emails with the Mailer package (https://pub.dartlang.org/packages/mailer). As in their example, "<h1>Test</h1>\n<p>Hey! Here's some HTML content</p>"works as a simple HTML text:
final message = new Message()
..from = new Address(username, 'Your name')
..recipients.add('destination#example.com')
..ccRecipients.addAll(['destCc1#example.com', 'destCc2#example.com'])
..bccRecipients.add(new Address('bccAddress#example.com'))
..subject = 'Test Dart Mailer library :: 😀 :: ${new DateTime.now()}'
..text = 'This is the plain text.\nThis is line 2 of the text part.'
..html = "<h1>Test</h1>\n<p>Hey! Here's some HTML content</p>";
But what if I wanna create a complex HTML email? For example stripo.email provides templates with HTML code. How can I pass this HTML code as a string for the ..html parameter for the new Message() method?
Here is the HTML code stripo.email website creates for their template:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html style="width:100%;font-family:arial, 'helvetica neue', helvetica, sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;padding:0;Margin:0;">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta name="x-apple-disable-message-reformatting">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="telephone=no" name="format-detection">
<title>New email</title>
<!--[if (mso 16)]>
<style type="text/css">
a {text-decoration: none;}
</style>
<![endif]-->
<!--[if gte mso 9]><style>sup { font-size: 100% !important; }</style><![endif]-->
<style type="text/css">
#media only screen and (max-width:600px) {
p,
ul li,
ol li,
a {
font-size: 16px!important
}
h1 {
font-size: 30px!important;
text-align: center
}
h2 {
font-size: 26px!important;
text-align: center
}
h3 {
font-size: 20px!important;
text-align: center
}
h1 a {
font-size: 30px!important
}
h2 a {
font-size: 26px!important
}
h3 a {
font-size: 20px!important
}
.es-menu td a {
font-size: 16px!important
}
.es-header-body p,
.es-header-body ul li,
.es-header-body ol li,
.es-header-body a {
font-size: 16px!important
}
.es-footer-body p,
.es-footer-body ul li,
.es-footer-body ol li,
.es-footer-body a {
font-size: 16px!important
}
.es-infoblock p,
.es-infoblock ul li,
.es-infoblock ol li,
.es-infoblock a {
font-size: 12px!important
}
*[class="gmail-fix"] {
display: none!important
}
.es-m-txt-c,
.es-m-txt-c h1,
.es-m-txt-c h2,
.es-m-txt-c h3 {
text-align: center!important
}
.es-m-txt-r,
.es-m-txt-r h1,
.es-m-txt-r h2,
.es-m-txt-r h3 {
text-align: right!important
}
.es-m-txt-l,
.es-m-txt-l h1,
.es-m-txt-l h2,
.es-m-txt-l h3 {
text-align: left!important
}
.es-m-txt-r img,
.es-m-txt-c img,
.es-m-txt-l img {
display: inline!important
}
.es-button-border {
display: block!important
}
.es-button {
font-size: 20px!important;
display: block!important;
border-width: 10px 0px 10px 0px!important
}
.es-btn-fw {
border-width: 10px 0px!important;
text-align: center!important
}
.es-adaptive table,
.es-btn-fw,
.es-btn-fw-brdr,
.es-left,
.es-right {
width: 100%!important
}
.es-content table,
.es-header table,
.es-footer table,
.es-content,
.es-footer,
.es-header {
width: 100%!important;
max-width: 600px!important
}
.es-adapt-td {
display: block!important;
width: 100%!important
}
.adapt-img {
width: 100%!important;
height: auto!important
}
.es-m-p0 {
padding: 0px!important
}
.es-m-p0r {
padding-right: 0px!important
}
.es-m-p0l {
padding-left: 0px!important
}
.es-m-p0t {
padding-top: 0px!important
}
.es-m-p0b {
padding-bottom: 0!important
}
.es-m-p20b {
padding-bottom: 20px!important
}
.es-mobile-hidden,
.es-hidden {
display: none!important
}
.es-desk-hidden {
display: table-row!important;
width: auto!important;
overflow: visible!important;
float: none!important;
max-height: inherit!important;
line-height: inherit!important
}
.es-desk-menu-hidden {
display: table-cell!important
}
table.es-table-not-adapt,
.esd-block-html table {
width: auto!important
}
table.es-social {
display: inline-block!important
}
table.es-social td {
display: inline-block!important
}
}
#outlook a {
padding: 0;
}
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
.es-button {
mso-style-priority: 100!important;
text-decoration: none!important;
}
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;
}
.es-desk-hidden {
display: none;
float: left;
overflow: hidden;
width: 0;
max-height: 0;
line-height: 0;
mso-hide: all;
}
</style>
</head>
<body style="width:100%;font-family:arial, 'helvetica neue', helvetica, sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;padding:0;Margin:0;">
<div class="es-wrapper-color" style="background-color:#F6F6F6;">
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" color="#f6f6f6"></v:fill>
</v:background>
<![endif]-->
<table cellpadding="0" cellspacing="0" class="es-wrapper" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;padding:0;Margin:0;width:100%;height:100%;background-repeat:repeat;background-position:center top;">
<tr style="border-collapse:collapse;">
<td valign="top" style="padding:0;Margin:0;">
<table cellpadding="0" cellspacing="0" class="es-content" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;table-layout:fixed !important;width:100%;">
<tr style="border-collapse:collapse;">
<td align="center" style="padding:0;Margin:0;">
<table class="es-content-body" align="center" cellpadding="0" cellspacing="0" width="600" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:transparent;">
<tr style="border-collapse:collapse;">
<td align="left" style="padding:20px;Margin:0;">
<!--[if mso]><table width="560"><tr><td width="356" valign="top"><![endif]-->
<table cellpadding="0" cellspacing="0" class="es-left" align="left" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;float:left;">
<tr style="border-collapse:collapse;">
<td width="356" class="es-m-p0r es-m-p20b" valign="top" align="center" style="padding:0;Margin:0;">
<table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
<tr style="border-collapse:collapse;">
<td align="left" class="es-infoblock es-m-txt-c" style="padding:0;Margin:0;line-height:120%;font-size:12px;color:#CCCCCC;">
<p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:12px;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:120%;color:#CCCCCC;">Use this area to offer a short preview of your email's content.</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if mso]></td><td width="20"></td><td width="184" valign="top"><![endif]-->
<table cellpadding="0" cellspacing="0" align="right" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
<tr style="border-collapse:collapse;">
<td width="184" align="left" style="padding:0;Margin:0;">
<table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
<tr style="border-collapse:collapse;">
<td align="right" class="es-infoblock es-m-txt-c" style="padding:0;Margin:0;line-height:120%;font-size:12px;color:#CCCCCC;">
<p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:12px;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:120%;color:#CCCCCC;"><a target="_blank" href="http://stripo.email" style="-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:arial, 'helvetica neue', helvetica, sans-serif;font-size:12px;text-decoration:underline;color:#2CB543;">View email in your browser</a></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if mso]></td></tr></table><![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" class="es-content" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;table-layout:fixed !important;width:100%;">
<tr style="border-collapse:collapse;">
<td align="center" style="padding:0;Margin:0;">
<table class="es-content-body" align="center" cellpadding="0" cellspacing="0" width="600" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:#FFFFFF;">
<tr style="border-collapse:collapse;">
<td align="left" style="padding:20px;Margin:0;">
<table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
<tr style="border-collapse:collapse;">
<td width="560" align="center" valign="top" style="padding:0;Margin:0;">
<table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
<tr style="border-collapse:collapse;">
<td align="left" style="padding:0;Margin:0;padding-bottom:15px;">
<h2 style="Margin:0;line-height:120%;mso-line-height-rule:exactly;font-family:arial, 'helvetica neue', helvetica, sans-serif;font-size:24px;font-style:normal;font-weight:normal;color:#333333;">Welcome to the Stripo 2 Columns Template!</h2>
</td>
</tr>
<tr style="border-collapse:collapse;">
</tr>
<tr style="border-collapse:collapse;">
<td align="left" style="padding:0;Margin:0;padding-top:20px;">
<p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:14px;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:150%;color:#333333;">Now it’s the time to insert your own content into it by dragging blocks and structures from the side panel to this template area.</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr style="border-collapse:collapse;">
<td align="left" style="Margin:0;padding-top:20px;padding-bottom:20px;padding-left:20px;padding-right:20px;">
<!--[if mso]><table width="560"><tr><td width="270" valign="top"><![endif]-->
<table cellpadding="0" cellspacing="0" class="es-left" align="left" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;float:left;">
<tr style="border-collapse:collapse;">
<td width="270" class="es-m-p20b" align="left" style="padding:0;Margin:0;">
<table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
<tr style="border-collapse:collapse;">
<td align="left" style="padding:0;Margin:0;">
<p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:14px;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:150%;color:#333333;">When your email is ready, you can save it or export using one of available methods: to your MailChimp account or as a pure HTML.</p>
</td>
</tr>
<tr style="border-collapse:collapse;">
<td align="left" style="padding:0;Margin:0;padding-top:20px;">
<p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:14px;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:150%;color:#333333;">Currently, our team is working to create customized blocks for you so you could create your emails faster.</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if mso]></td><td width="20"></td><td width="270" valign="top"><![endif]-->
<table cellpadding="0" cellspacing="0" class="es-right" align="right" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;float:right;">
<tr style="border-collapse:collapse;">
<td width="270" align="left" style="padding:0;Margin:0;">
<table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
<tr style="border-collapse:collapse;">
</tr>
<tr style="border-collapse:collapse;">
<td align="center" style="padding:0;Margin:0;padding-top:10px;">
<h3 style="Margin:0;line-height:120%;mso-line-height-rule:exactly;font-family:arial, 'helvetica neue', helvetica, sans-serif;font-size:20px;font-style:normal;font-weight:normal;color:#333333;">Image Title Goes Here</h3>
</td>
</tr>
<tr style="border-collapse:collapse;">
<td align="left" style="padding:0;Margin:0;padding-top:5px;">
<p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:14px;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:150%;color:#333333;">You can change the size, layout or link of the downloaded image in the left-hand side menu.</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if mso]></td></tr></table><![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" class="es-footer" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;table-layout:fixed !important;width:100%;background-color:transparent;background-repeat:repeat;background-position:center top;">
<tr style="border-collapse:collapse;">
<td align="center" style="padding:0;Margin:0;">
<table class="es-footer-body" align="center" cellpadding="0" cellspacing="0" width="600" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:transparent;">
<tr style="border-collapse:collapse;">
<td align="left" style="padding:0;Margin:0;padding-top:20px;padding-left:20px;padding-right:20px;">
<table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
<tr style="border-collapse:collapse;">
<td width="560" align="center" valign="top" style="padding:0;Margin:0;">
<table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
<tr style="border-collapse:collapse;">
<td align="center" style="padding:20px;Margin:0;">
<table border="0" width="75%" height="100%" cellpadding="0" cellspacing="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
<tr style="border-collapse:collapse;">
<td style="padding:0;Margin:0px 0px 0px 0px;border-bottom:1px solid #CCCCCC;background:none;height:1px;width:100%;margin:0px;"> </td>
</tr>
</table>
</td>
</tr>
<tr style="border-collapse:collapse;">
<td align="center" style="padding:0;Margin:0;padding-top:10px;padding-bottom:10px;">
<p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:11px;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:150%;color:#333333;">Your footer info might be placed here</p>
</td>
</tr>
<tr style="border-collapse:collapse;">
<td align="center" style="padding:0;Margin:0;padding-top:10px;padding-bottom:10px;">
<p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:11px;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:150%;color:#333333;">© 2018 Your Company name</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" class="es-content" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;table-layout:fixed !important;width:100%;">
<tr style="border-collapse:collapse;">
<td align="center" style="padding:0;Margin:0;">
<table class="es-content-body" align="center" cellpadding="0" cellspacing="0" width="600" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:transparent;">
<tr style="border-collapse:collapse;">
<td align="left" style="padding:0;Margin:0;padding-left:20px;padding-right:20px;padding-bottom:30px;">
<table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
<tr style="border-collapse:collapse;">
<td width="560" align="center" valign="top" style="padding:0;Margin:0;">
<table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
<tr style="border-collapse:collapse;">
<td class="es-infoblock" align="center" style="padding:0;Margin:0;line-height:120%;font-size:12px;color:#CCCCCC;">
<a target="_blank" href="http://stripo.email/?utm_source=templates&utm_medium=email&utm_campaign=basic&utm_content=two_columns" style="-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:arial, 'helvetica neue', helvetica, sans-serif;font-size:12px;text-decoration:underline;color:#2CB543;">
<img src="https://ibwhc.stripocdn.email/content/guids/CABINET_9df86e5b6c53dd0319931e2447ed854b/images/64951510234941531.png" alt="" width="125" style="display:block;border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;"> </a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
Which results into:
There are 2 aspects to this question.
How to set the stripo html.
How to adapt an html template. (Modify the content to change parts of the template)
To set the template simply do:
message.html =
'''<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
[... copy the complete template here ...]
</html>'''
Three quotes (''') instead of one quote (') allows text to span multiple lines.
To keep your code clean, you might want to create a new dart file: mail-template.dart and assign the html-template to a variable. Then include this file and assign the variable.
To replace parts of the template I would use .replaceAll on the template.
var nameFromSomeInput = 'Jane Doe';
var yourHtmlTemplate = '<html>Dear {{NAME}}</html>';
message.html = yourHtmlTemplate.replaceAll('{{NAME}}', nameFromSomeInput);
Note that replaceAll is easy and doesn't depend on any additional libraries. It is however slow. Especially if you replace multiple values by calling replaceAll multiple times.
Consider a template engine like: jinja in such cases.
I'm building a HTML email with two background images. The email has a width of 600px.
Both images have dimensions of 600 x 786px and I've managed to get the first background image to fill the width of the parent table.
However the second image, that has the exact same dimensions as the first isn't displaying well, you can see it's half cut off.
Any guidance would be greatly appreciated.
Code below.
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head></head>
<body marginheight="0" marginwidth="0" topmargin="0" leftmargin="0" rightmargin="0" style="margin:0; padding:0">
<!-- /// MSO code to set the DPI at 96 to help resolve DPI scaling issues /// -->
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="format-detection" content="telephone=no" />
<style type="text/css">
span.MsoHyperlink, span.MsoHyperlinkFollowed {mso-style-priority:99;color:inherit;}
a {color:inherit; text-decoration:none;}
.ReadMsgBody, .ExternalClass {width:100%;}
.ExternalClass * {line-height:110%;}
body {width:100%!important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;}
table {border-collapse:collapse!important; mso-table-lspace:0pt; mso-table-rspace:0pt;}
.gmailfix {display:none; display:none!important;}
span > a, sup > a, span > a > sup {color:inherit!important; text-decoration:none;}
.footer span > a {color:#333333!important;}
[office365] button { display: block !important; margin:0 !important; padding:0 !important; }
[office365] div { display: block !important }
[owa] .m-show img { display:none!important; }
/*Responsive Styling*/
#media only screen and (max-width: 480px) {
.MainTable {width:100%!important;min-width:320px!important;}
.main-padding {padding:0px!important;}
html, body {width:100%!important; min-width:100%!important;}
[owa] .m-show img { display:block!important; }
.m-hide, .m-hide * {display:none!important; height:0!important; width:0px!important; visibility:hidden!important; line-height:0px!important; font-size:0px!important;}
.m-show {display:block!important; max-height:none!important;}
.float-left {float:left!important; clear:none!important;}
.float-right {float:right!important; clear:none!important;}
.half-width {width:48%!important; display:inline-block!important;}
.block, .drop, .drop tbody, .drop table, .drop tr {float:none!important; width:100%!important; padding:0!important; display:block!important;}
.center {text-align:center!important;} .align-left {text-align:left!important;} .align-right {text-align:right!important;} .absolute {position:absolute!important;}
table.block, table.drop, .drop table, .drop tbody {display:table!important;}
tr.block, tr.drop, .drop tr {display:table-row!important;}
td.block, td.drop, .drop td {display:table-cell!important;}
.center > img, img.center, .align-left > img, img.align-left, .align-right > img, img.align-right {display:inline-block!important;}
.center table.center, .align-right > table, .align-left > table {display:inline-table!important;}
.background-none {background:transparent!important;}
.background-image-none {background-image:none!important;}
.text-size {line-height:120%!important;} .text-size-10px {font-size:10px!important;}
.text-size-11px {font-size:11px!important;} .text-size-12px {font-size:12px!important;}
.text-size-13px {font-size:13px!important;} .text-size-14px {font-size:14px!important;}
.text-size-15px {font-size:15px!important;} .text-size-16px {font-size:16px!important;}
.text-size-17px {font-size:17px!important;} .text-size-18px {font-size:18px!important;}
.text-size-19px {font-size:19px!important;} .text-size-20px {font-size:20px!important;}
.text-size-21px {font-size:21px!important;} .text-size-22px {font-size:22px!important;}
.text-size-23px {font-size:23px!important;} .text-size-24px {font-size:24px!important;}
.text-size-25px {font-size:25px!important;} .text-size-26px {font-size:26px!important;}
.text-size-27px {font-size:27px!important;} .text-size-28px {font-size:28px!important;}
.text-size-29px {font-size:29px!important;} .text-size-30px {font-size:30px!important;}
.width-100 {width:100%!important; height:auto!important;}
.width-90 {width:90%!important; height:auto!important;}
.width-80 {width:80%!important; height:auto!important;}
.width-70 {width:70%!important; height:auto!important;}
.width-60 {width:60%!important; height:auto!important;}
.width-50 {width:50%!important; height:auto!important;}
.width-40 {width:40%!important; height:auto!important;}
.width-30 {width:30%!important; height:auto!important;}
.width-20 {width:20%!important; height:auto!important;}
.width-0 {width:0px!important; height:auto!important;}
.width-auto {width:auto!important;}
.height-auto {height:auto!important;}
.padding-0 {padding:0!important;} .padding-5 {padding:5px!important;}
.padding-10 {padding:10px!important;} .padding-15 {padding:15px!important;}
.padding-20 {padding:20px!important;} .padding-25 {padding:25px!important;} .padding-30 {padding:30px!important;}
.padding-horz-0 {padding-left:0px !important; padding-right:0px !important;}
.padding-horz-5 {padding-left:5px!important; padding-right:5px!important;}
.padding-horz-10 {padding-left:10px!important; padding-right:10px!important;}
.padding-horz-15 {padding-left:15px!important; padding-right:15px!important;}
.padding-horz-20 {padding-left:20px!important; padding-right:20px!important;}
.padding-horz-25 {padding-left:25px!important; padding-right:25px!important;}
.padding-horz-30 {padding-left:30px!important; padding-right:30px!important;}
.padding-vert-0 {padding-top:0px!important; padding-bottom:0px!important;}
.padding-vert-5 {padding-top:5px!important; padding-bottom:5px!important;}
.padding-vert-10 {padding-top:10px!important; padding-bottom:10px!important;}
.padding-vert-15 {padding-top:15px!important; padding-bottom:15px!important;}
.padding-vert-20 {padding-top:20px!important; padding-bottom:20px!important;}
.padding-vert-25 {padding-top:25px!important; padding-bottom:25px!important;}
.padding-vert-30 {padding-top:30px!important; padding-bottom:30px!important;}
.padding-right-0 {padding-right:0px!important;}
.padding-right-5 {padding-right:5px!important;} .padding-right-10 {padding-right:10px!important;}
.padding-right-15 {padding-right:15px!important;} .padding-right-20 {padding-right:20px!important;}
.padding-right-25 {padding-right:25px!important;} .padding-right-30 {padding-right:30px!important;}
.padding-left-0 {padding-left:0px !important;}
.padding-left-5 {padding-left:5px !important;} .padding-left-10 {padding-left:10px !important;}
.padding-left-15 {padding-left:15px !important;} .padding-left-20 {padding-left:20px !important;}
.padding-left-25 {padding-left:25px !important;} .padding-left-30 {padding-left:30px !important;}
.padding-top-0 {padding-top:0px!important;} .padding-top-5 {padding-top:5px!important;}
.padding-top-10 {padding-top:10px!important;} .padding-top-15 {padding-top:15px!important;}
.padding-top-20 {padding-top:20px!important;} .padding-top-25 {padding-top:25px!important;} .padding-top-30 {padding-top:30px!important;}
.padding-left-25 {padding-left:25px!important;}
.padding-right-25 {padding-right:25px!important;}
.padding-bottom-0 {padding-bottom:0px!important;}
.padding-bottom-5 {padding-bottom:5px!important;} .padding-bottom-10 {padding-bottom:10px !important;}
.padding-bottom-15 {padding-bottom:15px !important;} .padding-bottom-20 {padding-bottom:20px !important;}
.padding-bottom-25 {padding-bottom:25px !important;} .padding-bottom-30 {padding-bottom:30px !important;}
/*Styles Specific to this Email*/
.bg_mob { width:100%!important; height:auto!important; background:url(images/bg_mobile.jpg) no-repeat center #FFFFFF!important; background-size:contain!important; background-position:right top !important;}
</style>
<!--Superscript Styling to apply specific CSS for outlook-->
<!--[if gte mso 9]>
<style type="text/css">
sup {vertical-align: baseline; position: relative; top: -0.4em; font-size:85%;}
</style>
<![endif]-->
<!--[if !mso]><!-->
<style type="text/css">
sup {vertical-align: top; font-size:50%; }
</style>
<!--<![endif]-->
<!--END SUPERSCRIPT STYLING-->
<!--TELEPHONE NUMBER-->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="top" class="main-padding" bgcolor="#ffffff">
<table width="640" border="0" cellspacing="0" cellpadding="0" class="MainTable" style="width:640px;">
<tbody>
<tr>
<td align="center" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" valign="top" class="padding-horz-20 padding-top-10" style="padding:0px 43px 0px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="right" valign="top" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; line-height:18px; color:#999999; mso-line-height-rule:exactly;">
888-336-4764
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--NAV BAR-->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="top" class="padding-0" style="padding:0 10px;">
<table width="640" border="0" cellspacing="0" cellpadding="0" class="MainTable" style="width:640px; margin:0 auto;">
<tbody>
<tr>
<td align="left" valign="top" style="padding:0px 0">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" class="padding-vert-0" style="padding:15px 0;" valign="top">
<!--Logo-->
<table align="left" border="0" cellspacing="0" cellpadding="0" class="align-left">
<tbody>
<tr>
<td style="font-size:17px; line-height:22px; color:#ffffff; padding:0 20px 0px;">
<a href="">
<img src="https://image.ibb.co/kgxmEe/logo.png" alt="tempur" width="140" height="70" style="display:block;" border="0">
</a>
</td>
</tr>
</tbody>
</table>
<!--Menu Start-->
<table align="left" border="0" cellspacing="0" cellpadding="0" class="align-left m-hide">
<tbody>
<tr>
<td class="text-size-13px" style="font-size:17px; line-height:80px; color:#000000; padding:0 42px 0px;">
MATRESSES
</td>
</tr>
</tbody>
</table>
<table align="left" border="0" cellspacing="0" cellpadding="0" class="align-left m-hide">
<tbody>
<tr>
<td class="text-size-13px" style="font-size:17px; line-height:80px; color:#000000 padding:0 42px 0px;;">
MATRESSES
</td>
</tr>
</tbody>
</table>
<table align="left" border="0" cellspacing="0" cellpadding="0" class="align-left m-hide">
<tbody>
<tr>
<td class="text-size-13px" style="font-size:17px; line-height:80px; color:#000000; padding:0 42px 0px;">
MATRESSES
</td>
</tr>
</tbody>
</table>
<!--Menu End-->
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--HERO-->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="top" style="padding:0px 0px 20px 0px;">
<table width="640" class="MainTable" border="0" cellspacing="0" cellpadding="0" style="width:640px; margin:0 auto;">
<td height="100" align="left" valign="top" bgcolor="#ffffff" background="https://image.ibb.co/kAmc4e/herobg.png">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:640px;height:100%;">
<v:fill type="tile" src="https://image.ibb.co/kAmc4e/herobg.png" color="#ffffff" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<table width="640" border="0" cellspacing="0" cellpadding="0" class="MainTable" style="width:640px; margin:0 auto;" align="center">
<tbody>
<tr>
<td style="padding:0px 0px 0px 0px;" class="padding-top-10" align="center">
<img src="https://image.ibb.co/dvzyue/herocta.png" alt="hero offer" width="600" class="width-100" style="width:600px;" border="0">
</td>
</tr>
</tbody>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</table>
</td>
</tr>
</tbody>
</table>
<!--LEGACY-->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="top" style="padding:0px 0px 20px 0px;">
<table width="640" class="MainTable" border="0" cellspacing="0" cellpadding="0" style="width:640px; margin:0 auto;">
<td width="640" height="100" align="left" valign="top" bgcolor="#ffffff" background="https://image.ibb.co/fGSBn9/legacytest.png" style="width:640px;">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:640px;height:100%;">
<v:fill type="tile" src="class="bg_mob" width="640" height="100" align="left" valign="top" bgcolor="#ffffff" background="https://image.ibb.co/f4Cxup/legacytest1.png" style="width:640px;"" color="#ffffff" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<table width="640" border="0" cellspacing="0" cellpadding="0" class="MainTable" style="width:640px; margin:0 auto;" align="center">
<tbody>
<tr>
<td style="padding:0px 0px 0px 0px;" class="padding-top-10" align="center">
Legaxy
</td>
</tr>
</tbody>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</table>
</td>
</tr>
</tbody>
</table>
<!--FIX FOR GMAIL iOS app issues -->
<div class="gmailfix" style="white-space:nowrap; font:15px courier; line-height:0; color:#ffffff; background-color:#ffffff;">
</div>
</body>
</html>
You need to use background-size: 100% 100%; and height:786px and your second image have white background already
So use image without white background and add content or height to second td where you applied background image.
The image is not cut, it has some whitespace in it, and its dimension is 1000x768px https://image.ibb.co/fGSBn9/legacytest.png.
instead use css background-position: top center that will fix the issue. please have a look at the below-working snippet, hope it helps :)
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top" style="padding:0px 0px 20px 0px;">
<table width="640" class="MainTable" border="0" cellspacing="0" cellpadding="0" style="width:640px; margin:0 auto;">
<tr>
<td width="640" height="768" align="left" valign="top" style="background: #ffffff url('https://image.ibb.co/fGSBn9/legacytest.png') top center">Legacy</td>
</tr>
</table>
</td>
</tr>
</table>
You need to use background-size: cover; property to fix it. According to the docs
The background-size property specifies the size of the background
images.
There are four different syntaxes you can use with this property:
the keyword syntax ("auto", "cover" and "contain"),
the one-value syntax (sets the width of the image (height becomes "auto"),
the two-value syntax (first value: width of the image, second value: height), - the multiple background syntax (separated with comma).
I'm an HTML/CSS newbie and am using a free program called Topol.io to create an HTML footer for an email I'm going to send (in EMMA).
On the Topol site, in Preview mode, it looks correct on both desktop and mobile (2 rows of four buttons across on desktop, one stacked column of buttons on mobile).
However, when I send a test email to myself (in Gmail, on desktop), the buttons are stacked instead of in two rows of 4.
Can someone point out what's wrong with my code? I know it's something to do with the screen size code but I'm not just sure exactly what the change is.
Here's the code:
<!DOCTYPE html>
<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>
<!--[if !mso]><!-- -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
#outlook a {
padding: 0;
}
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
.ExternalClass * {
line-height: 100%;
}
body {
margin: 0;
padding: 0;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
table,
td {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
p {
display: block;
margin: 13px 0;
}
</style>
<!--[if !mso]><!-->
<style type="text/css">
#media only screen and (max-width:480px) {
#-ms-viewport {
width: 320px;
}
#viewport {
width: 320px;
}
}
</style>
<!--<![endif]-->
<!--[if mso]><xml> <o:OfficeDocumentSettings> <o:AllowPNG/> <o:PixelsPerInch>96</o:PixelsPerInch> </o:OfficeDocumentSettings></xml><![endif]-->
<!--[if lte mso 11]><style type="text/css"> .outlook-group-fix { width:100% !important; }</style><![endif]-->
<!--[if !mso]><!-->
<link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">
<style type="text/css">
#import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);
</style>
<!--<![endif]-->
<style type="text/css">
#media only screen and (min-width:480px) {
.mj-column-per-25 {
width: 25% !important;
}
}
</style>
</head>
<body style="background: #FFFFFF;">
<div class="mj-container" style="background-color:#FFFFFF;">
<!--[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]-->
<table role="presentation" cellpadding="0" cellspacing="0" style="background:#7784C3;font-size:0px;width:100%;" border="0">
<tbody>
<tr>
<td>
<div style="margin:0px auto;max-width:600px;">
<table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;" align="center" border="0">
<tbody>
<tr>
<td style="text-align:center;vertical-align:top;direction:ltr;font-size:0px;padding:26px 0px 26px 0px;">
<!--[if mso | IE]> <table role="presentation" border="0" cellpadding="0" cellspacing="0"> <tr> <td style="vertical-align:top;width:150px;"> <![endif]-->
<div class="mj-column-per-25 outlook-group-fix" style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;">
<table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
<tbody>
<tr>
<td style="word-wrap:break-word;font-size:0px;padding:11px 0px 11px 0px;padding-top:10px;padding-left:25px;" align="center">
<table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:separate;" align="center" border="0">
<tbody>
<tr>
<td style="border:none;border-radius:24px;color:#fff;cursor:auto;padding:10px 25px;" align="center" valign="middle" bgcolor="#ff2166"><a href="http://www.bubblesacademy.com/new-parent-baby/" style="text-decoration:none;background:#ff2166;color:#fff;font-family:Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif;font-size:16px;font-weight:normal;line-height:120%;text-transform:none;margin:0px;"
target="_blank">Programs</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="word-wrap:break-word;font-size:0px;padding:11px 0px 11px 0px;padding-top:10px;padding-left:25px;" align="center">
<table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:separate;" align="center" border="0">
<tbody>
<tr>
<td style="border:none;border-radius:24px;color:#fff;cursor:auto;padding:10px 25px;" align="center" valign="middle" bgcolor="#ff2166"><a href="http://www.bubblesacademy.com/contact-us/" style="text-decoration:none;background:#ff2166;color:#fff;font-family:Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif;font-size:16px;font-weight:normal;line-height:120%;text-transform:none;margin:0px;"
target="_blank">Contact</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]> </td><td style="vertical-align:top;width:150px;"> <![endif]-->
<div class="mj-column-per-25 outlook-group-fix" style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;">
<table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
<tbody>
<tr>
<td style="word-wrap:break-word;font-size:0px;padding:11px 0px 11px 0px;padding-top:10px;padding-left:25px;" align="center">
<table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:separate;" align="center" border="0">
<tbody>
<tr>
<td style="border:none;border-radius:24px;color:#fff;cursor:auto;padding:10px 25px;" align="center" valign="middle" bgcolor="#ff2166"><a href="http://www.bubblesacademy.com/class-calendar/" style="text-decoration:none;background:#ff2166;color:#fff;font-family:Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif;font-size:16px;font-weight:normal;line-height:120%;text-transform:none;margin:0px;"
target="_blank">Schedule</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="word-wrap:break-word;font-size:0px;padding:11px 0px 11px 0px;padding-top:10px;padding-left:25px;" align="center">
<table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:separate;" align="center" border="0">
<tbody>
<tr>
<td style="border:none;border-radius:24px;color:#fff;cursor:auto;padding:10px 25px;" align="center" valign="middle" bgcolor="#ff2166"><a href="http://www.bubblesacademy.com/curriculum/" style="text-decoration:none;background:#ff2166;color:#fff;font-family:Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif;font-size:16px;font-weight:normal;line-height:120%;text-transform:none;margin:0px;"
target="_blank">Preschool</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]> </td><td style="vertical-align:top;width:150px;"> <![endif]-->
<div class="mj-column-per-25 outlook-group-fix" style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;">
<table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
<tbody>
<tr>
<td style="word-wrap:break-word;font-size:0px;padding:11px 0px 11px 0px;padding-top:10px;padding-left:25px;" align="center">
<table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:separate;" align="center" border="0">
<tbody>
<tr>
<td style="border:none;border-radius:24px;color:#fff;cursor:auto;padding:10px 25px;" align="center" valign="middle" bgcolor="#ff2166"><a href="http://www.bubblesacademy.com/class-calendar/" style="text-decoration:none;background:#ff2166;color:#fff;font-family:Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif;font-size:16px;font-weight:normal;line-height:120%;text-transform:none;margin:0px;"
target="_blank">Events</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="word-wrap:break-word;font-size:0px;padding:11px 0px 11px 0px;padding-top:10px;padding-left:25px;" align="center">
<table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:separate;" align="center" border="0">
<tbody>
<tr>
<td style="border:none;border-radius:24px;color:#fff;cursor:auto;padding:10px 25px;" align="center" valign="middle" bgcolor="#ff2166"><a href="http://www.bubblesacademy.com/what-we-do/" style="text-decoration:none;background:#ff2166;color:#fff;font-family:Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif;font-size:16px;font-weight:normal;line-height:120%;text-transform:none;margin:0px;"
target="_blank">About Us</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]> </td><td style="vertical-align:top;width:150px;"> <![endif]-->
<div class="mj-column-per-25 outlook-group-fix" style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;">
<table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
<tbody>
<tr>
<td style="word-wrap:break-word;font-size:0px;padding:11px 0px 11px 0px;padding-top:10px;padding-left:25px;" align="center">
<table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:separate;" align="center" border="0">
<tbody>
<tr>
<td style="border:none;border-radius:24px;color:#fff;cursor:auto;padding:10px 25px;" align="center" valign="middle" bgcolor="#ff2166"><a href="http://www.bubblesacademy.com/birthdays/" style="text-decoration:none;background:#ff2166;color:#fff;font-family:Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif;font-size:16px;font-weight:normal;line-height:120%;text-transform:none;margin:0px;"
target="_blank">Parties</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="word-wrap:break-word;font-size:0px;padding:11px 0px 11px 0px;padding-top:10px;padding-left:25px;" align="center">
<table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:separate;" align="center" border="0">
<tbody>
<tr>
<td style="border:none;border-radius:24px;color:#fff;cursor:auto;padding:10px 25px;" align="center" valign="middle" bgcolor="#ff2166"><a href="http://www.bubblesacademy.com/blog/" style="text-decoration:none;background:#ff2166;color:#fff;font-family:Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif;font-size:17px;font-weight:normal;line-height:120%;text-transform:none;margin:0px;"
target="_blank">Blog</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]> </td></tr></table> <![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<!--[if mso | IE]> </td></tr></table> <![endif]-->
Thank you in advance!!
I am trying to build a two column layout for a newsletter, but for some reason my columns are sometimes vertically aligning to the centre?
In some versions of outlook it works but others not?
Any idea how I can fix this?
<!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=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta content="telephone=no" name="format-detection" />
<title>EMAIL NEWSLETTER</title>
<style type="text/css">
body {
-webkit-text-size-adjust: 100%!important;
-ms-text-size-adjust: 100%!important;
-webkit-font-smoothing: antialiased!important
}
img {
border: 0!important;
outline: none!important;
}
p {
margin: 0!important;
padding: 0!important;
}
table {
border-collapse: collapse;
mso-table-lspace: 0;
mso-table-rspace: 0;
}
td, a, span {
border-collapse: collapse;
mso-line-height-rule: exactly;
}
.ExternalClass * {
line-height: 100%;
}
span.MsoHyperlink {
mso-style-priority: 99;
color: inherit
}
span.MsoHyperlinkFollowed {
mso-style-priority: 99;
color: inherit;
}
.em_white a {
text-decoration: none;
color: #ffffff;
}
.em_white_und a {
text-decoration: underline;
color: #ffffff;
}
.em_orange a {
text-decoration: none;
color: #EC8026;
}
.em_orange1 a {
text-decoration: none;
color: #e44c16;
}
.em_marun a {
text-decoration: none;
color: #1e8faa;
}
.em_marun1 a {
text-decoration: none;
color: #1E8FAA;
}
.em_yellow a {
text-decoration: none;
color: #f5ebd7;
}
#media screen and (min-width:601px) {
.container {
width: 600px!important;
}
}
</style>
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">table{border-collapse:collapse!important!important}</style>
<![endif]-->
</head>
<body style="margin:0;padding:0">
<table style="width:100%;table-layout:fixed;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center"><table class="container" align="center" cellpadding="0" cellspacing="0" border="0" style="border-spacing:0;Margin:0 auto;width:100%;max-width:600px;">
<tr>
<td><table style="max-width:600px" width="100%" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td><!--[if (gte mso 9)|(IE)]><table width="600" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<table class="container" align="center" cellpadding="0" cellspacing="0" border="0" style="border-spacing:0;Margin:0 auto;width:100%;max-width:600px;" bgcolor="#1E8FAA">
<tr>
<td bgcolor="#1E8FAA" valign="top" style="border-spacing:0;Margin:0 auto;width:100%;max-width:582px"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top"><!--[if (gte mso 9)|(IE)]><table width="582" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="max-width:582px" align="center">
<tr>
<td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="20" style="line-height:0px;font-size:0px"> </td>
</tr>
<tr>
<td class="two-column" valign="top" style="text-align:left;font-size:0" dir="rtl"><!--[if (gte mso 9)|(IE)]><table width="100%" dir="rtl"><tr><td width="188"><![endif]-->
<div class="column" style="width:100%;max-width:188px;display:inline-block;vertical-align:top;text-align:left" dir="ltr">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="column">
<tr>
<td valign="top" class="em_hide"><table width="100%" border="0" cellspacing="0" style="max-width:198px;" cellpadding="0" align="right" class="column">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td><table style="max-width:198px;" border="0" cellspacing="0" cellpadding="0" align="left" class="column">
<tr>
<td width="10"> </td>
<td mc:edit="text_2" class="em_center" height="42" valign="middle" align="left" style="font-family:NewsGothicMT, 'Century Gothic', Arial, sans-serif;font-size:11px; line-height:15px; color:#ffffff;background-color:#1E8FAA;"><multiline style="font-family:NewsGothicMT, 'Century Gothic', Arial, sans-serif;font-size:11px; line-height:15px; color:#ffffff;background-color:#1E8FAA;"><span class="em_white">Email not displaying properly? </span></multiline>
<br />
<span class="em_white_und">
<webversion style="text-decoration:underline;color:#ffffff;"><span class="em_white_und" style="text-decoration:underline;color:#ffffff;">View it in your browser.</span></webversion>
</span></td>
<td width="10"> </td>
</tr>
</table></td>
</tr>
<tr>
<td height="20" style="line-height:1px;font-size:1px"> </td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td><td width="384"><![endif]-->
<div class="column" style="width:100%;max-width:384px;display:inline-block;vertical-align:top;text-align:left" dir="ltr">
<table width="100%" style="max-width:384px" cellpadding="0" align="center" cellspacing="0" border="0">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="10" class="em_hide"> </td>
<td width="152" align="center" valign="top"><img editable="true" src="/images/logo.jpg" width="152" alt="logo" style="display:block;font-family:Georgia, 'Times New Roman', Times, serif;font-size:14px;color:#ffffff;font-weight:bold;line-height:20px;max-width:152px;" border="0" /></td>
<td width="222" class="em_hide"> </td>
</tr>
</table></td>
</tr>
<tr>
<td height="20" style="line-height:1px;font-size:1px"> </td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td>
</tr>
</table></td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td>
</tr>
</table></td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
<table style="width:100%;table-layout:fixed;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center" valign="top"><repeater>
<layout label="Gallery">
<table style="width:100%;table-layout:fixed;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center"><table class="container" align="center" cellpadding="0" cellspacing="0" border="0" style="border-spacing:0;Margin:0 auto;width:100%;max-width:600px;">
<tr>
<td><table style="max-width:600px" width="100%" align="center" cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff">
<tr>
<td><!--[if (gte mso 9)|(IE)]><table width="600" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<table align="center" cellpadding="0" cellspacing="0" border="0" style="border-spacing:0;Margin:0 auto;width:100%;max-width:600px;" bgcolor="#ffffff">
<tr>
<td width="5" class="em_hide"> </td>
<td class="two-column" valign="top" style="text-align:center;font-size:0"><!--[if (gte mso 9)|(IE)]><table width="100%"><tr><td width="295"><![endif]-->
<div class="column" style="width:100%;max-width:295px;display:inline-block;vertical-align:top;text-align:center">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="column">
<tr>
<td width="5" class="em_hide"> </td>
<td align="center" valign="top" class="em_side_space"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="center" valign="top"><img editable="true" src="http://placehold.it/350x250" width="285" alt="GALLERY ARTICLE 1" style="display:block;font-family:NewsGothicMT, 'Century Gothic', Arial, sans-serif;font-size:15px; line-height:30px; color:#000000;font-weight:bold;max-width:285px;" border="0" class="em_full_width" /></td>
</tr>
<tr>
<td valign="top" bgcolor="#1E8FAA" style="background-color:#1E8FAA;"><table width="100%" style="max-width:285px;" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="10"> </td>
<td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="15" style="line-height:1px;font-size:1px;"> </td>
</tr>
<tr>
<td align="left" valign="top" style="font-family:NewsGothicMT, 'Century Gothic', Arial, sans-serif;font-size:13px; line-height:17px; color:#f5ebd7;"><span class="em_yellow">
<multiline style="font-family:NewsGothicMT, 'Century Gothic', Arial, sans-serif;font-size:13px; line-height:17px; color:#f5ebd7;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</multiline>
</span></td>
</tr>
<tr>
<td height="15" style="line-height:1px;font-size:1px;"> </td>
</tr>
</table></td>
<td width="10"> </td>
</tr>
</table></td>
</tr>
<tr>
<td height="18" style="line-height:1px;font-size:1px;"> </td>
</tr>
</table></td>
<td width="5" class="em_hide"> </td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td><td width="295"><![endif]-->
<div class="column" style="width:100%;max-width:295px;display:inline-block;vertical-align:top;text-align:center">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="column">
<tr>
<td width="5" class="em_hide"> </td>
<td align="center" valign="top" class="em_side_space"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="center" valign="top"><img editable="true" src="http://placehold.it/350x250" width="285" alt="GALLERY ARTICLE 2" style="display:block;font-family:NewsGothicMT, 'Century Gothic', Arial, sans-serif;font-size:15px; line-height:30px; color:#000000;font-weight:bold;max-width:285px;" border="0" class="em_full_width" /></td>
</tr>
<tr>
<td valign="top" bgcolor="#1E8FAA" style="background-color:#1E8FAA;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="10"> </td>
<td valign="top"><table width="100%" style="max-width:285px;" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="15" style="line-height:1px;font-size:1px;"> </td>
</tr>
<tr>
<td align="left" valign="top" style="font-family:NewsGothicMT, 'Century Gothic', Arial, sans-serif;font-size:13px; line-height:17px; color:#f5ebd7;"><span class="em_yellow">
<multiline style="font-family:NewsGothicMT, 'Century Gothic', Arial, sans-serif;font-size:13px; line-height:17px; color:#f5ebd7;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</multiline>
</span></td>
</tr>
<tr>
<td height="15" style="line-height:1px;font-size:1px;"> </td>
</tr>
</table></td>
<td width="10"> </td>
</tr>
</table></td>
</tr>
<tr>
<td height="18" style="line-height:1px;font-size:1px;"> </td>
</tr>
</table></td>
<td width="5" class="em_hide"> </td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td>
<td width="5" class="em_hide"> </td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</layout>
</repeater></td>
</tr>
</table>
</body>
</html>
By setting a height for the element your trying to valign it should work.
I fixed it with:
<!--[if (gte mso 9)|(IE)]><table width="100%"><tr><td width="295" valign="top"><![endif]-->