Outlook 2010 + Apple Mail 5 Stacking Columns

NF

4

Nicola Fox replied 2014-04-08 10:25:07

I had this problem with tables being slightly unstable in Outlook and on my Android tablet. I put this code between each table - worked for me.

Reply to Nicola Fox

MD

0

Marketing Department replied 2015-08-06 16:48:27

THANK YOU SO MUCH!!! This was a life-saver!!!

JC

0

Jonathan Chinchilla replied 2014-07-29 13:54:44

@Nicola, genius. Spent hours trying to fix it :)

CW

3

Chris Wise replied 2014-04-03 20:21:12

I had this problem and if i leave some space on the outside of the tables they will line up correctly. When the outside table is 600px and the two inside tables are both 300px, outlook stacks them. But if i make both of the tables 290px it works fine. I'm assuming outlook adds a bit of padding or something to tables by default, thus screwing everything up.

Reply to Chris Wise

WM

0

Wiebke Meyer replied 2014-03-26 09:04:57

It would be helpful, if you paste your code. Without it's hard to guess...

Reply to Wiebke Meyer

TM

0

Taryn McKay replied 2014-03-26 14:14:28

right of course: It's actually only doing this in Apple Mail 5 now, everywhere else looks good. Outlook problem was fixed by adding: <div align="right" style="display:inline;"> around the tables that were stacking

<table width="580" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" style="border-collapse: collapse;">
<!--=============== FULL WIDTH TOP HEADLINE BANNER ===============-->
<tr>
<td width="580" style="margin:0; 
                       padding:0; 
                       border-collapse:collapse; 
                       background-color:#ffffff;" 
                       align="center" class="deviceWidth">
<span style="mso-table-lspace:0;mso-table-rspace:0; margin:0">
<img src="http://placehold.it/5800x78" width="580" height="78" align="center" class="deviceWidth" style="display:block;" alt="ALT TEXT">
</span>
</td></tr>
<!--================= FULL WIDTH TOP HEADLINE BANNER ==============-->

<!--==== ROW FOR TWO HALF WIDTH BLOCKS (PRODUCT IMAGE ON LEFT)======-->
<tr>
<td width="580" style="margin:0; 
                       padding:0; 
                       border-collapse:collapse;"
                       align="center" class="deviceWidth" height="290">
<table width="580" align="center" cellpadding="0" cellspacing="0" border="0" class="deviceWidth" height="290">
<tr>
<td width="579" align="center" style="margin:0; 
                                      padding:0; 
                                      border-collapse:collapse; 
                                      border-right:1px solid #ebebeb; 
                                      border-bottom:1px solid #ebebeb;" 
                                      class="devithWidthHalf"
                                      height="290">


<!-- RIGHT ALIGNED PRODUCT DESCRIPTION -->
<div align="right" style="display:inline;">
<table width="287" align="right" cellspacing="0" cellpadding="0" border="0" class="deviceWidth" style="float:right;">
<tr>
<td width="287" align="center" style="margin:0;  
                                      padding-top:50px; 
                                      border-collapse:collapse; 
                                      background-color:#ffffff;" 
                                      class="descriptionText">
<span style="mso-table-lspace:0;mso-table-rspace:0; margin:0;">

<img src="http://placehold.it/236x137" width="236" height="137"  align="center" alt="Product Description" class="descriptionText" />
<a href="#">

<img src="http://placehold.it/99x53" width="99" height="53"  border="0" align="center" alt="Shop Now" />

</a>

</span>
</td> 
</tr>
</table></div>
<!-- END RIGHT ALIGNED PRODUCT DESCRIPTION -->


<!-- LEFT ALIGNED HALF WIDTH BLOCK -->

<div align="left" style="display:inline;">

<table width="290" align="left" cellspacing="0" cellpadding="0" border="0" class="deviceWidth" style="float:left;" height="290">
<tr>
<td width="289" align="center" style="margin:0; 
                                      padding:0; 
                                      border-collapse:collapse; 
                                      border-right:1px solid #ebebeb; 
                                      background-color:#f6f6f6;" 
                                      class="devithWidthHalf">
<span style="mso-table-lspace:0;mso-table-rspace:0; margin:0">
<a href="#">

<img src="http://placehold.it/289x290" border="0" style="display:block;" class="imageAlign" alt="ALT TEXT" width="289" height="290" />

</a>
</span>
</td> 
</tr>
</table>
</div>
<!--END LEFT ALIGNED HALF WIDTH BLOCK -->

</td></tr> 
</table> 
</td></tr>
<!--=== END ROW FOR TWO HALF WIDTH BLOCKS (PRODUCT IMAGE ON LEFT)===-->

<!--=== ROW FOR TWO HALF WIDTH BLOCKS (PRODUCT IMAGE ON RIGHT)===-->
<tr>
<td width="580" style="margin:0; 
                       padding:0; 
                       border-collapse:collapse;"
                       align="center" class="deviceWidth"
                       height="290">
<table width="580" align="center" cellpadding="0" cellspacing="0" border="0" class="deviceWidth" height="290"><tr>
<td width="578" align="center" style="margin:0; 
                                      padding:0; 
                                      border-collapse:collapse; 
                                      border-left:1px solid #ebebeb; 
                                      border-bottom:1px solid #ebebeb;" 
                                      class="devithWidthHalf" height="290">

<!-- LEFT ALIGNED PRODUCT DESCRIPTION -->

<table width="287" align="left" cellspacing="0" cellpadding="0" border="0" class="deviceWidth" style="float:left;">
<tr>
<td width="287" align="center" style="margin:0; padding-top:50px; border-collapse:collapse; background-color:#ffffff;" class="descriptionText">
<span style="mso-table-lspace:0;mso-table-rspace:0; margin:0">

<img src="http://placehold.it/236x137" width="236" height="137" align="center" border="0" class="descriptionText" alt="ALT TEXT" />

<a href="#">
<img src="http://placehold.it/99x53" width="99" height="53" border="0" align="center" alt="Shop Now" /></a>

</span>
</td> 
</tr>
</table>

<!-- LEFT ALIGNED PRODUCT DESCRIPTION -->

<!-- RIGHT ALIGNED HALF WIDTH BLOCK -->

<table width="290" align="right" cellspacing="0" cellpadding="0" border="0" class="deviceWidth" height="290">
<tr>
<td width="289" align="center" style="margin:0; padding:0; border-collapse:collapse;border-left:1px solid #ebebeb; background-color:#f6f6f6;" class="devithWidthHalf">
<span style="mso-table-lspace:0;mso-table-rspace:0; margin:0">
<a href="#">
<img src="http://placehold.it/289x290" width="289" height="290" border="0" style="display:block;" class="imageAlign" alt="ALT TEXT" /></a>
</span>
</td> 
</tr>
</table>

<!-- RIGHT ALIGNED HALF WIDTH BLOCK -->

</td></tr> 

</table>                       
</td></tr>
<!--=== END ROW FOR TWO HALF WIDTH BLOCKS ===-->
</table>

MM

0

Michael Muscat replied 2014-03-27 02:02:28

Regarding Apple Mail 5, I'm going to take a stab in the dark here and assume you're checking this on Litmus. In the past I've had several phantom "rendering errors" on Apple Mail 5 according to Litmus, that did not materialise when I checked the email in Apple Mail 5 itself. I suggest you do the same.

Reply to Michael Muscat

The Litmus Community is the place for email designers and marketers to learn, grow, and educate each other about everything email.

Outlook 2010 + Apple Mail 5 Stacking Columns

Sign in to Community

Join the Litmus Community

Sign up to Community

Get more out of your Litmus account

Forgot password