I have just run into my first frustration with Outlook breaking my html emails.
I have a container table that is 640 px wide. In it is two 320px tables one align left, one align right. They site side by side in ALL email clients except Word Engined Outlook (2007 and up).
THIS is the important part. I have code to make the containing table become 320px wide when viewed on mobile phone. This forces the two tables to be one on top of the other. This works exactly as planned for mobiles.
But Outlook on a desktop renders the left aligned table, then below it it renders the right hand table below the left but still aligned to the right, creating a big gap beneath the left hand table and a big gap above the right hand table.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
img
{display:block;}
a
{text-decoration:none;}
a:hover
{text-decoration: underline !important;}
td.contentblock p {
color:#FFFFFF;
font-size:16px;
font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
margin-top:0;
margin-bottom:12px;
padding-top:0;
padding-bottom:0;
font-weight:normal;
}
td.contentblock p a {
color:#e45808;
text-decoration:none;
}
.heading {
font-size:24px;
font-weight:bold;
}
@media only screen and (max-device-width: 480px) {
table[class="table"], td[class="cell"] {
width: 320px !important;
}
td[class="footershow"] {
width: 320px !important;
}
table[class="hide"], img[class="hide"], td[class="hide"], br[class="hide"], div[class="hide"] {
display: none !important;
}
img[class="divider"] {
height: 1px !important;
}
img[id="header"] {
width: 320px !important;
height: 69px !important;
}
img[id="main"] {
width: 320px !important;
height: 45px !important;
}
img[id="footer"] {
width: 320px !important;
height: 43px !important;
}
p[class="reminder"] {
font-size: 11px !important;
}
span[class="secondary"] {
line-height: 20px !important;
margin-bottom: 15px !important;
font-size: 13px !important;
}
}
</style>
</head>
<body bgcolor="#e4e4e4" topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" style="-webkit-font-smoothing: antialiased;width:100% !important;background:#e4e4e4;-webkit-text-size-adjust:none;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#EEEEEE">
<tr>
<td bgcolor="#EEEEEE" width="100%">
<table width="640" cellpadding="0" cellspacing="0" border="0" align="center" class="table">
<tr>
<td width="640" class="cell" style="color:#FFF;">
<table class="table" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td bgcolor="#cc6600" class="contentblock cell" style="color:#FFFFFF;font-size:16px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<table width="320" bgcolor="#cc6600" cellpadding="0" cellspacing="0" border="0" align="left">
<tr>
<td>
<a href="#" target="_blank" title="#" style="text-decoration:none;color:#FFF;"><img src="http://www.example.com/image_01.png" alt="#" width="320" height="167" border="0" style="display:block;" /></a>
</td>
</tr>
</table>
<table width="320" bgcolor="#cc6600" cellpadding="0" cellspacing="0" border="0" align="right">
<tr>
<td>
<a href="#" target="_blank" title="#" style="text-decoration:none;color:#FFF;"><img src="http://www.example.com/image_02.png" alt="#" width="320" height="167" border="0" style="display:block;" /></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
If any one could help me find a way to still have my two side by side tables in Outlook, but still have them re-align to one under the other in mobile phones, I would be very appreciative.
The quick answer is to make the widths of the inner tables a few pixels smaller. As it stands, Outlook adds a few pixels in between them causing the 320 + (couple pixels) + 320 > 640.
A more accurate way though is to add mso-table-lspace and mso-table-rspace to reduce the gap. See this example.