I'm working on an HTML email signature. It displays properly when you send it, but when a recipient replies to or forwards the email, the spacing gets messed up and there are some other problems.
Before (yay):
After (boo):
Here's the code that the signature is generated from:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<!-- 569 when finalizing (don't include px sufix)-->
<table border-collapse="collapse" width="569" style="border-width: 0; font-family: 'Proxima Nova', Helvetica, Arial, Sans-serif; color: #303130;" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<!-- Image table -->
<table border-collapse="collapse" width="83px" align="left" border="0" cellspacing="0" cellpadding="0" style="border: #ffffff;">
<tr>
<td bgcolor="#ffffff" style="padding: 0px; font-family: 'Proxima Nova', Helvetica, Arial, Sans-serif;">
<p style="mso-table-lspace: 0; mso-tablerspace: 0; margin: 0;">
<!-- 1. Headshot image (src and alt) -->
<img src="http://www.levelfunded.com/email/russ_carpel.jpg" alt="Russ Carpel headshot" style="display: block;"/>
</p>
</td>
</tr>
</table>
<!-- Contact info table -->
<table border-collapse="collapse" width="329" height="72px" align="left" border="0" cellspacing="0" cellpadding="0" align="right" style="border:1px solid #ffffff;">
<tr>
<td bgcolor="#ffffff" style="padding: 0px; vertical-align: top; font-family: 'Proxima Nova', Helvetica, Arial, Sans-serif;">
<p style="mso-table-lspace: 0; mso-tablerspace: 0; margin: 0;">
<p style="font-size: 14px; margin: 0px; margin-top: 8px;">
<b>
<!-- 2. Name -->
<span>Russ Carpel</span>
</b>
<!-- 3. Title -->
<span style="font-size: 13px;">CEO</span>
</p>
<p style="font-size: 14px; margin: 0px; margin-top: 5px;">
<!-- 4. Mobile number (href and copy) -->
<span>(888) 888-8888 m</span>
<span style="color: #bababa;"> | </span>
<!-- 5. Email (href and copy) -->
<span>
address#domain.com
</span>
<span>
<!-- 6. LinkedIn profile -->
<a href="https://www.linkedin.com/in/profile" target="_blank">
<img src="http://levelfunded.com/email/linkedIn.jpg" alt="LinkedIn" style="vertical-align: top; margin-top: 1px"/>
</a>
</span>
</p>
<p style="font-size: 14px; margin: 0px; margin-top: 5px;">
<!-- 7. Office number -->
<span>(888) 888-8888 o</span>
<span style="color: #bababa;"> | </span>
<span>levelfunded.com</span>
</p>
</p>
</td>
</tr>
</table>
<!-- Logo table -->
<table border-collapse="collapse" width="107" height="72px" align="left" border="0" cellspacing="0" cellpadding="0" style="border:1px solid #ffffff;">
<tr>
<td bgcolor="#ffffff" valign="bottom" style="font-family: 'Proxima Nova', Helvetica, Arial, Sans-serif;">
<p style="mso-table-lspace: 0; mso-tablerspace: 0; margin: 0;">
<a href="http://levelfunded.com" target="_blank">
<img src="http://levelfunded.com/email/levelfundedLogoCities.jpg" alt="LevelFunded Logo"/ style="display: block;">
</a>
</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="3">
<!-- Speech carrot table -->
<table border-collapse="collapse" align="left" border="0" cellspacing="0" cellpadding="0" style="font-family: 'Proxima Nova', Helvetica, Arial, Sans-serif; color: #303130; padding-top: 10px; padding-left: 22px; border-width: 0;">
<tr>
<td>
<img src="http://www.levelfunded.com/email/triangle.jpg" alt="Speech carrot" style="display: block;"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<!-- Gray box cell -->
<td colspan="3" style="padding-left: 8px; padding-top: 8px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; background-color: #e8e8e8;">
<!-- Video link table -->
<table border-collapse="collapse" align="left" border="0" cellspacing="0" cellpadding="0" style="font-family: 'Proxima Nova', Helvetica, Arial, Sans-serif; color: #303130; padding-bottom: 8px; padding-right: 8px; border:1px solid #e8e8e8;">
<tr>
<td bgcolor="#e8e8e8" style="font-family: 'Proxima Nova', Helvetica, Arial, Sans-serif;">
<p style="mso-table-lspace: 0; mso-tablerspace: 0; margin: 0;">
<a href="http://levelfunded.com/video.html">
<img src="http://levelfunded.com/email/videoLinkImg-trimmed.jpg" alt="Immediately reduce health benefits costs by $50K, possibly $250K or more. Click to watch video." style="display: block; padding: 0px; margin: 0px;"/>
</a>
</p>
</td>
</tr>
</table>
<!-- Article link table -->
<table border-collapse="collapse" align="left" border="0" cellspacing="0" cellpadding="0" style="font-family: 'Proxima Nova', Helvetica, Arial, Sans-serif; color: #303130; padding-bottom: 8px; padding-right: 8px; border:1px solid #e8e8e8;">
<tr>
<td bgcolor="#e8e8e8" style="font-family: 'Proxima Nova', Helvetica, Arial, Sans-serif;">
<p style="mso-table-lspace: 0; mso-tablerspace: 0; margin: 0;">
<a href="http://www.chicagotribune.com/business/ct-small-business-insurance-1214-biz-20141214-story.html">
<img src="http://levelfunded.com/email/articleLinkImg-trimmed.jpg" alt="Click to read Chicage Tribune article" style="display: block;"/>
</a>
</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="3">
<table border-collapse="collapse" align="left" border="0" cellspacing="0" cellpadding="8" style="font-family: 'Proxima Nova', Helvetica, Arial, Sans-serif; color: #7e7e7e; font-size: 10px; line-height: 12px; border-width: 0;">
<tr>
<td>
This email is confidential communication from Level Funded Health Partners LLC and may not be forwarded without the expressed written consent of the company. Level Funded Health Partners LLC is a DE LLC, File #8888888. The company is a U.S. based licensed insurance agency entity. Delaware insurance agency entity license #8888888.
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
I understand that when the recipient composes and sends their reply, their email client has to re-encode the email and that creates the possibility for these formatting errors. (More on that here.)
To be clear, here are the errors I'm talking about:
Extra space above and below the speech carrot graphic
Link formatting is lost (on the blurred section, but you can see that the green is turning into blue
The background color on the gray rectangle is getting dropped
Padding on the two big graphics is getting decreased
Font styling on the disclaimer text is getting dropped
Disclaimer copy is getting truncated after the second # character.
I know trying to answer all of that is too broad. So here's my question:
I've found lots of resources for coding a good html email. However, I haven't been able to find resources on good practices to make it more resilient against these kinds of errors when it is replied to or forwarded. Can anybody point me to any such resources?
Unfortunately you can't account for all of the different email clients out there with regards to email forwarding. They all handle them differently. You can almost certainly count on your HTML formatting being somehow broken when someone forwards an email to someone else with the forward button. (You can do your best though; I commented earlier with some suggestions.)
The alternative is to use a "Forward to a friend" functionality available in some email service providers such as Salesforce (formerly ExactTarget) for example. You would encourage people to click on a link which would take the user to a page to fill in an email address, then the message would be sent to them on the user's behalf. In ET you could also show/hide certain information depending on the context. So, if someone was sending the message via FTAF, any sensitive information could be removed, for example. This all of course depends on your email service provider's offerings.
Related
I have a simple 2 column layouts using a hybrid fluid design. I want the columns to stack on top of each other on mobile screens. I have a two-columns class table that wraps around my column class tables. On my column class tables i have style="display: inline-block; vertical-align: top; width: 100%; max-width: 300px; border-spacing:0; background-color: #D93644;". This table holds my img tag on this one column. My other column holds the writing content.
This section alone should be should be responsive already due to the inline-block, width and max width styling but it doesn't stack on top of each other on smaller screens and I cannot for the life of me figure out why and its probably something so so simple. Really need help with this.
<!-- START 1ST TWO COLUMN -->
<tr>
<td>
<table width="100%" style="border-spacing: 0;" role="presentation">
<tr>
<td class="two-columns" style="padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; font-size: 0; text-align: center;">
<!--[if (gte mso 9)|(IE)]>
<table width="100%" style="border-spacing:0;" role="presentation">
<tr>
<td width="300" valign="top" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;">
<![endif]-->
<table class="column" role="presentation" style="display: inline-block; vertical-align: top; width: 100%; max-width: 300px; border-spacing:0; background-color: #D93644;">
<tr>
<td class="padding" style="background-color: #D93644; padding-top: 0; padding-right: 0px; padding-bottom: 0; padding-left: 0px; font-size: 0;">
<table class="content" role="presentation" style="border-spacing: 0; text-align: left;">
<tr>
<td style="background-color: #D93644;">
<img class="two-col-img" width="280" style="max-width: 280px;" height="215.7" src="http://ibb.co.com/images/c81e0cd1b8b486f30644ee03f4a1988e.png" alt="airplane" border="0" title="airplane with red background">
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td><td width="300" valign="middle" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;">
<![endif]-->
<table class="column" role="presentation" style="display: inline-block; vertical-align: top; width: 100%; border-spacing:0; max-width: 300px;" >
<tr>
<td class="padding" style="padding-top: 0; padding-right: 15px; padding-bottom: 0; padding-left: 15px; font-size: 0;">
<table class="content" role="presentation" style="border-spacing: 0; text-align: left;">
<tr>
<td>
<p style="font-size: 20px; font-weight: bold; color: #808080;">We Can Give
Your Career Wings</p>
<p style="font-size: 12px; color: #808080;">Ascent Aviation Services hold one of only two Class IV CFR Part 145 license that allows us to specialize in the operation of every aspect of aircraft maintenance (Narrow and wide body, small to large, regional to long-haul).</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
<!-- END 1ST TWO COLUMN -->
How can I solve the Outlook problem in my custom html template. What I currently have:
<table cellpadding="0" cellspacing="0" width="700" align="center">
<tr>
<td style="width:100%;display:block;" align="left">
<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://" style="height:40px;v-text-anchor:middle;width:170px;" strokecolor="#ce162e" fillcolor="#ffffff">
<w:anchorlock/>
<center>
<singleline label='Button Title'>Read More</singleline>
</center>
</v:rect>
<![endif]-->
<a href="https://" style="border:2px solid red;text-decoration:none;">
<singleline label="Button Title">Read More</singleline>
</a></td>
</tr>
</table>
If an outlook mail client opens the mail, I can see the CTA, but if I edit the CTA text in the editor in Campaign Monitor, the changes only apply to non-Outlook mail clients. Is there a way to solve that problem?
Many thanks in advance.
Bests,
Yanick
Since you are using custom email template, you can replace your VML button with the one below. This button will work the same across all email clients. It will eliminate the issue you are facing in campaign monitor as well.
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;">
<tr>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top; background-color: #3498db; border-radius: 0px; text-align: center;" valign="top" bgcolor="#3498db" align="center"> Call to action </td>
</tr>
</table>
thanks for helping me first of all.
I'm trying to format this email, but the link can not be put inside the container.
I do not know what properties I can use.
In html it works very well but when I see it in a mail client it does not work
<table width="650" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td bgcolr="#005daa" width="650px" bgcolor="#ffffff">
[imagen_1]
</td>
</tr>
<tr>
<td width="650" bgcolor="#FFFFFF" style="padding-right: 30px; padding-bottom: 20px; padding-left: 30px">
<p style="margin: 0; font-family: Arial, sans-serif; font-size: 18px; color: #5c6670; text-align: left;">
[texto_1]
</p><br>
<p style="margin: 0; font-family: Arial, sans-serif; font-size: 18px; color: #ed1b24; text-align: left; font-weight: bold">
<a style="text-decoration:none; margin: 0; font-family: Arial, sans-serif; font-size: 18px; color: #ed1b24; text-align: left; font-weight: bold"
href="https://{{ $_SERVER['HTTP_HOST'] }}/validating-email/{{$data->token}}">
CLICK HERE IN THE FOLLOWING LINK <br>TO CONFIRM YOUR MAIL
</a>
</p>
<p style="margin: 0; font-family: Arial, sans-serif; font-size: 18px; color: #ed1b24; text-align: left; font-weight: bold">
and start enjoying great benefits.
</p>
</td>
</tr>
<tr>
<td>
<table width="550" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td bgcolr="#005daa" width="650px" bgcolor="#ffffff">
<a rel="nofollow" style="widh: 500px; word-break: break-all;">
https://dominio.com/confirm-email/eyJpdiI6IkhkWlp6NlVQSXcrd0R6WnVWXC9za1wvUT09IiwidmFsdWUiOiJ3WUwycEt5UFwvbU9IVnBnWDJYejNlem1MYytHcFhMSk56OFwvOGZUdmVhYzdRbUgyNEM5b0VkMlhkdlBFNGxrcGQiLCJtYWMiOiI4MmZkNjllZjI3MTNhMDhiNTU1NmRmZjhmNmFiNzljYWM3ZGY0N2UzZTFlZjA5MjlkNmY4MDc5NWY1OGYwMWRjIn0=
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
So it looks in the emails
I already try a thousand things and not one works.
you have some idea of how I can do so that the link is set and does not remain in a single line
<table width="650" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td bgcolr="#005daa" width="650px" bgcolor="#ffffff">
[imagen_1]
</td>
</tr>
<tr>
<td width="650" bgcolor="#FFFFFF" style="padding-right: 30px; padding-bottom: 20px; padding-left: 30px">
<p style="margin: 0; font-family: Arial, sans-serif; font-size: 18px; color: #5c6670; text-align: left;">
[texto_1]
</p><br>
<p style="margin: 0; font-family: Arial, sans-serif; font-size: 18px; color: #ed1b24; text-align: left; font-weight: bold">
<a style="text-decoration:none; margin: 0; font-family: Arial, sans-serif; font-size: 18px; color: #ed1b24; text-align: left; font-weight: bold"
href="https://{{ $_SERVER['HTTP_HOST'] }}/validating-email/{{$data->token}}">
CLICK HERE IN THE FOLLOWING LINK <br>TO CONFIRM YOUR MAIL
</a>
</p>
<p style="margin: 0; font-family: Arial, sans-serif; font-size: 18px; color: #ed1b24; text-align: left; font-weight: bold">
and start enjoying great benefits.
</p>
</td>
</tr>
<tr>
<td>
<table width="550" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td bgcolr="#005daa" width="650px" bgcolor="#ffffff">
<a rel="nofollow" style="widh: 500px;">
https://dominio.com/confirm-email/eyJpdiI6IkhkWlp6NlVQSXcrd0R6WnVWXC9za1wvUT09IiwidmFsdWUiOiJ3WUwycEt5UFwvbU9IVnBnWDJYejNlem1MYytHcFhMSk56OFwvOGZUdmVhYzdRbUgyNEM5b0VkMlhkdlBFNGxrcGQiLCJtYWMiOiI4MmZkNjllZjI3MTNhMDhiNTU1NmRmZjhmNmFiNzljYWM3ZGY0N2UzZTFlZjA5MjlkNmY4MDc5NWY1OGYwMWRjIn0=
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
Are you asking how to make an href work?
This is how a basic href works:
stackoverflow.com
In your case it should look like this:
<a href="https://dominio.com/confirm-email/eyJpdiI6IkhkWlp6NlVQSXcrd0R6WnVWXC9za1wvUT09IiwidmFsdWUiOiJ3WUwycEt5UFwvbU9IVnBnWDJYejNlem1MYytHcFhMSk56OFwvOGZUdmVhYzdRbUgyNEM5b0VkMlhkdlBFNGxrcGQiLCJtYWMiOiI4MmZkNjllZjI3MTNhMDhiNTU1NmRmZjhmNmFiNzljYWM3ZGY0N2UzZTFlZjA5MjlkNmY4MDc5NWY1OGYwMWRjIn0="
target="_blank" rel="nofollow" style="widh: 500px; word-break: break-all;">CLICK HERE IN THE FOLLOWING LINK<br />
TO CONFIRM YOUR MAIL<br />
and start enjoying great benefits.</a>
Or do this if you only want the url to link to the website:
<a href="https://dominio.com/confirm-email/eyJpdiI6IkhkWlp6NlVQSXcrd0R6WnVWXC9za1wvUT09IiwidmFsdWUiOiJ3WUwycEt5UFwvbU9IVnBnWDJYejNlem1MYytHcFhMSk56OFwvOGZUdmVhYzdRbUgyNEM5b0VkMlhkdlBFNGxrcGQiLCJtYWMiOiI4MmZkNjllZjI3MTNhMDhiNTU1NmRmZjhmNmFiNzljYWM3ZGY0N2UzZTFlZjA5MjlkNmY4MDc5NWY1OGYwMWRjIn0="
target="_blank">https://dominio.com/confirm-email/eyJpdiI6IkhkWlp6NlVQSXcrd0R6WnVWXC9za1wvUT09IiwidmFsdWUiOiJ3WUwycEt5UFwvbU9IVnBnWDJYejNlem1MYytHcFhMSk56OFwvOGZUdmVhYzdRbUgyNEM5b0VkMlhkdlBFNGxrcGQiLCJtYWMiOiI4MmZkNjllZjI3MTNhMDhiNTU1NmRmZjhmNmFiNzljYWM3ZGY0N2UzZTFlZjA5MjlkNmY4MDc5NWY1OGYwMWRjIn0=</a>
All of this can be on one line. I added the breaks to make it easier to see the code.
Good luck.
Outlook 2016 is adding space between table rows in HTML email. I can't find a fix that works. Blue section on top should be one bar, not have the white gaps. Gray section on bottom should also be one footer section, not have the two white gaps in it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"> <!-- utf-8 works for most cases -->
<meta name="viewport" content="width=device-width"> <!-- Forcing initial-scale shouldn't be necessary -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Use the latest (edge) version of IE rendering engine -->
<meta name="x-apple-disable-message-reformatting"> <!-- Disable auto-scale in iOS 10 Mail entirely -->
<title>Learn how to improve employee retention by over 40%!</title> <!-- The title tag shows in email notifications, like Android 4.4. -->
<!-- Web Font / #font-face : BEGIN -->
<!-- Desktop Outlook chokes on web font references and defaults to Times New Roman, so we force a safe fallback font. -->
<!--[if mso]>
<style>
* {
font-family: sans-serif !important;
}
</style>
<![endif]-->
<!-- All other clients get the webfont reference; some will render the font and others will silently fail to the fallbacks. More on that here: http://stylecampaign.com/blog/2015/02/webfont-support-in-email/ -->
<!--[if !mso]><!-->
<link href='<link href='https://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css' />
<!--<![endif]-->
<!-- Web Font / #font-face : END -->
<!-- CSS Reset -->
<style>
/* What it does: Remove spaces around the email design added by some email clients. */
/* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */
html,
body {
margin: 0 auto !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
}
/* What it does: Stops email clients resizing small text. */
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
/* What is does: Centers email on Android 4.4 */
div[style*="margin: 16px 0"] {
margin:0 !important;
}
/* What it does: Stops Outlook from adding extra spacing to tables. */
table,
td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
/* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
table table table {
table-layout: auto;
}
/* What it does: Uses a better rendering method when resizing images in IE. */
img {
-ms-interpolation-mode:bicubic;
}
/* What it does: A work-around for iOS meddling in triggered links. */
*[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
}
/* What it does: A work-around for Gmail meddling in triggered links. */
.x-gmail-data-detectors,
.x-gmail-data-detectors *,
.aBn {
border-bottom: 0 !important;
cursor: default !important;
}
/* What it does: Prevents Gmail from displaying an download button on large, non-linked images. */
.a6S {
display: none !important;
opacity: 0.01 !important;
}
/* If the above doesn't work, add a .g-img class to any image in question. */
img.g-img + div {
display:none !important;
}
/* What it does: Prevents underlining the button text in Windows 10 */
.button-link {
text-decoration: none !important;
}
h1 {
overflow: hidden;
text-align: center;
}
h2:before,
h2:after {
background-color: #777777;
content: "";
display: inline-block;
height: 1px;
position: relative;
vertical-align: middle;
width: 50%;
}
h2:before {
right: 0.8em;
margin-left: -50%;
}
h2:after {
left: 0.8em;
margin-right: -50%;
}
/* What it does: Removes right gutter in Gmail iOS app: https://github.com/TedGoas/Cerberus/issues/89 */
/* Create one of these media queries for each additional viewport size you'd like to fix */
/* Thanks to Eric Lepetit #ericlepetitsf) for help troubleshooting */
#media only screen and (min-device-width: 375px) and (max-device-width: 413px) { /* iPhone 6 and 6+ */
.email-container {
min-width: 375px !important;
}
}
#media only screen and (max-width: 600px){
.hero-img {
height:auto !important;
max-width:600px !important;
width: 100% !important;
}
}
</style>
<!-- Progressive Enhancements -->
<style>
/* What it does: Hover styles for buttons */
.button-td,
.button-a {
transition: all 100ms ease-in;
}
.button-td:hover,
.button-a:hover {
background: #ffd541 !important;
border-color: #ffd541 !important;
}
</style>
</head>
<body padding="0" width="100%" bgcolor="#ffffff" style="padding: 0; margin: 0; mso-line-height-rule: exactly;">
<center style="width: 100%; background: #ffffff; text-align: center; display: inline-block;"><!-- Visually Hidden Preheader Text : BEGIN -->
<div style="display:none;font-size:1px;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;font-family: sans-serif;">Hidden text</div>
<!-- Visually Hidden Preheader Text : END --><!--
Set the email width. Defined in two places:
1. max-width for all clients except Desktop Windows Outlook, allowing the email to squish on narrow but never go wider than 600px.
2. MSO tags for Desktop Windows Outlook enforce a 600px width.
-->
<div class="email-container" style="max-width: 600px; margin: auto;"><!--[if mso]>
<table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" width="600" align="center">
<tr>
<td>
<![endif]--><!-- Email Header : BEGIN -->
<table align="center" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" style="max-width: 600px;" width="100%"><tr><td height="33" bgcolor="#0072bc" style="font-size: 0; line-height: 0;" class=""> </td> </tr><tr><td bgcolor="#0072bc" align="center" class=""><img alt="companyname logo" src="http://www2.companynameweb.com/l/50342/2017-04-10/8frt4b/50342/155397/companyname_logo_lockup_white.png" aria-hidden="true" border="0" height="54" style="border-spacing: 0; min-height: 54px;"></td></tr><tr><td height="33" bgcolor="#0072bc" style="font-size: 0; line-height: 0;" class=""> </td></tr></table>
<!-- Email Header : END --><!-- Email Body : BEGIN -->
<table align="center" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" style="max-width: 600px;" width="100%">
<tr>
<td align="left" height="5" style="font-family: sans-serif; font-size:1px; mso-line-height-rule: exactly; line-height:100%;" valign="top"> </td>
</tr>
<!-- Hero Image, Flush : BEGIN -->
<tr>
<td style="background: #ffffff" class=""><img alt="" aria-hidden="true" border="0" class="hero-img" src="http://www2.companynameweb.com/l/50342/2017-04-10/8frt4d/50342/155399/replaced_informed_employees.jpg" style="height: auto; background: #ffffff; border-width: 0px; width: 600px; line-height: 0px; color: #ffffff; max-width: 600px;" width="600"></td>
</tr>
<!-- Hero Image, Flush : END --><!-- 1 Column Text + Button : BEGIN -->
<tr>
<td height="53" style="font-size: 0; line-height: 0; min-height: 53px;" class=""> </td>
</tr>
<tr>
<td class="stack-column-center" style="font-family: 'Lato', sans-serif; line-height: 1.4em; color: #777777; text-align: center; padding: 0px 30px 0px 30px;" width="100%"><span style="color:#0072bc; font-size:18px;"><strong>It’s simple:</strong></span> lorem ipsum.<br>
<br>
lorem ipsum<em>replaceds</em>.</td>
</tr>
<tr>
<td height="40" style="font-size: 0; line-height: 0; min-height: 40px;" class=""> </td>
</tr>
</table>
<!-- Button : Begin -->
<table align="center" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" style="margin: auto;">
<tr>
<td class="button-td" pardot-data="link-underline:none !important;" style="border-radius: 12px; background: #FFC220; text-align: center; text-decoration: none !important;"><a class="button-a" href="http://www.companynameweb.com/" style="background: rgb(255, 194, 32); border: 15px solid rgb(255, 194, 32); font-family: sans-serif; font-size: 16px; letter-spacing: 1.5px; line-height: 1.1; text-align: center; display: block; border-radius: 4px; font-weight: bold; text-decoration: none !important;"><span class="button-link" style="color:#0072BC; text-transform: uppercase; text-decoration: none !important;"> SEE HOW IT WORKS </span></a></td>
</tr>
</table>
<!-- Button : END --><!-- Social : Begin -->
<table align="center" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" width="90%">
<tr>
<td height="50" style="font-size: 0; line-height: 0; min-height: 50px;" class=""> </td>
</tr>
<tr>
<td align="center" class="stack-column-center" style="font-family: sans-serif; line-height: 20px; color: #777777; padding: 0px 20px 0px 20px; overflow: hidden;">
<h2 style="font-size: 13px; text-transform: uppercase; text-align: center;">Follow us</h2>
</td>
</tr>
<tr>
<td height="40" style="font-size: 0; line-height: 0; min-height: 40px;" class=""> </td>
</tr>
<tr>
<td align="center" class=""><!--[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]--></td>
</tr>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" style="max-width:600px;" width="100%">
<tr>
<td align="center">
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="27" class=""> </td>
<td align="center" class=""><img alt="LinkedIn social icon" aria-hidden="true" height="29" src=".png" style="min-height: 29px; background: #ffffff; padding: 0 11px;" width="29"></td>
<td width="27" class=""> </td>
<td align="center" class=""><img alt="YouTube social icon" aria-hidden="true" height="29" src=".png" style="min-height: 29px; background: #ffffff; padding: 0 11px;" width="29"></td>
<td width="27" class=""> </td>
<td align="center" class=""><img alt="Facebook social icon" aria-hidden="true" height="29" src="png" style="min-height: 29px; background: #ffffff; padding: 0 11px;" width="29"></td>
<td width="27" class=""> </td>
<td align="center" class=""><img alt="Twitter social icon" aria-hidden="true" height="29" src=".png" style="min-height: 29px; background: #ffffff; padding: 0 11px;" width="29"></td>
<td width="27" class=""> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="40" style="font-size: 0; line-height: 0; min-height: 40px;" class=""> </td>
</tr>
</table>
<!-- Social : END -->
<!-- Email Footer : Begin -->
<table align="center" bgolor="#e1e1e1" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background-color:#e1e1e1; border-spacing: 0; max-width: 600px;" width="100%">
<tr>
<td height="39" style="border-spacing: 0; line-height: 0; max-height: 39px; min-height: 39px;" class=""> </td>
</tr>
<tr>
<td class="x-gmail-data-detectors" style="padding: 0px 10px 0px 10px; width: 100%; font-size: 8px; font-family: sans-serif; line-height: 11px; text-align: center; color: #2e2e2e;"><webversion style="color:#2e2e2e; text-decoration:underline; font-weight: bold;">View as a Web Page</webversion><br><br>
© Copyright 2017 <span style="font-weight: bolder;">companyname</span><br>
#companynameweb.com | phone<br>
<span style="font-weight: bolder;">companyname</span> Headquarters | address<br><br>
Click here to unsubscribe</td>
</tr>
<tr>
<td height="39" style="border-spacing: 0; line-height: 0; max-height: 39px; min-height: 39px;" class=""> </td>
</tr>
</table>
<!-- Email Footer : END --><!--[if mso]>
</td>
</tr>
</table>
<![endif]--></div>
</center>
</body>
</html>
I fixed up issues picked by #flexlearn and add in some more code for different supported clients.
Basically these are the changes that i did:
Added display block
removed max and min height on table td
fixed font size and line height to 0px
Also you had two hrefs for the google font (now code looks better in dreamweaver)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"> <!-- utf-8 works for most cases -->
<meta name="viewport" content="width=device-width"> <!-- Forcing initial-scale shouldn't be necessary -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Use the latest (edge) version of IE rendering engine -->
<meta name="x-apple-disable-message-reformatting"> <!-- Disable auto-scale in iOS 10 Mail entirely -->
<title>Learn how to improve employee retention by over 40%!</title> <!-- The title tag shows in email notifications, like Android 4.4. -->
<!-- Web Font / #font-face : BEGIN -->
<!-- Desktop Outlook chokes on web font references and defaults to Times New Roman, so we force a safe fallback font. -->
<!--[if mso]>
<style>
* {
font-family: sans-serif !important;
}
</style>
<![endif]-->
<!-- All other clients get the webfont reference; some will render the font and others will silently fail to the fallbacks. More on that here: http://stylecampaign.com/blog/2015/02/webfont-support-in-email/ -->
<!--[if !mso]><!-->
<link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet" type="text/css" />
<!--<![endif]-->
<!-- Web Font / #font-face : END -->
<!-- CSS Reset -->
<style>
/* What it does: Remove spaces around the email design added by some email clients. */
/* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */
html,
body {
margin: 0 auto !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
}
/* What it does: Stops email clients resizing small text. */
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
/* What is does: Centers email on Android 4.4 */
div[style*="margin: 16px 0"] {
margin:0 !important;
}
/* What it does: Stops Outlook from adding extra spacing to tables. */
table,
td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
/* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
table table table {
table-layout: auto;
}
/* What it does: Uses a better rendering method when resizing images in IE. */
img {
-ms-interpolation-mode:bicubic;
}
/* What it does: A work-around for iOS meddling in triggered links. */
*[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
}
/* What it does: A work-around for Gmail meddling in triggered links. */
.x-gmail-data-detectors,
.x-gmail-data-detectors *,
.aBn {
border-bottom: 0 !important;
cursor: default !important;
}
/* What it does: Prevents Gmail from displaying an download button on large, non-linked images. */
.a6S {
display: none !important;
opacity: 0.01 !important;
}
/* If the above doesn't work, add a .g-img class to any image in question. */
img.g-img + div {
display:none !important;
}
/* What it does: Prevents underlining the button text in Windows 10 */
.button-link {
text-decoration: none !important;
}
h1 {
overflow: hidden;
text-align: center;
}
h2:before,
h2:after {
background-color: #777777;
content: "";
display: inline-block;
height: 1px;
position: relative;
vertical-align: middle;
width: 50%;
}
h2:before {
right: 0.8em;
margin-left: -50%;
}
h2:after {
left: 0.8em;
margin-right: -50%;
}
/* What it does: Removes right gutter in Gmail iOS app: https://github.com/TedGoas/Cerberus/issues/89 */
/* Create one of these media queries for each additional viewport size you'd like to fix */
/* Thanks to Eric Lepetit #ericlepetitsf) for help troubleshooting */
#media only screen and (min-device-width: 375px) and (max-device-width: 413px) { /* iPhone 6 and 6+ */
.email-container {
min-width: 375px !important;
}
}
#media only screen and (max-width: 600px){
.hero-img {
height:auto !important;
max-width:600px !important;
width: 100% !important;
}
}
</style>
<!-- Progressive Enhancements -->
<style>
/* What it does: Hover styles for buttons */
.button-td,
.button-a {
transition: all 100ms ease-in;
}
.button-td:hover,
.button-a:hover {
background: #ffd541 !important;
border-color: #ffd541 !important;
}
</style>
</head>
<body padding="0" width="100%" bgcolor="#ffffff" style="padding: 0; margin: 0; mso-line-height-rule: exactly;">
<center style="width: 100%; background: #ffffff; text-align: center; display: inline-block;"><!-- Visually Hidden Preheader Text : BEGIN -->
<div style="display:none;font-size:1px;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;font-family: sans-serif;">Hidden text</div>
<!-- Visually Hidden Preheader Text : END --><!--
Set the email width. Defined in two places:
1. max-width for all clients except Desktop Windows Outlook, allowing the email to squish on narrow but never go wider than 600px.
2. MSO tags for Desktop Windows Outlook enforce a 600px width.
-->
<div class="email-container" style="max-width: 600px; margin: auto;"><!--[if mso]>
<table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" width="600" align="center">
<tr>
<td>
<![endif]--><!-- Email Header : BEGIN -->
<table align="center" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" style="max-width: 600px;" width="100%"><tr><td height="33" bgcolor="#0072bc" style="font-size: 0px; line-height: 0px;height:33px;" class=""> </td> </tr><tr><td bgcolor="#0072bc" align="center" class=""><img alt="companyname logo" src="http://www2.companynameweb.com/l/50342/2017-04-10/8frt4b/50342/155397/companyname_logo_lockup_white.png" aria-hidden="true" border="0" height="54" style="border-spacing: 0; min-height: 54px;display:block;"></td></tr><tr><td height="33" bgcolor="#0072bc" style="font-size: 0px; line-height: 0px;" class=""> </td></tr></table>
<!-- Email Header : END --><!-- Email Body : BEGIN -->
<table align="center" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" style="max-width: 600px;" width="100%">
<tr>
<td align="left" height="5" style="font-family: sans-serif; font-size:1px; mso-line-height-rule: exactly; line-height:100%;" valign="top"> </td>
</tr>
<!-- Hero Image, Flush : BEGIN -->
<tr>
<td style="background: #ffffff" class=""><img alt="" aria-hidden="true" border="0" class="hero-img" src="http://www2.companynameweb.com/l/50342/2017-04-10/8frt4d/50342/155399/replaced_informed_employees.jpg" style="height: auto; background: #ffffff; border-width: 0px; width: 600px; line-height: 0px; color: #ffffff; max-width: 600px;display:block;" width="600"></td>
</tr>
<!-- Hero Image, Flush : END --><!-- 1 Column Text + Button : BEGIN -->
<tr>
<td height="53" style="font-size: 0px; line-height: 0px; min-height: 53px;" class=""> </td>
</tr>
<tr>
<td class="stack-column-center" style="font-family: 'Lato', sans-serif; line-height: 1.4em; color: #777777; text-align: center; padding: 0px 30px 0px 30px;" width="100%"><span style="color:#0072bc; font-size:18px;"><strong>It’s simple:</strong></span> lorem ipsum.<br>
<br>
lorem ipsum<em>replaceds</em>.</td>
</tr>
<tr>
<td height="40" style="font-size: 0px; line-height: 0px; min-height: 40px;" class=""> </td>
</tr>
</table>
<!-- Button : Begin -->
<table align="center" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" style="margin: auto;">
<tr>
<td class="button-td" pardot-data="link-underline:none !important;" style="border-radius: 12px; background: #FFC220; text-align: center; text-decoration: none !important;"><a class="button-a" href="http://www.companynameweb.com/" style="background: rgb(255, 194, 32); border: 15px solid rgb(255, 194, 32); font-family: sans-serif; font-size: 16px; letter-spacing: 1.5px; line-height: 1.1; text-align: center; display: block; border-radius: 4px; font-weight: bold; text-decoration: none !important;"><span class="button-link" style="color:#0072BC; text-transform: uppercase; text-decoration: none !important;"> SEE HOW IT WORKS </span></a></td>
</tr>
</table>
<!-- Button : END --><!-- Social : Begin -->
<table align="center" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" width="90%">
<tr>
<td height="50" style="font-size: 0px; line-height: 0px; min-height: 50px;" class=""> </td>
</tr>
<tr>
<td align="center" class="stack-column-center" style="font-family: sans-serif; line-height: 20px; color: #777777; padding: 0px 20px 0px 20px; overflow: hidden;">
<h2 style="font-size: 13px; text-transform: uppercase; text-align: center;">Follow us</h2>
</td>
</tr>
<tr>
<td height="40" style="font-size: 0px; line-height: 0px; min-height: 40px;" class=""> </td>
</tr>
<tr>
<td align="center" class=""><!--[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]--></td>
</tr>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" style="max-width:600px;" width="100%">
<tr>
<td align="center">
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="27" class=""> </td>
<td align="center" class=""><img alt="LinkedIn social icon" aria-hidden="true" height="29" src=".png" style="min-height: 29px; background: #ffffff; padding: 0 11px;" width="29"></td>
<td width="27" class=""> </td>
<td align="center" class=""><img alt="YouTube social icon" aria-hidden="true" height="29" src=".png" style="min-height: 29px; background: #ffffff; padding: 0 11px;" width="29"></td>
<td width="27" class=""> </td>
<td align="center" class=""><img alt="Facebook social icon" aria-hidden="true" height="29" src="png" style="min-height: 29px; background: #ffffff; padding: 0 11px;" width="29"></td>
<td width="27" class=""> </td>
<td align="center" class=""><img alt="Twitter social icon" aria-hidden="true" height="29" src=".png" style="min-height: 29px; background: #ffffff; padding: 0 11px;" width="29"></td>
<td width="27" class=""> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="40" style="font-size: 0px; line-height: 0px; min-height: 40px;" class=""> </td>
</tr>
</table>
<!-- Social : END -->
<!-- Email Footer : Begin -->
<table align="center" bgolor="#e1e1e1" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background-color:#e1e1e1; border-spacing: 0; max-width: 600px;" width="100%">
<tr>
<td height="39" style="border-spacing: 0; line-height: 0px;height: 39px;" class=""></td>
</tr>
<tr>
<td class="x-gmail-data-detectors" style="padding: 0px 10px 0px 10px; width: 100%; font-size: 8px; font-family: sans-serif; line-height: 11px; text-align: center; color: #2e2e2e;"><webversion style="color:#2e2e2e; text-decoration:underline; font-weight: bold;">View as a Web Page</webversion><br><br>
© Copyright 2017 <span style="font-weight: bolder;">companyname</span><br>
#companynameweb.com | phone<br>
<span style="font-weight: bolder;">companyname</span> Headquarters | address<br><br>
Click here to unsubscribe</td>
</tr>
<tr>
<td height="39" style="border-spacing: 0; line-height: 0px;height: 39px;" class=""></td>
</tr>
</table>
<!-- Email Footer : END --><!--[if mso]>
</td>
</tr>
</table>
<![endif]--></div>
</center>
</body>
</html>
Let me know if this works for you.
When building spacer rows, font-size and line-height must be declared as 0px (not 0).
<tr>
<td height="13" align="center" valign="middle" style="margin: 0; font-size: 0px; line-height: 0px;"> </td>
</tr>
I figured it out.
font-size: 0; line-height: 0;
needed to be defined in pixels, and I added
valign="middle"
to each table row's data.
I replaced:
<!-- Email Header : BEGIN -->
<table align="center" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" style="max-width: 600px;" width="100%">
<tbody>
<tr>
<td height="33" bgcolor="#0072bc" style="font-size: 0; line-height: 0;" class=""> </td>
</tr>
<tr>
<td bgcolor="#0072bc" align="center" class=""><img alt="companyname logo" src="http://www2.companynameweb.com/l/50342/2017-04-10/8frt4b/50342/155397/companyname_logo_lockup_white.png" aria-hidden="true" border="0" height="54" style="border-spacing: 0; min-height: 54px;"></td>
</tr>
<tr>
<td height="33" bgcolor="#0072bc" style="font-size: 0; line-height: 0;" class=""> </td>
</tr>
</tbody>
</table>
<!-- Email Header : END -->
with:
<!-- Email Header : BEGIN -->
<table align="center" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" style="max-width: 600px;" width="100%">
<tbody>
<tr>
<td bgcolor="#0072bc" height="33" style="display: block; font-size: 0px; line-height: 0px;" valign="middle" class=""> </td>
</tr>
<tr>
<td align="center" bgcolor="#0072bc" class=""><img alt="companyname logo" aria-hidden="true" border="0" height="54" src="http://www2.companynameweb.com/l/50342/2017-04-10/8frt4b/50342/155397/companyname_logo_lockup_white.png" style="vertical-align: middle; border-spacing: 0; min-height: 54px;" valign="middle"></td>
</tr>
<tr>
<td bgcolor="#0072bc" height="33" style="font-size: 0px; line-height: 0px;" valign="middle" class=""> </td>
</tr>
</tbody>
</table>
<!-- Email Header : END -->
and it now works in all clients. Same with the footer. I replaced:
<!-- Email Footer : Begin -->
<table align="center" bgolor="#e1e1e1" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background-color:#e1e1e1; border-spacing: 0; max-width: 600px;" width="100%">
<tr>
<td height="39" style="border-spacing: 0; line-height: 0; max-height: 39px; min-height: 39px;" class=""> </td>
</tr>
<tr>
<td class="x-gmail-data-detectors" style="padding: 0px 10px 0px 10px; width: 100%; font-size: 8px; font-family: sans-serif; line-height: 11px; text-align: center; color: #2e2e2e;"><webversion style="color:#2e2e2e; text-decoration:underline; font-weight: bold;">View as a Web Page</webversion><br><br>
© Copyright 2017 <span style="font-weight: bolder;">companyname</span><br>
#companynameweb.com | 1-111-111-1111<br>
<span style="font-weight: bolder;">companyname</span> Headquarters | address<br><br>
Click here to unsubscribe</td>
</tr>
<tr>
<td height="39" style="border-spacing: 0; line-height: 0; max-height: 39px; min-height: 39px;" class=""> </td>
</tr>
</table>
<!-- Email Footer : END -->
with:
<!-- Email Footer : Begin -->
<table align="center" aria-hidden="true" cellpadding="0" cellspacing="0" role="presentation" style="max-width: 600px;" width="100%">
<tbody>
<tr>
<td bgcolor="#e1e1e1" height="39" style="display: block; font-size: 0px; line-height: 0px;" valign="middle" class=""> </td>
</tr>
<tr>
<td bgcolor="#e1e1e1" border="0" class="x-gmail-data-detectors" style="vertical-align: middle; border-spacing: 0; font-size: 8px; font-family: sans-serif; line-height: 11px; text-align: center; color: #2e2e2e;" valign="middle"><webversion style="color:#2e2e2e; text-decoration:underline; font-weight: bold;">View as a Web Page</webversion><br>
<br>
© Copyright 2017 <span style="font-weight: bolder;">eni</span><br>
#companynameweb.com 1-111-111-1111<br>
<span style="font-weight: bolder;">companyname</span> Headquarters | address<br>
<br>
Click here to unsubscribe</td>
</tr>
<tr>
<td bgcolor="#e1e1e1" height="39" style="display: block; font-size: 0px; line-height: 0px;" valign="middle" class=""> </td>
</tr>
</tbody>
</table>
<!-- Email Footer : END -->
and now it doesn't break anymore. td also needed bgcolor.
Adding this simple css style has worked for me :
<table style="border-spacing: 0 !important; border-collapse: collapse !important;"> </table>
Sometimes when I sent emails I receive answers stating that my email was empty. It seems very random and so far I have not been able to reconstruct this problem (have tested it on Gmail, Yahoo, AOL, Outlook, Mozilla Thunderbird, ... to no avail). It seems that only my email signature and/or sometimes also just the beginning of my email is displayed.
I've checked for font problems and problems within the html code of the mail, etc.
Where should I start?
Here's some sample code of the template I use that seems to create this error at random:
<!DOCTYPE html>
<html lang="en">
<head>
<title>
...
</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--[if !mso]>
<!-- -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--
<![endif]-->
<style>
html, body{
margin: 0;
padding: 0;
}
</style>
</head>
<body style="width: 100%; margin: 0;">
<table bgcolor="#0568a6" border="0" style="background-color:#0568a6;border-collapse:collapse;border:0;margin:0;padding:0;width:100%">
<tbody>
<tr>
<td style="width:100%;max-width:600px;margin:0 auto">
<div style="display:block;width:98%;max-width:588px;margin:0 auto;padding:3px 1%;background-color:#0568a6">
<table bgcolor="#0568A6" align="center" style="background-color:#0568a6;border-collapse: collapse;border:0;margin:0;padding:0;width:100%">
<!--[if mso]>
<table align="center" bgcolor="#0568A6" width="588" style="background-color:#0568a6;border-collapse:collapse;border:0;margin:0;padding:0;width:588px">
<![endif]-->
<tbody>
<tr>
<td style="display:block;width:100%;max-width:588px;margin:0 auto;padding:0;background-color:#0568a6">
<img src="logo.jpg" alt="Logo" width="125" height="26" border="0" align="right" style="float: right;border:0px !important" />
</td>
</tr>
</tbody>
<!--[if mso]>
</table>
<![endif]-->
</table>
</div>
</td>
</tr>
</tbody>
</table>
<table style="width: 100%; border-collapse: collapse;" align="center" border="0">
<tbody>
<tr>
<td style="display: block; max-width: 600px; margin: 0 auto; clear: both;">
<div style="display: block; width:98%; max-width: 588px; margin: 0 auto; padding:35px 1% 28px; color: #111111;">
<table style="border-collapse: collapse; width: 100%;">
<!--[if mso]>
<table align="center" width="588" style="border-collapse: collapse;">
<![endif]-->
<tbody>
<tr>
<td style="padding: 0px 0px 4px 0px; width: 100%; max-width: 588px;">
<p style="font-family:Verdana,Geneva,sans-serif; color: #222222; margin-bottom: 15px; font-weight: normal; font-size: 13pt; line-height: 1.25;">
Content
</p>
</td>
</tr>
<!--[if mso]>
</table>
<![endif]-->
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<table style="border-collapse: collapse; width: 100%;" align="center" bgcolor="#efefef" border="0">
<tbody>
<tr>
<td style="display: block; max-width: 600px; margin: 0 auto; clear: both;">
<div style="display: block; max-width: 588px;width:98%; margin: 0 auto; padding: 6px 1% 16px;">
<table style="border-collapse: collapse; width: 100%;" bgcolor="#efefef">
<!--[if mso]>
<table align="center" bgcolor="#efefef" width="588" style="border-collapse: collapse;">
<![endif]-->
<tbody>
<tr>
<td style="padding: 0px 0px 4px 0px; width: 100%; max-width: 588px;">
<p style="font-size: 8.5pt; color: #999999;font-family:Verdana,Geneva,sans-serif; line-height: 1.2; border: 0;">
Footer
<br>
<br>
<a target="_blank" href="%UNSUBSCRIBELINK%" style="font-size: 8.5pt; color: #278ac8 !important; line-height: 1.2; text-decoration: none; border: 0;font-family:Verdana,Geneva,sans-serif;">
<span style="color: #278ac8; text-decoration: none;">
CLICK TO UNSUBSCRIBE
</span>
</a>
</p>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
I found the answer to this problem. It seems to be a bug in (earlier) versions of IE (who guessed it...).
The key part of the problem is the 1% padding right and left in the DIV element that serves as a container.
<body style="width: 100%; margin: 0;">
<table bgcolor="#0568a6" border="0" style="background-color:#0568a6;border-collapse:collapse;border:0;margin:0;padding:0;width:100%">
<tbody>
<tr>
<td style="width:100%;max-width:600px;margin:0 auto">
// this DIV has right and left padding of 1% which causes a bug in IE
<div style="display:block;width:98%;max-width:588px;margin:0 auto;padding:3px 1%;background-color:#0568a6">
<table bgcolor="#0568A6" align="center" style="background-color:#0568a6;border-collapse: collapse;border:0;margin:0;padding:0;width:100%">
<!--[if mso]>
... and so on
The result was that in some mail clients (Gmail, AOL, Comcast, maybe some others) the container of the message was rendered with a HUGE width (approx. 100,000px, for no obvious reason of course) of which the padding took ca. 1000px on each side.
As the content was centered, it was simply out of view for the person opening the message (no normal person has such a wide screen)
I replaced the 1% padding with a 3px padding and that solved the problem.
Below is a screen shot to show the problem, rendered in IE8. The solution is to change the padding as described above.