I've been coding HTML Emails for a while. I'm well aware that using align="left" is a good way to float an image because float won't work.
A problem arises when you need to use it in an RSS based email as the feed pulls in the image and you have no way to add align="left" to the image. So my initial thought was to put the image into a table. I didn't want to use two columns because I want the text to wrap around the image. So I created a table within a table, and the text was not within a table.
In some instances it wraps, but in Outlook the text doesn't sit next to the image table, it starts at the bottom of it.
Here's my code.
<table border="0" width="600" cellpadding="0" cellspacing="0" class="container" style="width:600px;max-width:600px">
<tr>
<td class="container-padding content" align="left" style="padding-left:24px;padding-right:24px;padding-bottom:12px;background-color:#ffffff;font-family: Arial, sans-serif, 'Open Sans';"><table cellspacing="0" cellpadding="0" border="0" width="50%" align="left" style="padding-right:15px;">
<tr>
<td width="50%" style="width:50%"> *|RSSITEM:IMAGE|* </td>
</tr>
</table>
<div class="title" style="font-family: Arial, sans-serif, 'Open Sans';font-size:24px;font-weight:normal;color:#C33734">*|RSSITEM:TITLE|*</div>
<div class="author" style="padding-top:2px;padding-bottom:5px;font-size:18px;color:#5584C4"> *|RSSITEM:AUTHOR|* </div>
<div class="date" style="padding-top:2px;padding-bottom:5px;font-size:16px;color:#86BE3C;"> *|RSSITEM:DATE|* </div>
<br />
<div class="body-text" style="font-family: Arial, sans-serif, 'Open Sans';font-size:14px;line-height:20px;text-align:left;color:#333333;padding-bottom:8px;padding-top:8px;">*|RSSITEM:CONTENT|* </div></td>
</tr>
</table>
I think your approach works. When I run it through Email On Acid I get these results. Outlook appears to be working with the code below.
<table border="0" width="600" cellpadding="0" cellspacing="0" class="container" style="width:600px;max-width:600px">
<tr>
<td class="container-padding content" align="left" style="padding-left:24px;padding-right:24px;padding-bottom:12px;background-color:#ffffff;font-family: Arial, sans-serif, 'Open Sans';">
<table cellspacing="0" cellpadding="0" border="0" width="50%" align="left" style="padding-right:15px;">
<tr>
<td width="50%" style="width:50%"> <img src="http://www.engraversnetwork.com/files/placeholder.jpg" width="350" height="100" alt=""> </td>
</tr>
</table>
<div class="title" style="font-family: Arial, sans-serif, 'Open Sans';font-size:24px;font-weight:normal;color:#C33734">Lorem ipsum Duis dolor sit.</div>
<div class="author" style="padding-top:2px;padding-bottom:5px;font-size:18px;color:#5584C4"> Lorem ipsum Officia aliquip quis. </div>
<div class="date" style="padding-top:2px;padding-bottom:5px;font-size:16px;color:#86BE3C;"> 5/31/2015 </div>
<br />
<div class="body-text" style="font-family: Arial, sans-serif, 'Open Sans';font-size:14px;line-height:20px;text-align:left;color:#333333;padding-bottom:8px;padding-top:8px;">Lorem ipsum Ex incididunt cillum enim sed enim consectetur culpa incididunt enim ut ut tempor mollit adipisicing irure anim in occaecat aute officia magna dolor do tempor occaecat et aliqua. </div></td>
</tr>
</table>
Related
I've been trying to get my custom email template in mailchimp to work with their building blocks.
Been doing what the documentation is saying but i can't seem to get it to work.
I used mc:repeatable="content" & mc:variant="random name"
The only thing i can do is add a block or remove one. I can't move them do another place of choose witch block i would to add.
How would i do this, so i can choose witch block i want to add where?
This is the code i've been using. Some help would be welcome, trying to wrap my head around this one for a while now.
<!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="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;">
<meta http-equiv="x-ua-compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
<title>Mailchimp test</title>
<!--[if gte mso 9]>
<style>
/* Target Outlook 2007 and 2010 */
</style>
<![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%;
}
p{
margin:0;
padding:0;
font-size:0;
line-height:0;
}
table td{
border-collapse:collapse;
}
table{
border-collapse:collapse;
mso-table-lspace:0;
mso-table-rspace:0;
}
img{
display:block;
outline:none;
text-decoration:none;
-ms-interpolation-mode:bicubic;
}
a img{
border:none;
}
a{
text-decoration:none;
color:inherit;
}
a.phone{
text-decoration:none;
color:#000001 !important;
pointer-events:auto;
cursor:default;
}
span{
font-size:13px;
line-height:17px;
font-family:monospace;
color:#000001;
}
.show-mobile{
display:none !important;
}
.btn-gold a,.black-anchor a{
color:#000000 !important;
}
.btn-black a,.white-anchor a{
color:#ffffff !important;
}
img{
max-width:100%;
height:auto;
}
#media screen and (max-width: 583px){
.mobile-logo{
width:130px !important;
height:35px !important;
}
} #media screen and (max-width: 583px){
.mobile-sign{
width:39px !important;
height:40px !important;
}
} #media screen and (max-width: 583px){
.mobile-container-full{
width:92% !important;
}
} #media screen and (max-width: 583px){
.mobile-width-full{
width:100% !important;
}
} #media screen and (max-width: 583px){
.mobile-block-intro-text-padding{
height:30px !important;
}
} #media screen and (max-width: 583px){
.mobile-row{
width:100% !important;
display:block !important;
}
} #media screen and (max-width: 583px){
.show-mobile{
display:block !important;
}
} #media screen and (max-width: 583px){
.mobile-background-hide-mobile{
background:none !important;
}
} #media screen and (max-width: 583px){
.mobile-full-img img{
width:100% !important;
height:auto !important;
max-width:100% !important;
}
}</style></head>
<body style="width:100%; margin:0; padding:0; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;">
<!--*|IF:MC_PREVIEW_TEXT|*-->
<!--[if !gte mso 9]><!--><span class="mcnPreviewText" style="display:none; font-size:0px; line-height:0px; max-height:0px; max-width:0px; opacity:0; overflow:hidden; visibility:hidden; mso-hide:all;">*|MC_PREVIEW_TEXT|*</span>
<!--<![endif]-->
<!--*|END:IF|*-->
<!-- page wrapper -->
<table cellpadding="0" cellspacing="0" border="0" style="margin:0;padding:0;width:100%;line-height:100% !important;">
<tr>
<td valign="top">
<!-- content wrapper -->
<table cellpadding="0" cellspacing="0" border="0" align="center" width="584" class="mobile-container-full">
<!-- Building blocks -->
<tr>
<td valign="top" align="left">
<table cellpadding="0" cellspacing="0" border="0" align="center" width="100%">
<!-- block intro text -->
<tr mc:repeatable="content" mc:variant="intro text - white background">
<td valign="top" align="left" bgcolor="#ffffff">
<table cellpadding="0" cellspacing="0" border="0" align="center" width="100%" class="mobile-width-full">
<tr>
<td valign="top" align="left" height="45" class="mobile-block-intro-text-padding" style="height:45px;font-size:1px;line-height:1px;"></td>
</tr>
<tr>
<td valign="top" align="left">
<table cellpadding="0" cellspacing="0" border="0" align="center" width="100%">
<tr>
<td align="left" valign="top" width="30" style="width:30px;font-size:1px;line-height:1px;"></td>
<td align="left" valign="top">
<table cellpadding="0" cellspacing="0" border="0" align="center" width="100%">
<tr>
<td valign="top" align="center">
<span style="font-family:Arial, sans-serif;font-size:16px;line-height:20px;color:#C89619;text-transform:uppercase;" mc:edit="intro_text_title">Lorep Ipsum 1</span>
</td>
</tr>
<tr>
<td valign="top" align="center" height="16" style="height:16px;font-size:1px;line-height:1px;"></td>
</tr>
<tr>
<td valign="top" align="center">
<span style="font-family:Arial, sans-serif;font-size:12px;line-height:20px;color:#000000;" mc:edit="intro_text_text">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 exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
</td>
</tr>
<tr>
<td valign="top" align="left" height="20" style="height:20px;font-size:1px;line-height:1px;"></td>
</tr>
<tr>
<td align="left">
<!-- button -->
<table cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#C89619" class="mobile-width-full btn-gold">
<tr>
<td align="left" valign="top" width="15" style="width:15px;font-size:1px;line-height:1px;"></td>
<td align="left" valign="top">
<table cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td valign="top" align="left" height="12" style="height:12px;font-size:1px;line-height:1px;"></td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td valign="middle" align="center">
<strong class="black-anchor" style="font-family:Arial, sans-serif;font-size:12px;color:#000000 !important;font-weight:bold;text-decoration:none;" mc:edit="intro_text_link">
Read more
</strong>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" align="left" height="12" style="height:12px;font-size:1px;line-height:1px;"></td>
</tr>
</table>
</td>
<td align="left" valign="top" width="15" style="width:15px;font-size:1px;line-height:1px;"></td>
</tr>
</table>
<!-- end button -->
</td>
</tr>
</table>
</td>
<td align="left" valign="top" width="30" style="width:30px;font-size:1px;line-height:1px;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" align="left" height="45" class="mobile-block-intro-text-padding" style="height:45px;font-size:1px;line-height:1px;"></td>
</tr>
</table>
</td>
</tr>
<!-- end block intro text -->
<!-- block intro text -->
<tr mc:repeatable="content" mc:variant="intro text - black background">
<td valign="top" align="left" bgcolor="#000000">
<table cellpadding="0" cellspacing="0" border="0" align="center" width="100%" class="mobile-width-full">
<tr>
<td valign="top" align="left" height="45" class="mobile-block-intro-text-padding" style="height:45px;font-size:1px;line-height:1px;"></td>
</tr>
<tr>
<td valign="top" align="left">
<table cellpadding="0" cellspacing="0" border="0" align="center" width="100%">
<tr>
<td align="left" valign="top" width="30" style="width:30px;font-size:1px;line-height:1px;"></td>
<td align="left" valign="top">
<table cellpadding="0" cellspacing="0" border="0" align="center" width="100%">
<tr>
<td valign="top" align="center">
<span style="font-family:Arial, sans-serif;font-size:16px;line-height:20px;color:#C89619;text-transform:uppercase;" mc:edit="intro_text_black_title">Lorem Ipsum 2</span>
</td>
</tr>
<tr>
<td valign="top" align="center" height="16" style="height:16px;font-size:1px;line-height:1px;"></td>
</tr>
<tr>
<td valign="top" align="center">
<span style="font-family:Arial, sans-serif;font-size:12px;line-height:20px;color:#ffffff;" mc:edit="intro_text_black_content">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 exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
</td>
</tr>
<tr>
<td valign="top" align="left" height="20" style="height:20px;font-size:1px;line-height:1px;"></td>
</tr>
<tr>
<td align="left">
<!-- button -->
<table cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#C89619" class="mobile-width-full btn-gold">
<tr>
<td align="left" valign="top" width="15" style="width:15px;font-size:1px;line-height:1px;"></td>
<td align="left" valign="top">
<table cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td valign="top" align="left" height="12" style="height:12px;font-size:1px;line-height:1px;"></td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td align="center">
<strong class="black-anchor" style="font-family:Arial, sans-serif;font-size:12px;color:#000000 !important;font-weight:bold;text-decoration:none;" mc:edit="intro_text_black_link">Read more</strong>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" align="left" height="12" style="height:12px;font-size:1px;line-height:1px;"></td>
</tr>
</table>
</td>
<td align="left" valign="top" width="15" style="width:15px;font-size:1px;line-height:1px;"></td>
</tr>
</table>
<!-- end button -->
</td>
</tr>
</table>
</td>
<td align="left" valign="top" width="30" style="width:30px;font-size:1px;line-height:1px;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" align="left" height="45" class="mobile-block-intro-text-padding" style="height:45px;font-size:1px;line-height:1px;"></td>
</tr>
</table>
</td>
</tr>
<!-- end block intro text -->
</table>
</td>
</tr>
<!-- / Building blocks -->
</table>
<!-- / content wrapper -->
</td>
</tr>
</table>
<!-- / page wrapper -->
</body>
</html>
Mailchimp documentation says that "Custom-coded email templates do not include drag-and-drop content blocks. Use Mailchimp’s template language to add editable regions to your custom-coded emails." (https://mailchimp.com/help/about-content-blocks/)
Therefore your experience seems as expected: "The only thing i can do is add a block or remove one. I can't move them to another place..."
The template language indicates that mc:repeatable and mc:variant can be used together to switch on and off a 'variant' - like you have done and experience already. (https://templates.mailchimp.com/getting-started/template-language/)
In summary, your expectations are incorrect, that you can move blocks around as you wish. That behaviour only works with MailChimp's templates.
You absolutely can create repeatable content blocks that can be repositioned in a custom template. From Mailchimp's documentation...
If you code your own email template, you can use Mailchimp’s Template Language to add repeatable and variable content blocks to your layout. These blocks help you to create a customized design that can be modified in the Campaign Builder. Even if someone else built your template, you’ll still be able to repeat, delete, reposition, and edit the content blocks.'
The position arrow appears over the left edge of each layout variant so you can drag and drop them into position vertically. You cannot position elements within a layout variant.
Check out the screenshot for visual reference.
One wonky thing that does happen and is likely the case with your example, is blocks are only positionable when more than three blocks are added.
https://mailchimp.com/help/repeatable-or-variable-content-blocks/
I would like to ask if a message can be made by a Outlook, so I put a picture as a background and write the content of the message above it, knowing it must be compatible with Gmail and Outlook.
This is a pretty bullet-proof solution:
<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="600" style="margin: 0 auto;" class="email-container">
<tr>
<td valign="middle" style="text-align: center; background-image: url('https://via.placeholder.com/600x230/222222/666666'); background-color: #222222; background-position: center center !important; background-size: cover !important;">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:175px; background-position: center center !important;">
<v:fill type="tile" src="https://via.placeholder.com/600x230/222222/666666" color="#222222" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="middle" style="text-align: center; padding: 40px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #ffffff;">
<p style="margin: 0;">Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut erat.</p>
</td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
Bulletproof Background Images: https://backgrounds.cm
Email template: https://tedgoas.github.io/Cerberus/
Small 1px gap appears below table containing content on the left. This only appears in Outlook 2016 (Windows).
Had tried adding border-collapse:collapse, margin:0 and padding:0 but to no avail. Anyone else experienced this or dealt with it?
<table cellspacing="0" cellpadding="0" border="0" width="600">
<tr>
<td align="center" valign="top">
<table cellspacing="0" cellpadding="0" border="0" width="100%" class="" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color:#FFFFFF;">
<tr>
<td style="padding:0px 20px;">
<table cellspacing="0" cellpadding="0" border="0" width="100%" class="" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color:#3498db; border-radius:10px;">
<tr>
<!-- info -->
<th style="font-weight:normal; text-align:left;">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="45"></td>
<td><table cellspacing="0" cellpadding="0" border="0" align="right">
<tr>
<td style="color:#FAFAFA; font-family: Arial; font-size:12px; line-height:14px;">Android</td>
</tr>
<tr>
<td width="" height="5" bgcolor="" style="mso-line-height-rule: exactly; line-height: 5px;"><!--[if gte mso 15]> <![endif]--></td>
</tr>
<tr>
<td style="color:#FAFAFA; font-family: Arial; font-size:16px; line-height:18px; font-weight:bold;">Lorem ipsum dolor sit.</td>
</tr>
<tr>
<td width="" height="10" bgcolor="" style="mso-line-height-rule: exactly; line-height: 10px;"><!--[if gte mso 15]> <![endif]--></td>
</tr>
<tr>
<td style="color:#FAFAFA; font-family: Arial; font-size:14px; line-height:16px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, temporibus, quis voluptatum iure recusandae amet.</td>
</tr>
</table></td>
</tr>
</table>
</th>
<!-- image -->
<th style="font-weight:normal;"><table cellspacing="0" cellpadding="0" border="0" width="245">
<tr>
<td style="padding:15px 45px 15px 0px;" align="left"><img src="http://placehold.it/200x200?text=" alt="" width="200" border="0" style="display:block;" class=""></td>
</tr>
</table></th>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
It actually wasn't a table issue, it was your TH. This is a known bug for outlook 2016. (https://mosaico.io/email-client-tricks/outlook-2016-weird-1px-horizontal-lines/)
To solve it, any TH or TD that is causing this just needs to have 'overflow:hidden' in the inline style and it should make this line disappear.
<table cellspacing="0" cellpadding="0" border="0" width="600">
<tr>
<td align="center" valign="top">
<table cellspacing="0" cellpadding="0" border="0" width="100%" class="" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color:#FFFFFF;">
<tr>
<td style="padding:0px 20px;">
<table align="left" cellspacing="0" cellpadding="0" border="0" width="100%" class="" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color:#3498db; border-radius:10px;">
<tr>
<!-- info -->
<th style="font-weight:normal; text-align:left; overflow:hidden;">
<table align="left" cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="45"></td>
<td><table cellspacing="0" cellpadding="0" border="0" align="right">
<tr>
<td style="color:#FAFAFA; font-family: Arial; font-size:12px; line-height:14px;">Android</td>
</tr>
<tr>
<td width="" height="5" bgcolor="" style="mso-line-height-rule: exactly; line-height: 5px;"><!--[if gte mso 15]> <![endif]--></td>
</tr>
<tr>
<td style="color:#FAFAFA; font-family: Arial; font-size:16px; line-height:18px; font-weight:bold;">Lorem ipsum dolor sit.</td>
</tr>
<tr>
<td width="" height="10" bgcolor="" style="mso-line-height-rule: exactly; line-height: 10px;"><!--[if gte mso 15]> <![endif]--></td>
</tr>
<tr>
<td style="color:#FAFAFA; font-family: Arial; font-size:14px; line-height:16px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, temporibus, quis voluptatum iure recusandae amet.</td>
</tr>
</table></td>
</tr>
</table>
</th>
<!-- image -->
<th style="font-weight:normal;"><table cellspacing="0" cellpadding="0" border="0" width="245">
<tr>
<td style="padding:15px 45px 15px 0px;" align="left"><img src="http://placehold.it/200x200?text=" alt="" width="200" border="0" style="display:block;" class=""></td>
</tr>
</table></th>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
Per Campaign Monitor, Outlook (versions 2007-16) does not support the Overflow property.
Source: https://www.campaignmonitor.com/css/positioning-display/overflow/
I am trying to make an email campaign display correctly in all email clients. I have tried so many fixes and ways to get my email to display write. I got it to work reasonably well on most email clients and I have tested it on Emails on acid and Campaign monitor but they don't tell we what is wrong with my code they just show me a picture which is not very Helpful.
I believe one of the main issues is that the email expands to full width in outlook 2007 and up for some reason and I cant use Max-Width attribute so I need some help.
I wondered if anyone could help out and see anything in my code that is noticeably wrong and needs to be fixed.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Go City - Email</title>
<style type="text/css">
.ReadMsgBody {width: 100%;}
.ExternalClass {width: 100%;}
table {border-collapse: collapse;}
a:hover {text-decoration: none !important;}
a {color: #fff !important;text-decoration: none !important;}
p {font-size: 14px;line-height: 24px;font-family: arial, 'veranda', san-serif !important;color: #333333 !important;margin: 0px;}
span.yshortcuts {color: #000;background-color: none;border: none;}
span.yshortcuts:hover, span.yshortcuts:active, span.yshortcuts:focus {color: #000;background-color: none;border: none;}
img {border: none !important;display:block;}
.book {background: white;}
.body {max-width: 300px;}
</style>
</head>
<body marginheight="0" topmargin="0" marginwidth="0" style="background-repeat:no-repeat;position:static;height:100%;width:100%;background-image:url('background-new.jpg');background-color:#000000;margin-top:0px;max-width: 630px !important;margin: auto;" bgcolor="#000000" leftmargin="0">
<!-- Outlook Bacground Image -->
<div style="background-color:#000000; max-width:630px !important;">
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" src="url('background-new.jpg')" color="#000000"/>
</v:background>
<![endif]-->
<table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top" align="left" background="#fff"><!-- Outlook Bacground Image End -->
<!--100% body table-->
<table cellspacing="0" align="center" border="0" cellpadding="15" width="600" bgcolor="#000000" style="margin:auto;" >
<tr>
<td align="center"><!--top links-->
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="margin-bottom:20px;">
<tr height="100">
<td valign="middle" align="left" width="40%"><a href="https://gocityhotels.com/" style="text-decoration:none !important;color:#fff !important;" ><img src="go-city-hotels-logo.jpg" style="display:block;" vspace="0" hspace="0" alt="Go City Hotels Logo" /></a></td>
<td valign="middle" align="right" width="60%" style="text-align:center;"><p style="margin:0px;color:#ffffff !important;font-family:arial, 'veranda', san-serif;line-height:24px;font-size:14px;" >
For Better Viewing Results <webversion style="text-decoration:none;color:#10aeea !important;">Please View Online</webversion><br />
<forwardtoafriend style="text-decoration:none;color:#ffffff;" href="#">Forward</forwardtoafriend>
|
<unsubscribe style="text-decoration:none;color:#ffffff;" href="#">Unsubscribe</unsubscribe>
</p></td>
</tr>
</table>
<!--email container-->
<table bgcolor="#000000" cellspacing="0" border="0" align="center" cellpadding="30" width="600">
<tr>
<td style="padding:0px;"><!--email content-->
<table cellspacing="0" border="0" id="email-content" cellpadding="0" width="100%">
<tr>
<td><repeater>
<!--section 1-->
<layout label="Full Width Image">
<table cellspacing="0" border="0" cellpadding="0" width="100%">
<tr>
<td valign="top" align="center"><img editable src="" style="margin-top:10px !important;margin-bottom:10px !important;" vspace="0" hspace="0" alt="Image 3" width="100%" label="Full Width Image" /></td>
</tr>
</table>
</layout>
<!--/section 1-->
<!--section 2-->
<layout label="Colour Title">
<table cellspacing="0" border="0" cellpadding="0" width="100%">
<tr>
<td valign="top" align="center"><h1 style="font-weight:bold;mso-line-height-rule:exactly;line-height:40px;margin-bottom:10px;margin-top:0px;font-family:arial, 'veranda', san-serif;color:#ffffff;font-size:25px;background-color:#10aeea;">
<singleline label="Title">Lorem ipsum</singleline>
</h1></td>
</tr>
</table>
</layout>
<!--/section 2--><!--section 3-->
<layout label="Body Text">
<table cellspacing="0" border="0" cellpadding="0" width="100%">
<tr>
<td valign="top" align="center"><p style="margin:0px;color:#ffffff !important;font-family:arial, 'veranda', san-serif !important;mso-line-height-rule:exactly;line-height:22px;font-size:16px;" >
<multiline label="Main Body Text">Consectetur adipiscing elit. a ipsum a risus volutpat placerat in nec mauris. Fusce sit amet enim erat, in sagittis arcu. semper id tempor et, varius pulvinar tellus. Maurtis commodo urna at dui bibendum quis euismod velit egestas. Vestibulum ante ipsum primis in faucibus orci luctus et.</multiline>
</p></td>
</tr>
</table>
</layout>
<!--/section 3-->
<!--section 2--><layout label="3 Hotel Booking">
<table cellspacing="0" border="0" cellpadding="0" width="100%">
<tr>
<td>
<table cellspacing="0" border="0" cellpadding="8" width="100%" style="margin-top: 10px;">
<tr>
<td bgcolor="#ffffff" valign="top" style="border-radius: 5px;width: 30%;max-width: 30%;"><p style="margin:0px;font-size:14px;text-align:center;" ><img editable src="" style="margin-top:10px !important;margin-bottom:10px !important;" vspace="0" hspace="0" alt="Image 3" width="100%" label="Image Left" /></p>
<p style="color:#333333 !important; font-family:arial, 'veranda', san-serif; text-align:left;" >
<multiline style="color:#333333 !important;" label="Main Body Text">Consectetur adipiscing elit. Phasellus a ipsum a risus volutpat placerat in nec mauris. Fusce sit</multiline></p>
<p style="margin:0px;line-height:24px;font-size:14px;font-family:arial, 'veranda', san-serif;margin-top:20px;padding:5px;text-align:center;border-radius:5px;border:1px solid #0d8cbc;background-color:#10aeea;color:#ffffff !important;text-decoration:none !important;" >
<singleline style="color:#ffffff !important;" label="Book Now" >Book Now</singleline>
</p>
</td>
<!-- Table Padding --><td valign="top" background="#000000"></td><!-- Table Padding END -->
<td bgcolor="#ffffff" valign="top" style="border-radius: 5px;width: 30%;max-width: 30%;"><p style="margin:0px;font-size:14px;text-align:center;" ><img editable src="" style="margin-top:10px !important;margin-bottom:10px !important;" vspace="0" hspace="0" alt="Image 3" width="100%" label="Image Left" /></p>
<p style="color:#333333 !important; font-family:arial, 'veranda', san-serif; text-align:left;" >
<multiline style="color:#333333 !important;" label="Main Body Text">Consectetur adipiscing elit. Phasellus a ipsum a risus volutpat placerat in nec mauris. Fusce sit</multiline></p>
<p style="margin:0px;line-height:24px;font-size:14px;font-family:arial, 'veranda', san-serif;margin-top:20px;padding:5px;text-align:center;border-radius:5px;border:1px solid #0d8cbc;background-color:#10aeea;color:#ffffff !important;text-decoration:none !important;" >
<singleline style="color:#ffffff !important;" label="Book Now" >Book Now</singleline>
</p>
</td>
<!-- Table Padding --><td valign="top" background="#000000"></td><!-- Table Padding END -->
<td bgcolor="#ffffff" valign="top" style="border-radius: 5px;width: 30%;max-width: 30%;"><p style="margin:0px;font-size:14px;text-align:center;" ><img editable src="" style="margin-top:10px !important;margin-bottom:10px !important;" vspace="0" hspace="0" alt="Image 3" width="100%" label="Image Left" /></p>
<p style="color:#333333 !important; font-family:arial, 'veranda', san-serif; text-align:left;" >
<multiline style="color:#333333 !important;" label="Main Body Text">Consectetur adipiscing elit. Phasellus a ipsum a risus volutpat placerat in nec mauris. Fusce sit</multiline></p>
<p style="margin:0px;line-height:24px;font-size:14px;font-family:arial, 'veranda', san-serif;margin-top:20px;padding:5px;text-align:center;border-radius:5px;border:1px solid #0d8cbc;background-color:#10aeea;color:#ffffff !important;text-decoration:none !important;" >
<singleline style="color:#ffffff !important;" label="Book Now" >Book Now</singleline>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table></layout><!--/section 2-->
<!--section 1-->
<layout label="Plain Title">
<table cellspacing="0" border="0" cellpadding="0" width="100%">
<tr>
<td valign="top" align="left"><h1 style="font-weight:bold;mso-line-height-rule:exactly;line-height:2;margin-bottom:10px;margin-top:0px;font-family:arial, 'veranda', san-serif;color:#ffffff;font-size:25px;">
<singleline label="Title">Lorem ipsum</singleline>
</h1></td>
</tr>
</table>
</layout>
<!--/section 1--><!--section 5-->
<layout label="Image Right">
<table cellspacing="0" border="0" cellpadding="0" width="100%" style="margin:10px 0px;">
<tr>
<td><table cellspacing="0" border="0" cellpadding="0" width="100%">
<tr>
<td valign="top" width="50%"><p style="text-align:right;margin:0px;color:#ffffff !important;mso-line-height-rule:exactly;line-height:22px;font-size:16px;font-family:arial, 'veranda', san-serif;" >
<multiline label="Main Body Text">Consectetur adipiscing elit. Phasellus a ipsum a risus volutpat placerat in nec mauris. Fusce sit amet enim erat, in sagittis arcu. Aliquam dolor dolor, semper id tempor et, varius pulvinar tellus. Maurtis commodo urna at dui bibendum quis euismod velit egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere</multiline>
</p></td>
<td valign="top" width="50%" style="padding-left:10px;"><img editable src="" vspace="0" hspace="0" style="display:block;" alt="Image 4" width="100%" label="Image Right" /></td>
</tr>
</table></td>
</tr>
</table>
</layout>
<!--/section 5--><!--section 3-->
<layout label="Image Left">
<table cellspacing="0" border="0" cellpadding="0" width="100%" style="margin:10px 0px;">
<tr>
<td><table cellspacing="0" border="0" cellpadding="0" width="100%">
<tr>
<td valign="top" width="50%" style="padding-right:10px;"><img editable src="" vspace="0" hspace="0" style="display:block;" alt="Image 5" width="100%" label="Image Left" /></td>
<td valign="top" width="50%"><p style="text-align:left;margin:0px;color:#ffffff !important;mso-line-height-rule:exactly;line-height:22px;font-size:16px;font-family:arial, 'veranda', san-serif;" >
<multiline label="Main Body Text">Consectetur adipiscing elit. Phasellus a ipsum a risus volutpat placerat in nec mauris. Fusce sit amet enim erat, in sagittis arcu. Aliquam dolor dolor, semper id tempor et, varius pulvinar tellus. Maurtis commodo urna at dui bibendum quis euismod velit egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere</multiline>
</p></td>
</tr>
</table></td>
</tr>
</table>
</layout>
<!--/section 3--></repeater></td>
</tr>
</table>
<!--/email content--></td>
</tr>
</table>
<!--/email container--><!--footer-->
<table width="600" border="0" align="center" cellpadding="30" cellspacing="0">
<tr>
<tr style="margin-top:20px;">
<hr style="margin-top:30px;border:1px solid #353535 !important;" />
</tr>
<td valign="top"><p style="margin:0px;color:#353535 !important;font-family:arial, 'veranda', san-serif;line-height:24px;font-size:14px;" > You’re receiving this newsletter because you’ve subscribed to our newsletter<br />
Not interested anymore?<br />
<unsubscribe style="text-decoration:none;color:#10aeea !important;" href="#" >Unsubscribe instantly.</unsubscribe>
</p></td>
<td valign="top" ><a style="text-decoration:none !important;color:#fff !important;margin:5px;position:relative;float:right;display:block;height:43px;width:42px;" href="https://www.facebook.com/pages/gocityhotelscom/343073452495484"> <img style="display:block;" alt="Facebook Image" vspace="0" hspace="0" src="facebook-mini-icon.jpg" /></a> <a style="text-decoration:none !important;color:#fff !important;margin:5px;position:relative;float:right;display:block;height:42px;width:42px;" href="https://twitter.com/gocityhotels"> <img style="display:block;" vspace="0" hspace="0" alt="Twitter Image" src="twitter-mini-icon.jpg" /></a></td>
</tr>
</table>
<!--/footer--></td>
</tr>
</table>
<!--/100% body table--></td>
</tr>
</table>
</div>
<style type="text/css">
.ReadMsgBody {width: 100%;}
.ExternalClass {width: 100%;}
a:hover {text-decoration: none !important;}
a { color:#fff !important; text-decoration: none !important;}
p {font-size: 14px; line-height: 24px; font-family: arial, 'veranda', san-serif !important; color: #ffffff !important; margin: 0px;}
span.yshortcuts { color:#000; background-color:none; border:none;}
span.yshortcuts:hover,
span.yshortcuts:active,
span.yshortcuts:focus {color:#000; background-color:none; border:none;}
</style>
</body>
</html>
Also Can anyone recommend any service that would let you inspect the code or something like that to actually get to the root problem rather that just making random fixes.
Outlook 2007 is the same as '10 and '13, so I'm betting you are having the same issues in all three.
Take a look at this link - there are a few examples of fluid templates with max width applied and working in all major email clients.
Just rip out the body and wrapper tables and you should be good to go.
Almost at breaking point with this. Coding this in dreamweaver and when I view it in the live mode comes up fine but when in live mode, but when I send it through the email clients such as outlook and gmail, it has one images out of line and i can't see why. New to this so sorry if code is a bit messy.
</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
<center>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="backgroundTable">
<tr>
<td align="center" valign="top">
<!-- // Begin Template Preheader \\ -->
<table border="0" cellpadding="10" cellspacing="0" width="600" id="templatePreheader">
<tr>
<td valign="top" class="preheaderContent">
<!-- // Begin Module: Standard Preheader \ -->
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<td valign="top">
<div mc:edit="std_preheader_content">
</div>
</td>
<!-- *|IFNOT:ARCHIVE_PAGE|* -->
<td valign="top" width="190">
<div mc:edit="std_preheader_links">
Is this email not displaying correctly?<br />View it in your browser.
</div>
</td>
<!-- *|END:IF|* -->
</tr>
</table>
<!-- // End Module: Standard Preheader \ -->
</td>
</tr>
</table>
<!-- // End Template Preheader \\ -->
<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateContainer">
<tr>
<td align="center" valign="top">
<!-- // Begin Template Header \\ -->
<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateHeader">
<tr>
<td style="padding-top:25px">
</td>
</tr>
<tr>
<td class="headerContent">
<!-- // Begin Module: Standard Header Image \\ -->
<img src="http://www.spaceform.com/SF/media/site/Newsletters/Email%20Test%20Images/logo1.png" style="max-width:600px; font-family:Tahoma; font-size:32px; color:#000000" alt="Spaceform London" id="headerImage campaign-icon" mc:label="header_image" mc:edit="header_image" mc:allowdesigner mc:allowtext/>
<!-- // End Module: Standard Header Image \\ -->
</td>
</tr>
<tr>
<td style="padding-top:10px">
</td>
</tr>
<tr>
<td align="center" style="font-family:Tahoma; font-size:14px; padding-top:15px; padding-bottom:15px">
Home | Shop | Bestselling Gifts | Personalised Gifts | About Spaceform | Contact us</td>
</tr>
</table>
<!-- // End Template Header \\ -->
</td>
</tr>
<tr>
<td align="center" valign="top">
<!-- // Begin Template Body \\ -->
<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateBody">
<tr>
<td valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td valign="top" class="bodyContent">
<!-- // Begin Module: Standard Content \\ -->
<table border="0" bordercolor="#FFFFFF" style="background-color:#FFFFFF" width="600" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="18" width="24" height="1474"><img src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_02.jpg" border="0" style="display:block;" width="24" height="1474" /></td>
<td colspan="2" width="552" height="43"><img src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_03.jpg" border="0" style="display:block;" width="552" height="43" /></td>
<td rowspan="18" width="24" height="1474"><img src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_04.jpg" border="0" style="display:block;" width="24" height="1474" /></td>
</tr>
<tr>
<td background="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_05.jpg" style="display:block;" bgcolor="#ffffff" width="279" height="122" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:279px;height:122px;">
<v:fill type="tile" src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_05.jpg" color="#ffffff" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
Lorem ipsum dolor sit amet,</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
<td width="273" height="350" rowspan="3"><img src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_06.jpg" border="0" style="display:block;" width="273" height="350" /></td>
</tr>
<tr>
<td width="279" height="45"><img src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_07.jpg" border="0" style="display:block;" width="279" height="45" /></td>
</tr>
<tr>
<td width="279" height="183"><img src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_08.jpg" border="0" style="display:block;" width="279" height="183" /></td>
</tr>
<tr>
<td colspan="2" width="552" height="41"><img src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_09.jpg" border="0" style="display:block;" width="552" height="41" /></td>
</tr>
<tr>
<td rowspan="3" width="279" height="233"><img src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_10.jpg" border="0" style="display:block;" width="279" height="233" /></td>
<td background="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_11.jpg" style="display:block;" bgcolor="#ffffff" width="273" height="93" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:273px;height:93px;">
<v:fill type="tile" src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_11.jpg" color="#ffffff" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
Lorem ipsum dolor sit amet,</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
<tr>
<td width="273" height="37"><img src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_12.jpg" border="0" style="display:block;" width="273" height="37" /></td>
</tr>
<tr>
<td width="273" height="103"><img src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_13.jpg" border="0" style="display:block;" width="273" height="103" /></td>
</tr>
<tr>
<td colspan="2" width="552" height="47"><img src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_14.jpg" border="0" style="display:block;" width="552" height="47" /></td>
</tr>
<tr>
<td rowspan="3" width="279" height="317"><img src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_15.jpg" border="0" style="display:block;" width="279" height="317" /></td>
<td background="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_16.jpg" style="display:block;" bgcolor="#ffffff" width="273" height="95" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:273px; height:95px">
<v:fill type="tile" src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_16.jpg" color="#ffffff" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div>
Lorem ipsum dolor sit amet,</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
<tr>
<td width="273" height="35"><img src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_17.jpg" border="0" style="display:block;" width="273" height="35" /></td>
</tr>
<tr>
<td width="273" height="187"><img src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_18.jpg" border="0" style="display:block;" width="273" height="187" /></td>
</tr>
<tr>
<td colspan="2" width="552" height="41"><img src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_19.jpg" border="0" style="display:block;" width="552" height="41" /></td>
</tr>
<tr>
<td background="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_20.jpg" style="display:block;" bgcolor="#ffffff" width="279" height="96" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:279px;height:96px;">
<v:fill type="tile" src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_20.jpg" color="#ffffff" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
Lorem ipsum dolor sit amet, </div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
<td rowspan="3" width="273" height="293"><img src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_21.jpg" border="0" style="display:block;" width="273" height="293" /></td>
</tr>
<tr>
<td width="279" height="38"><img src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_22.jpg" border="0" style="display:block;" width="279" height="38" /></td>
</tr>
<tr>
<td width="279" height="159"><img src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_23.jpg" border="0" style="display:block;" width="279" height="159" /></td>
</tr>
<tr>
<td colspan="2" width="552" height="40"><img src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_24.jpg" border="0" style="display:block;" width="552" height="40" /></td>
</tr>
<tr>
<td colspan="2" width="279" height="69"><img src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_25.jpg" border="0" style="display:block;" width="552" height="85">
</td>
</tr>
<td colspan="4" width="600" height="45"><img src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_26.jpg" border="0" style="display:block;" width="600" height="45" /></td>
</tr>
<tr>
<td colspan="4" width="600" height="324"><img src="http://www.spaceform.com/SF/media/email/trade/giftideas/cell_27.jpg" border="0" style="display:block;" width="600" height="324" /></td>
</tr>
</table>
<!-- // End Module: Standard Content \\ -->
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- // End Template Body \\ -->
</td>
</tr>
<tr>
<td align="center" valign="top">
<!-- // Begin Template Footer \\ -->
<table border="0" cellpadding="10" cellspacing="0" width="600" id="templateFooter">
<tr>
<td valign="top" class="footerContent">
<!-- // Begin Module: Standard Footer \\ -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td colspan="2" valign="middle" id="social" style="padding-bottom:20px">
<div mc:edit="std_social" style="font-size: 14px; font-style:normal">
We love being social,
why not come and say hi... <img src="http://www.spaceform.com/SF/media/site/Newsletters/Email%20Test%20Images/facebook2.png" alt="on Facebook" style="max-width:600px; id="Img9" mc:label="header_image" mc:edit="header_image" mc:allowdesigner mc:allowtext />
<img src="http://www.spaceform.com/SF/media/site/Newsletters/Email%20Test%20Images/twitter2.png" alt="on Twitter" style="max-width:600px; id="Img10" mc:label="header_image" mc:edit="header_image" mc:allowdesigner mc:allowtext />
<img src="http://www.spaceform.com/SF/media/site/Newsletters/Email%20Test%20Images/pinterest2.png" alt="or on Pinterest" style="max-width:600px; id="Img11" mc:label="header_image" mc:edit="header_image" mc:allowdesigner mc:allowtext />
</div>
</td>
</tr>
<tr>
<td valign="top" width="350">
<div mc:edit="std_footer">
<em>Copyright © *|CURRENT_YEAR|* *|LIST:COMPANY|*, All rights reserved. >
<br />
*|IFNOT:ARCHIVE_PAGE|* *|LIST:DESCRIPTION|*
<br />
<strong>Our mailing address is:</strong>
<br />
*|HTML:LIST_ADDRESS_HTML|**|END:IF|*
</div>
</td>
<td valign="top" width="190" id="monkeyRewards">
<div mc:edit="monkeyrewards">
*|IF:REWARDS|* *|HTML:REWARDS|* *|END:IF|*
</div>
</td>
</tr>
<tr>
<td colspan="2" valign="middle" id="utility">
<div mc:edit="std_utility">
unsubscribe from this list | update subscription preferences<br />
</div>
</td>
</tr>
</table>
<!-- // End Module: Standard Footer \\ -->
</td>
</tr>
</table>
<!-- // End Template Footer \\ -->
</td>
</tr>
</table>
<br />
</td>
</tr>
</table>
</center>
</body>
You cant have empty <td>, outlook will ignore all styling you have made.
So insert a small transparent image inside them like <img src="Img/trans.png" height="1" width="1" style="display:block">
You dont have the <head> in the code so i Can see it, but remember you cant style with external css. Gmail removes everything in your header.. So everything needs to be inline styling
EDIT:
After looking a bit more on your code i can see you have lot of rowspan="" some mail client dosnt like that. If neede try only to use colspan, and not rowspan. All of the vertical pictures side by side can get ugly.
It looks like when you sliced the image you somehow lost a 16px high by 24px wide chunk off the bottom of each sidebar image.
The sidebar images, cell_02.jpg and cell_04.jpg, are 1474px tall while the center column images add to 1490px tall. The sidebar table cells get stretched vertically to match the height of the center column, leaving 16px of empty space, and center the images vertically, leaving 8px of empty space top and bottom.
I suggest you find the missing bits and make each sidebar image 16px taller. Alternatively, you could take a 16px slice off the bottom of cell_25.jpg, paste it to the top of cell_26.jpg, and fill in the missing corners.