VML html mail, position of image - vml

I have made a HTML mail template. This templates works well in all mayor mail clients (gmail, thunderbird etc.), except Outlook 2007/2010. Outlook 2003 displays the mail well.
This is the correct lay-out, the orange header bar is displayed at the right position:
This is what is wrong with Outlook 2007/2010. The header bar is outside the body, on top of the mail:
Here is my template:
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>Wieskamp Nieuwsbrief</title>
<style type="text/css">
body,td{font-family: Verdana, Arial; font-size: 12px;color: black;}
.header{font-size:12px;font-weight:bold;color: #f4f4be;text-align:center;}
v:* { behavior: url(#default#VML); display: inline-block; }
</style>
</head>
<body style="margin: 0">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td background="http://www.wieskamp.nl/media/nieuwsbrief/wieskamp-nieuwsbrief-header.jpg" bgcolor="#f6f6f6" width="600" height="226" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:226px;">
<v:fill type="tile" src="http://www.wieskamp.nl/media/nieuwsbrief/wieskamp-nieuwsbrief-header.jpg" color="#f6f6f6" size="600px,226px"/>
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
<tr>
<td background="http://www.wieskamp.nl/media/nieuwsbrief/wieskamp-nieuwsbrief-midden.jpg" bgcolor="#cfd300" width="600" valign="top" style="background-repeat: repeat-y no-repeat;">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;">
<v:fill type="tile" src="http://www.wieskamp.nl/media/nieuwsbrief/wieskamp-nieuwsbrief-midden.jpg" color="#f4f4be" size="600px,6px" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div>
<table border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td width="40"></td>
<td colspan="3" align="center" background="http://www.wieskamp.nl/media/nieuwsbrief/header_balk.jpg" bgcolor="#cfd300" width="520" height="26" valign="top" style="color: #f4f4be;font-weight: bold;vertical-align: middle;background-repeat: repeat-y no-repeat;">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:520px;height:26px;">
<v:fill type="tile" src="http://www.wieskamp.nl/media/nieuwsbrief/header_balk.jpg" color="#f6f6f6" size="520px,26px"/>
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
Headerbalk
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
<td width="40"></td>
</tr>
<tr><td colspan="6"> </td></tr>
<tr>
<td width="40"></td>
<td width="10"></td>
<td width="124" valign="top"><img src="http://www.wieskamp.nl/media/nieuwsbrief/plaatjes.jpg" width="114" height="160"/></td>
<td width="386" valign="top">
<b>Er gaat iets gebeuren</b><br><br>
22 februari 2013<br><br>
De bomen worden weer fris groen, de bloeitijd begint. De lucht geurt van bloesem en het eerste gemaaide gras. De vogels geven hun concert bij de opgaande zon. De lente is een uitstekend jaargetijde om op vakantie te gaan in het Nationale Landschap Winterswijk.
De lente loopt van maart tot en met juni op Camping Het Wieskamp. Natuurlijk is er met Pasen, Hemelvaart en Pinksteren veel te beleven op het terrein. Maar daarom heen vindt u de rust op de standplaats, en ook erbuiten. Al wandelend of fietsend ontdekt u de nestelende vogels. de bloeiende hoogstamfruitbomen en het frisse groen van de omliggende natuurgebieden.
</td>
<td width="40"></td>
</tr>
<tr><td colspan="6"> </td></tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td width="40"></td>
<td colspan="3" align="center" background="http://www.wieskamp.nl/media/nieuwsbrief/header_balk.jpg" bgcolor="#cfd300" width="520" height="26" valign="top" style="color: #f4f4be;font-weight: bold;vertical-align: middle;background-repeat: repeat-y no-repeat;">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:520px;height:26px;">
<v:fill type="tile" src="http://www.wieskamp.nl/media/nieuwsbrief/header_balk.jpg" color="#f6f6f6" size="520px,26px"/>
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
Headerbalk
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
<td width="40"></td>
</tr>
<tr><td colspan="6"> </td></tr>
<tr>
<td width="40"></td>
<td width="10"></td>
<td width="124" valign="top"><img src="http://www.wieskamp.nl/media/nieuwsbrief/plaatjes.jpg" width="114" height="160"/></td>
<td width="386" valign="top">
<b>Er gaat iets gebeuren</b><br><br>
22 februari 2013<br><br>
De bomen worden weer fris groen, de bloeitijd begint. De lucht geurt van bloesem en het eerste gemaaide gras. De vogels geven hun concert bij de opgaande zon. De lente is een uitstekend jaargetijde om op vakantie te gaan in het Nationale Landschap Winterswijk.
De lente loopt van maart tot en met juni op Camping Het Wieskamp. Natuurlijk is er met Pasen, Hemelvaart en Pinksteren veel te beleven op het terrein. Maar daarom heen vindt u de rust op de standplaats, en ook erbuiten. Al wandelend of fietsend ontdekt u de nestelende vogels. de bloeiende hoogstamfruitbomen en het frisse groen van de omliggende natuurgebieden.
</td>
<td width="40"></td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
<tr>
<td background="http://www.wieskamp.nl/media/nieuwsbrief/wieskamp-nieuwsbrief-footer.jpg" bgcolor="#f6f6f6" width="600" height="88" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:88px;">
<v:fill type="tile" src="http://www.wieskamp.nl/media/nieuwsbrief/wieskamp-nieuwsbrief-footer.jpg" color="#f6f6f6" size="600px,88px"/>
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

Related

Mail template changes after sending

my problem is that after sending template mail/ saving template in chrome
e.g. to myself, when I opens it, it looks good, but after a few seconds it looks like it is loosing some css (in this particular case it is loosing borders in bottom table).
Here is the code, it was written in MJML
What is weird, if i send this template not through gmail it looks good even in gmail
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title>
</title>
<!--[if !mso]> -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
#outlook a {
padding: 0;
}
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
.ExternalClass * {
line-height: 100%;
}
body {
margin: 0;
padding: 0;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
table,
td {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
p {
display: block;
margin: 13px 0;
}
</style>
<!--[if !mso]><!-->
<style type="text/css">
#media only screen and (max-width:480px) {
#-ms-viewport {
width: 320px;
}
#viewport {
width: 320px;
}
}
</style>
<!--<![endif]-->
<!--[if mso]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<!--[if lte mso 11]>
<style type="text/css">
.outlook-group-fix { width:100% !important; }
</style>
<![endif]-->
<!--[if !mso]><!-->
<link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">
<style type="text/css">
#import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);
</style>
<!--<![endif]-->
<style type="text/css">
#media only screen and (min-width:480px) {
.mj-column-per-100 {
width: 100% !important;
}
.mj-column-px-300 {
width: 300px !important;
}
.mj-column-per-50 {
width: 50% !important;
}
}
</style>
<style type="text/css">
</style>
</head>
<body>
<div>
<div class="mj-column-per-100 outlook-group-fix" style="font-size:13px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tr>
<td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:verdana;font-size:20px;line-height:1;text-align:center;color:black;">
Tytul
</div>
</td>
</tr>
<tr>
<td vertical-align="top" style="font-size:0px;padding:20px 0;word-break:break-word;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td>
<!--[if mso | IE]>
<table
align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;" width="600"
>
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style="Margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;vertical-align:top;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td
style="vertical-align:top;width:300px;"
>
<![endif]-->
<div class="mj-column-px-300 outlook-group-fix" style="font-size:13px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<table 0="[object Object]" 1="[object Object]" 2="[object Object]" border="0" style="cellspacing:0;color:#000;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:22px;table-layout:auto;width:100%;">
<tr style="text-align: left;">
<th>
<h3>Desktop</h3>
</th>
</tr>
<tr style="text-align: left;">
<th style="padding: 5px;">TAG</th>
<th style="padding: 5px;">STATUS</th>
</tr>
<tr style="text-align: left; background-color: #e0ecff;">
<td style="padding: 5px;">Homepage</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr style="text-align: left;">
<td style="padding: 5px;">Category</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr style="text-align: left; background-color: #e0ecff;">
<td style="padding: 5px;">Search</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr style="text-align: left;">
<td style="padding: 5px;">Offer</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr style="text-align: left; background-color: #e0ecff;">
<td style="padding: 5px;">Basket</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr style="text-align: left;">
<td style="padding: 5px;">StartOrder</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr style="text-align: left; background-color: #e0ecff;">
<td style="padding: 5px;">Confirmation</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr style="text-align: left;">
<td style="padding: 5px;">Placebo</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr style="text-align: left; background-color: #e0ecff;">
<td>Comment:</td>
<td></td>
</tr>
<tr>
<td>Comment here</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
<td
style="vertical-align:top;width:300px;"
>
<![endif]-->
<div class="mj-column-px-300 outlook-group-fix" style="font-size:13px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<table 0="[object Object]" 1="[object Object]" 2="[object Object]" border="0" style="cellspacing:0;color:#000;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:22px;table-layout:auto;width:100%;">
<tr style="text-align: left;">
<th>
<h3>Mobile</h3>
</th>
</tr>
<tr style="text-align: left;">
<th style="padding: 5px;">TAG</th>
<th style="padding: 5px;">STATUS</th>
</tr>
<tr style="text-align: left; background-color: #e0ecff;">
<td style="padding: 5px;">Homepage</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr style="text-align: left;">
<td style="padding: 5px;">Category</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr style="text-align: left; background-color: #e0ecff;">
<td style="padding: 5px;">Search</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr style="text-align: left;">
<td style="padding: 5px;">Offer</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr style="text-align: left; background-color: #e0ecff;">
<td style="padding: 5px;">Basket</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr style="text-align: left;">
<td style="padding: 5px;">StartOrder</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr style="text-align: left; background-color: #e0ecff;">
<td style="padding: 5px;">Confirmation</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr style="text-align: left;">
<td style="padding: 5px;">Placebo</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr style="text-align: left; background-color: #e0ecff;">
<td>Comment:</td>
<td></td>
</tr>
<tr>
<td>Comment here</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td vertical-align="top" style="font-size:0px;padding:20px 0;word-break:break-word;">
<!--[if mso | IE]>
<table
align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;" width="600"
>
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style="Margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;vertical-align:top;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td
style="vertical-align:top;width:300px;"
>
<![endif]-->
<div class="mj-column-per-50 outlook-group-fix" style="font-size:13px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<table 0="[object Object]" 1="[object Object]" 2="[object Object]" border="0" style="cellspacing:0;color:#000;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:22px;table-layout:auto;width:100%;">
<tr style="text-align: left; border-bottom: 1px solid black;">
<td style="padding: 5px; width: 82px;">Rate card:</td>
<td style="padding: 5px;">RC here</td>
</tr>
<tr style="text-align: left;">
<td style="padding: 5px; width: 82px; ">Budget:</td>
<td style="padding: 5px;">text</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
<td
style="vertical-align:top;width:300px;"
>
<![endif]-->
<div class="mj-column-per-50 outlook-group-fix" style="font-size:13px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<table 0="[object Object]" 1="[object Object]" 2="[object Object]" border="0" style="cellspacing:0;color:#000;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:22px;table-layout:auto;width:100%;">
<tr style="text-align: left; border-bottom: 1px solid black;">
<td style="padding: 5px; width: 82px;">Optimization:</td>
<td style="padding: 5px;">text</td>
</tr>
<tr style="text-align: left;">
<td style="padding: 5px; width: 82px;">Banners:</td>
<td style="padding: 5px;">text</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</div>
</div>
</body>
</html>

Try to sent via another method. Im using Litmus, its working fine or just try to sent via mailjet - i think it should work either and its for free.
You code seems to be correct (checked via https://www.w3schools.com/Html/tryit.asp?filename=tryhtml_form_mail )

Email template center align text next to logo

I am creating the header shown below for an email template. As you can see, the text is slightly offset from the center of the email. This happens because I have two table cells: one for the logo and another for the text. I can center the text within its cell, but that cell isn't 100% of the width due to the the logo cell taking up 74 pixels. I can shift the header to the left using margin-left in most email clients, but Outlook and Gmail both don't support margins, and I need to support both clients. How can I go about getting the text centered in Outlook and Gmail?
<body style="padding:0; margin:0">
<table border="0" cellpadding="0" cellspacing="0" style="margin: 0; padding: 0; padding-top: 25px;" width="100%">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" style="margin: 0; padding: 0; min-height:76px;" width="600px" class="100p">
<tr>
<td background="http://s3-us-west-2.amazonaws.com/sheldon-welcome-email/header.png" bgcolor="#39B491" width="600px" valign="top" class="100p">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:76px;">
<v:fill type="tile" src="http://s3-us-west-2.amazonaws.com/sheldon-welcome-email/header.png" color="#39B491" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="100p">
<tr>
<td width="74px" align="center" style="padding-top: 10px;">
<div style="width:44px">
<img src="http://s3-us-west-2.amazonaws.com/sheldon-welcome-email/my-id-care-logo.png" height="52px" width="44px" class="100p" />
</div>
</td>
<td width="*%" align="center">
<h3 style="color: white; font-size: 14px; margin: 0px; margin-left: -44px; margin-top: 10px; padding: 0px;"><font face="'Roboto', Arial, sans-serif">Welcome to MyIDCare</font></h3>
<h1 style="color: white; font-size: 20px; margin: 0px; margin-left: -44px; padding: 0px;"><font face="'Roboto', Arial, sans-serif">LET'S GET STARTED</font></h1>
</td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>

Took me a little while to understand your question but i think i got it. You want to center the text within the outer table regardless of the logo being there, right? If thats a yes, then its just a matter of adding another 74px block on the right of the text.
Have a look at the code to see what i did:
<table border="0" cellpadding="0" cellspacing="0" style="margin: 0; padding: 0; padding-top: 25px;" width="100%">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" style="margin: 0; padding: 0; min-height:76px;" width="600px" class="100p">
<tr>
<td background="http://s3-us-west-2.amazonaws.com/sheldon-welcome-email/header.png" bgcolor="#39B491" width="600px" valign="top" class="100p">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:76px;">
<v:fill type="tile" src="http://s3-us-west-2.amazonaws.com/sheldon-welcome-email/header.png" color="#39B491" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="100p">
<tr>
<td width="74px" align="center" style="padding-top: 10px;">
<div style="width:44px">
<img src="http://s3-us-west-2.amazonaws.com/sheldon-welcome-email/my-id-care-logo.png" height="52px" width="44px" class="100p" />
</div>
</td>
<td width="*%" align="center">
<h3 style="color: white; font-size: 14px; margin: 0px; margin-top: 10px; padding: 0px;"><font face="'Roboto', Arial, sans-serif">Welcome to MyIDCare</font></h3>
<h1 style="color: white; font-size: 20px; margin: 0px; padding: 0px;"><font face="'Roboto', Arial, sans-serif">LET'S GET STARTED</font></h1>
</td>
<td width="74px" align="center">
</td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table>
Cheers

How to prevent inline bloc from my email to stack on iPad?

I originally created an email using MJML and adapted the code to improve the mobile version.
1) I haven't any problem while checking the email with chrome and testing it with all desktop client with litmus, but the ipad version of the email stack inline blocks.
2) Some elements only displayed on mobile using media queries are not visible when testing the email whereas I can see them with chrome.
Here is the preview of the issues:
enter image description here
Here is the link of the html file:
Html file
Here is the beginning of the code:
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title>Invitiation à l'avant-première "Quoi de neuf au moyen âge ?"</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!--[if !mso]><!-->
<style type="text/css">
#media (max-width:660px) {
#-ms-viewport { width: 320px; }
#viewport { width: 320px; }
}
</style>
<!--<![endif]-->
<style type="text/css">
#outlook a { padding: 0; }
.ReadMsgBody { width: 100%; }
.ExternalClass { width: 100%; }
.ExternalClass * { line-height: 100%; }
body { margin: 0; padding: 0; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
table, td { border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; }
p { display: block; margin: 13px 0; }
.hidden-desktop {display: none!important; max-height: 0; font-size: 0; overflow: hidden; line-height: 0; mso-hide: all;}
#media (min-width:660px) {
.mj-column-per-100, * [aria-labelledby="mj-column-per-100"] { width: 100%!important; }
.mj-column-px-200, * [aria-labelledby="mj-column-px-200"] { width: 200px!important; }
.mj-column-px-30, * [aria-labelledby="mj-column-px-30"] { width: 30px!important; }
.mj-column-px-430, * [aria-labelledby="mj-column-px-430"] { width: 430px!important; }
.mj-column-px-410, * [aria-labelledby="mj-column-px-410"] { width: 410px!important; }
.mj-column-px-20, * [aria-labelledby="mj-column-px-20"] { width: 20px!important; }
}
#media (max-width:659px) {
.mj-column-per-100, * [aria-labelledby="mj-column-per-100"] { width: 280px!important; display: block!important; margin: 0 auto; }
.mj-column-px-200, * [aria-labelledby="mj-column-px-200"] { width: 280px!important; display: block!important; margin: 0 auto; }
.mj-column-px-30, * [aria-labelledby="mj-column-px-30"] { width: 0px!important; }
.mj-column-px-430, * [aria-labelledby="mj-column-px-430"] { width: 280px!important; display: block!important; margin: 0 auto; }
.mj-column-px-410, * [aria-labelledby="mj-column-px-410"] { width: 280px!important; display: block!important; margin: 0 auto; }
.mj-column-px-20, * [aria-labelledby="mj-column-px-20"] { width: 0px!important; }
.invitation-desktop { display: none!important; }
.image-expo { height: 400px!important; background-repeat: no-repeat!important; }
.hidden-desktop{ display: block!important; max-height: none!important; font-size: 12px; line-height: 1.5!important; overflow: visible!important; }
.mobile-space{ height: 20px; }
.mobile-auto-height{ height: auto!important; }
.hidden-mobile{ display: none!important }
.logo-table { width: 80px!important; float: left; }
.logo-padding { padding: 7px!important; }
.logo { width:66px!important;height:66px!important; }
.invitation-mobile-title{ width: 200px; float: left; height: 80px;}
.social-mobile{ width: 80px!important; height: 80px; display: inline-block!important; }
.social-space-mobile { width: 20px!important; }
}
</style>
<!--[if mso]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<!--[if !mso]><!-->
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,500,700" rel="stylesheet" type="text/css">
<!--<![endif]-->
</head>
<body style="background: #e8e8e8;">
<div style="background-color:#e8e8e8;">
<!--[if mso | IE]>
<table border="0" cellpadding="0" cellspacing="0" width="660" align="center" style="width:660px;">
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style="margin:0 auto;max-width:660px;">
<table cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;" align="center" border="0">
<tbody>
<tr>
<td style="text-align:center;vertical-align:top;font-size:0px;padding:0px;">
<!--[if mso | IE]>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="vertical-align:top;width:660px;">
<![endif]-->
<div aria-labelledby="mj-column-per-100" class="mj-column-per-100" style="vertical-align:top;display:inline-block;font-size:13px;text-align:left;width:100%;">
<table cellpadding="0" cellspacing="0" width="100%" border="0">
<tbody>
<tr>
<td style="word-break:break-word;font-size:0px;padding:15px;" align="center">
<div style="cursor:auto;color:#a6a6a6;font-family:'Lato', Arial, sans-serif;font-size:11px;font-weight:300;line-height:13px;text-transform:none;">
Vous avez des problèmes d’affichage ?
<a href="#" style="font-weight: 300; font-size: 11px; text-transform: none; font-family:'Lato', Arial, sans-serif; color:#a6a6a6">
Visualiser cet email en ligne
</a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
<!--[if mso | IE]>
<table border="0" cellpadding="0" cellspacing="0" width="660" align="center" style="width:660px;">
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style="margin:0 auto;max-width:660px;">
<table cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;" align="center" border="0">
<tbody>
<tr>
<td style="text-align:center;vertical-align:top;font-size:0px;padding:0px;">
<!--[if mso | IE]>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="vertical-align:top;width:200px;">
<![endif]-->
<div aria-labelledby="mj-column-px-200" class="mj-column-px-200" style="vertical-align:top;display:inline-block;font-size:13px;text-align:left;width:200px;">
<table class="logo-table" cellpadding="0" cellspacing="0" style="vertical-align:top;background:#fff;" width="100%" border="0">
<tbody>
<tr>
<td class="logo-padding" style="word-break:break-word;font-size:0px;padding:25px;" align="center">
<table cellpadding="0" cellspacing="0" style="border-collapse:collapse;border-spacing:0px;" align="center" border="0">
<tbody>
<tr>
<td style="width:150px;">
<img class="logo" alt="" title="" height="150px" src="http://bank.digital-expression.fr/universcience/logo-cite.png" style="border:none;display:block;outline:none;text-decoration:none;width:100%;height:150px;" width="150">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if !mso]><!-->
<table class="hidden-desktop invitation-mobile-title" cellpadding="0" cellspacing="0" width="200px" border="0" style="border-collapse:collapse;border-spacing:0px;">
<tbody>
<tr>
<td width="20px">
</td>
<td width="180px">
<table cellpadding="0" cellspacing="0" style="vertical-align:top;" width="100%" border="0">
<tbody>
<tr>
<td style="word-break:break-word;font-size:0px;padding:11px 0px;background-color:#d81921;" align="center">
<div style="cursor:auto;color:#ffffff;font-family:'Lato', Arial, sans-serif;font-size:28px;font-weight:400;line-height:28px;text-transform:uppercase;">Invitation</div>
</td>
</tr>
<tr>
<td style="word-break:break-word;font-size:0px;padding:0px 0px;background-color:#000" align="center">
<div style="cursor:auto;color:#ffffff;font-family:'Lato', Arial, sans-serif;font-size:15px;font-weight:400;line-height:30px;text-transform:uppercase;">
<span style="letter-spacing: 3px">
avant-première
</span>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<div style="clear:both;"></div>
<!--<![endif]-->
</div>
<!--[if mso | IE]>
</td>
<td style="vertical-align:top;width:30px;">
<![endif]-->
<!--[if !mso]><!-->
<div class="mobile-space hidden-desktop" style="font-size:1px;line-height:30px;"> </div>
<!--<![endif]-->
<div aria-labelledby="mj-column-px-30" class="mj-column-px-30" style="vertical-align:top;display:inline-block;font-size:13px;text-align:left;width:30px;">
<table cellpadding="0" cellspacing="0" width="100%" border="0">
<tbody>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
<td style="vertical-align:top;width:430px;">
<![endif]-->
<div aria-labelledby="mj-column-px-430" class="mj-column-px-430" style="vertical-align:top;display:inline-block;font-size:13px;text-align:left;width:430px;">
<table cellpadding="0" cellspacing="0" style="vertical-align:top;" width="100%" border="0">
<tbody>
<tr>
<td style="word-break:break-word;font-size:0px;padding:0px;" align="left">
<div class="image-expo" style="margin:0 auto;height:200px;max-width:430px;background:#f2b3b7 url(http://bank.digital-expression.fr/universcience/bg-expo.jpg) bottom right / 430px 200px no-repeat;">
<!--[if mso | IE]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:430px;">
<v:fill origin="0.5, 0" position="0.5,0" type="tile" src="http://bank.digital-expression.fr/universcience/bg-expo.jpg" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<table class="image-expo" cellpadding="0" cellspacing="0" height="200px" style="font-size:0px;width:100%;height:200px;background:#f2b3b7 url(http://bank.digital-expression.fr/universcience/bg-expo.jpg) bottom right / 430px 200px no-repeat;" align="center" border="0" background="http://bank.digital-expression.fr/universcience/bg-expo.jpg">
<tbody>
<tr>
<td style="text-align:center;vertical-align:top;font-size:0px;padding:0px;">
<!--[if mso | IE]>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="vertical-align:top;width:410px;">
<![endif]-->
<div aria-labelledby="mj-column-px-410" class="mj-column-px-410" style="vertical-align:top;display:inline-block;font-size:13px;text-align:left;width:100%;">
<table cellpadding="0" cellspacing="0" style="vertical-align:top;" width="100%" border="0">
<tbody>
<tr>
<td style="word-break:break-word;font-size:0px;padding:0px;">
<div style="font-size:1px;line-height:20px;"> </div>
</td>
</tr>
<tr>
<td style="word-break:break-word;font-size:0px;padding:0px 0px 0px 20px;" align="left">
<div style="cursor:auto;color:#ffffff;font-family:'Lato', sans-serif;font-size:30px;font-weight:700;line-height:30px;text-transform:uppercase;">
Quoi de neuf<br> au moyen âge ?
</div>
</td>
</tr>
<tr>
<td style="word-break:break-word;font-size:0px;padding:0px;">
<div style="font-size:1px;line-height:20px;"> </div>
</td>
</tr>
<tr>
<td style="word-break:break-word;font-size:0px;padding:0px 0px 0px 20px;" align="left">
<div style="cursor:auto;color:#ffffff;font-family:'Lato', sans-serif;font-size:14px;font-weight:400;line-height:16px;text-transform:uppercase;">
TOUT CE QUE L’ARCHEOLOGIE<br> NOUS RÉVÈLE
</div>
</td>
</tr>
<tr>
<td style="word-break:break-word;font-size:0px;padding:0px;">
<div style="font-size:1px;line-height:10px;"> </div>
</td>
</tr>
<tr>
<td style="word-break:break-word;font-size:0px;padding:0px 0px 0px 20px;" align="left">
<div style="cursor:auto;color:#ffffff;font-family:'Lato', sans-serif;font-size:40px;font-weight:700;line-height:40px;text-transform:uppercase;">
+
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
<td style="vertical-align:top;width:20px;">
<![endif]-->
<div aria-labelledby="mj-column-px-20" class="mj-column-px-20" style="vertical-align:top;display:inline-block;font-size:13px;text-align:left;width:100%;">
<table cellpadding="0" cellspacing="0" style="vertical-align:top;" width="100%" border="0">
<tbody>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
<!--[if mso | IE]>
</v:textbox>
</v:rect>
<![endif]-->
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
<!--[if mso | IE]>
<table border="0" cellpadding="0" cellspacing="0" width="660" align="center" style="width:660px;">
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div class="mobile-space" style="font-size:1px;line-height:30px;"> </div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
...I can't put the complete code on my post to be under 30000 signs.
</div>
</body>
</html>
Thank you for helping,

Well that's a common issue with iOs 9 and blank space between div. Even if font-size is set to 0px it acts like if it still here.
You'll have to minify your HTML to make it look nice again.
I did it for you : http://pastebin.com/0RX92bat and here's how it looks on Litmus on iPad Retina with Mail http://imgur.com/DfziId3
You can use https://github.com/kangax/html-minifier to get the same result with these options :
{ collapseWhitespace: true,
removeEmptyAttributes: true,
minifyCSS: true }

I've run into this problem many times and the easiest fix I've found is to add a margin: 0 -2px; to each display: inline-block;:
`<div style="display: inline-block; margin: 0 -2px;">`
The same problem exists on the web, as outlined in Fight the Space Between Inline-Block Elements on CSS Tricks. This article includes a few other examples in case you don't like the negative margin hack.

How to get tables to line up next to each other

trying to get the shipping details and order details tables to line up next to each other in the same row. i have them in a wrapper table, and set the widths to 50%, but they still line up in a block format. making one of the widths less than 50% didn't change anything.
----this is an email
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Climatic Corporation</title>
<style type="text/css">
/*RESET STYLES*/
body {width: 100%; background-color: #ffffff; margin:0; padding:0; -webkit-font-smoothing: antialiased;font-family: Tahoma, Verdana, Segoe, sans-serif;}
table{border-collapse:collapse;}
img, a img{border:0; outline:none; text-decoration:none;}
h1, h2, h3, h4, h5, h6{margin:0; padding:0;}
/*CLIENT SPECIFIC STYLES*/
.ReadMsgBody{width:100%;} .ExternalClass{width:100%;}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div{line-height:100%;}
table,td{mso-table-lspace:0pt; mso-table-rspace:0pt;}
#outlook a{padding:0;}
img{-ms-interpolation-mode: bicubic;}
body, table, td, p, a, li, blockquote{-ms-text-size-adjust:100%; -webkit-text-size-adjust:100%;}
/*Custom Styles*/
#mainTable{
border:4px solid black;
}
/*Mobile Styles*/
#media only screen and (max-width:479px) {
}
</style>
</head>
<body>
<center>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="620" id="containerTable">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="headerTable">
<tr>
<td align="left" valign="top">
<img src="CClogo.png" alt="Climatic Corporation Logo">
</td>
<td align="right" valign="top">
800-845-4555
<br>
csr#climaticcorp.com
<br>
climatichomeproducts.com
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="mainTable">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="messageTable">
<tr>
<td align="left" valign="top" width="100%">
<h1>THANK YOU!</h1>
</td>
</tr>
<tr>
<td align="left" valign="top" width="100%">
<p>Hello ##Shopper - thanks for shopping with us.</p>
</td>
</tr>
<tr>
<td align="left" valign="top" width="100%">
<p>Order ##OrderNumber has been placed. We appreciate your business.</p>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="detailsWrapper">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="50%" id="shippingTable">
<tr>
<td align="left" valign="top">
<h3>Shipping Details</h3>
<p>##ShippingAddress</p>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="50%" id="orderTable">
<tr>
<td align="left" valign="top">
<h3>Order Details</h3>
<p>##PONumber</p>
<p>##NumItems units</p>
<p>##OrderValue dollars</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</body>
</html>
here is the fiddle https://jsfiddle.net/baLn4ucj/

To make cells within a table align next to each other, they need to be in different "td" elements. If they are in the same "td" they will be part of a normal flow.
I demonstrated this for you here, by modifying your example.
<tr>
<td> left </td>
<td> right </td>
</tr>
https://jsfiddle.net/DonatoBorrello/baLn4ucj/1/

Images not lining up in Gmail and outlook

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.