CT0
Outlook 2007/2010 3 Column Issue
Hi,
I'm having an issue with a 3 column responsive layout. It works fine in all other clients but in Outlook 2007/2010 the first column seems to rise up above the rest. Please see screenshot from Litmus here http://bit.ly/1uipk2z. The tests can be found here https://litmus.com/pub/05456e9/results#ol2010-full_on I've checked the widths and all seem to be ok. It seems to work ok if there is just one line of text i.e. the kaplan.do/ line, but any more than this and the top box in the left column moves out of place.
The code for this section is below (please forgive the way it is displayed here). I would be very grateful for any assistance!
<table width="100%" bgcolor="#ffffff" cellpadding="0" cellspacing="0" border="0" id="section1">
<tbody>
<tr>
<td width="100%">
<table bgcolor="#ffffff" width="560" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth" modulebg="edit">
<tbody>
<tr>
<td width="100%" height="20"></td>
</tr>
<tr>
<td>
<table width="560" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
<tbody>
<!-- Row 1 -->
<tr>
<td>
<!-- col 1 -->
<table width="172" align="left" border="0" cellpadding="0" cellspacing="0" class="devicewidth" bgcolor="#00A5D9">
<tbody>
<!-- image -->
<tr>
<td width="172" align="center" class="devicewidth">
<img class="deviceWidth" src="http://image.crm.kaplaninternational.com/lib/fe9a13707567017e76/m/3/mega-template-440x124-D4-Facebook.jpg" alt="" width="172" border="0" style="display:block; margin:0" />
</td>
</tr>
<!-- end of image -->
<tr bgcolor="#00A5D9">
<td style="padding:10px; font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#ffffff; line-height:1.4;">
<!-- 13px Small Heading White/Bold -->
<a href="#" style="font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-size:13px; color:#ffffff; line-height:1.4; text-decoration: none;">kaplan.do/facebook </a>
<!-- Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi -->
</td>
</tr>
<tr bgcolor="#00A5D9">
<td style="padding:10px; font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#ffffff; line-height:1.4;">
Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi
</td>
</tr>
<!-- end of text content table -->
</tbody>
</table>
<!-- spacing -->
<table width="22" align="left" border="0" cellpadding="0" cellspacing="0" class="removeMobile">
<tbody>
<tr>
<td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"> </td>
</tr>
</tbody>
</table>
<!-- end of spacing -->
<!-- col 2 -->
<table width="172" align="left" border="0" cellpadding="0" cellspacing="0" class="devicewidth" bgcolor="#f47b20">
<tbody>
<!-- image -->
<tr>
<td width="172" align="center" class="devicewidth">
<img class="deviceWidth" src="http://image.crm.kaplaninternational.com/lib/fe9a13707567017e76/m/3/mega-template-440x124-D4-Twitter.jpg" alt="" width="172" border="0" style="display:block; margin:0" />
</td>
</tr>
<!-- end of image -->
<tr bgcolor="#f47b20">
<td style="padding:10px; font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#ffffff; line-height:1.4;">
<!-- 13px Small Heading White/Bold -->
<a href="#" style="font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-size:13px; color:#ffffff; line-height:1.4; text-decoration: none;">kaplan.do/facebook </a>
<!-- Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi -->
</td>
</tr>
<tr bgcolor="#f47b20">
<td style="padding:10px; font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#ffffff; line-height:1.4;">
Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi
</td>
</tr>
<!-- end of text content table -->
</tbody>
</table>
<!-- end of col 2 -->
<!-- spacing -->
<table width="1" align="left" border="0" cellpadding="0" cellspacing="0" class="removeMobile">
<tbody>
<tr>
<td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"> </td>
</tr>
</tbody>
</table>
<!-- end of spacing -->
<!-- col 3 -->
<table width="172" align="right" border="0" cellpadding="0" cellspacing="0" class="devicewidth" bgcolor="#ed174f">
<tbody>
<!-- image -->
<tr>
<td width="172" align="center" class="devicewidth">
<img class="deviceWidth" src="http://image.crm.kaplaninternational.com/lib/fe9a13707567017e76/m/3/mega-template-440x124-D4-Youtube-v2.jpg" alt="" width="172" border="0" style="display:block; margin:0" />
</td>
</tr>
<!-- end of image -->
<tr bgcolor="#ed174f">
<td style="padding:10px; font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#ffffff; line-height:1.4;">
<!-- 13px Small Heading White/Bold -->
<a href="#" style="font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-size:13px; color:#ffffff; line-height:1.4; text-decoration: none;">kaplan.do/facebook </a>
<!-- Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi -->
</td>
</tr>
<tr bgcolor="#ed174f">
<td style="padding:10px; font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#ffffff; line-height:1.4;">
Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi
</td>
</tr>
<!-- end of text content table -->
</tbody>
</table>
</td>
</tr>
<!-- spacing -->
<tr>
<td width="100%" height="20"></td>
</tr>
<!-- Row 2 -->
<tr>
<td>
<!-- col 1 -->
<table width="172" align="left" border="0" cellpadding="0" cellspacing="0" class="devicewidth" bgcolor="#f47b20">
<tbody>
<!-- image -->
<tr>
<td width="172" align="center" class="devicewidth">
<img class="deviceWidth" src="http://image.crm.kaplaninternational.com/lib/fe9a13707567017e76/m/3/mega-template-440x124-D4-Instagram.jpg" alt="" width="172" border="0" style="display:block; margin:0" />
</td>
</tr>
<!-- end of image -->
<tr bgcolor="#f47b20">
<td style="padding:10px; font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#ffffff; line-height:1.4;">
<!-- 13px Small Heading White/Bold -->
<a href="#" style="font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-size:13px; color:#ffffff; line-height:1.4; text-decoration: none;">kaplan.do/facebook </a>
<!-- Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi -->
</td>
</tr>
<tr bgcolor="#f47b20">
<td style="padding:10px; font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#ffffff; line-height:1.4;">
Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi
</td>
</tr>
<!-- end of text content table -->
</tbody>
</table>
<!-- spacing -->
<table width="22" align="left" border="0" cellpadding="0" cellspacing="0" class="removeMobile">
<tbody>
<tr>
<td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"> </td>
</tr>
</tbody>
</table>
<!-- end of spacing -->
<!-- col 2 -->
<table width="172" align="left" border="0" cellpadding="0" cellspacing="0" class="devicewidth" bgcolor="#ed174f">
<tbody>
<!-- image -->
<tr>
<td width="172" align="center" class="devicewidth">
<img class="deviceWidth" src="http://image.crm.kaplaninternational.com/lib/fe9a13707567017e76/m/3/mega-template-440x124-D4-Blog.jpg" alt="" width="172" border="0" style="display:block; margin:0" />
</td>
</tr>
<!-- end of image -->
<tr bgcolor="#ed174f">
<td style="padding:10px; font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#ffffff; line-height:1.4;">
<!-- 13px Small Heading White/Bold -->
<a href="#" style="font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-size:13px; color:#ffffff; line-height:1.4; text-decoration: none;">kaplan.do/facebook </a>
<!-- Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi -->
</td>
</tr>
<tr bgcolor="#ed174f">
<td style="padding:10px; font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#ffffff; line-height:1.4;">
Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi
</td>
</tr>
<!-- end of text content table -->
</tbody>
</table>
<!-- end of col 2 -->
<!-- spacing -->
<table width="1" align="left" border="0" cellpadding="0" cellspacing="0" class="removeMobile">
<tbody>
<tr>
<td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"> </td>
</tr>
</tbody>
</table>
<!-- end of spacing -->
<!-- col 3 -->
<table width="172" align="right" border="0" cellpadding="0" cellspacing="0" class="devicewidth" bgcolor="#00A5D9">
<tbody>
<!-- image -->
<tr>
<td width="172" align="center" class="devicewidth">
<img class="deviceWidth" src="http://image.crm.kaplaninternational.com/lib/fe9a13707567017e76/m/3/mega-template-440x124-D4-GPlus.jpg" alt="" width="172" border="0" style="display:block; margin:0" />
</td>
</tr>
<!-- end of image -->
<tr bgcolor="#00A5D9">
<td style="padding:10px; font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#ffffff; line-height:1.4;">
<!-- 13px Small Heading White/Bold -->
<a href="#" style="font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-size:13px; color:#ffffff; line-height:1.4; text-decoration: none;">kaplan.do/plus</a>
<!-- Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi -->
</td>
</tr>
<tr bgcolor="#00A5D9">
<td style="padding:10px; font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#ffffff; line-height:1.4;">
Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi
</td>
</tr>
<!-- end of text content table -->
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="100%" height="20"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
What you're encountering is related to Microsoft Office's page break issue (read more on it here, at the bottom of the page and here.)
Essentially, one of two things happens - you either hit that 22"/~1800px length, and Outlook inserts a break that will force your columns to wrap, or (sometimes and) the columns run out of room, and wrap because of that. To boil that down: say you have a 600px-wide email, with three columns of 200px each, those columns "touch" each other, which isn't something that Outlook likes, and so the right-hand column wraps.
One solution is to adjust the width of the columns so that they don't touch. Usually 190px or 180px is sufficient. The problem with just stopping there, though, is that the columns are still vulnerable to the page break issue because they're free-floating.
The solution to that problem and yours is to use some conditional commenting to provide a little extra structure in Outlook, like so:
Works everywhere, problem solved.
Hi Fabio,
Thank you very much for this. I had suspected that this might be the issue after having read an article on http://www.emailonacid.com/ http://bit.ly/1pXwc2I but couldn't find a way to resolve it. Just tested the email with your solution and problem solved. Thank you so much!
You're a beautiful person for sharing. Seriously just saved me quite a headache - thank you!
Add
table { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }to your css. Theres nothing wrong with the table you've posted here except for missing height attributes on the images. I've run it through litmus and it looks fine. If you still have problems it could be caused by the tables above it or other some other css in your template.Hi Michael,
Thank you very much for taking the time to look at this and for your response. I have the css fix in place but was wondering if it had something to do with the content above