Outlook table spacing problem for responsive email

I'm working on some email editor software which builds dynamic HTML for emails.

I'm running into problems with outlook where tables are given unwanted spacings in outlook 2007/2010 etc.

Here is an example as it appers in Gmail
http://i.imgur.com/Pjg7PuO.png

Where as Outlook presents the email like this
http://i.imgur.com/v7frIwI.png

Here is the full HTML of the email: http://pastebin.com/8QDp5xvQ

The three columns are tables floating in one TD, this is to make the email responsive and the HTML markup of this can't change.

I hope someone can help me solve this!

davidaf davidaf, 2 years ago

Hi Bart!

First off, you'll likely want your third column to also be floated left, rather than right, which is part of the problem there - it's actually just going to the next line, and then floating to the right, which is why it's sitting awkwardly underneath the other images. If you float it left, then when it can fit all on one line, then they will still sit nicely in a row, but looks a bit better if it does need to break to two lines: http://note.io/1uqz8bx

Secondly, the reason it's breaking is because it's just a bit too wide for Outlook.  Even though the math adds up, Outlook decides will still break it to two lines at 200px wide. I found if I made things just a bit narrow, from 200px to 195px, then things lined up nicely in Outlook. http://note.io/1uqyYRG

This, of course, probably isn't the only solution out there, so you may find a better or more elegant solution. But either way, I do hope that helps.


The Campaign Monitor Blog – HTML email smarts to go with your good looks
Bart, 2 years ago

Thanks for your reply Davidaf,

The letting everything float left does seem like one solution, I would have liked to find a way to align the images on one row in outlook too but it appears that's not possible.

As for setting widths lower would cause it to look weird in other mail clients again.

Either way i'll have to go for a spacing option or two rows, thanks for your effort.

Redferret, 2 years ago

Hi there, outlook 07+ puts an <o:p> tag in between each table in a series like this, causing a tiny gap. There are techniques to reduce it a little but it cannot be gotten rid of completely because it is added when the HTML reaches the inbox.

This is one in a number of reasons that I think responsive design is not the great thing that it's often heralded as.


Gmail app apologist
wilbertheinen wilbertheinen, 2 years ago

Try conditional comments for outlook or use td's with a float left via media queries.

http://www.creativebloq.com/responsive-web-design/build-responsive-emails-2132830
http://labs.actionrocket.co/make_mobile_email_work_in_outlook#more-61
http://labs.actionrocket.co/microsoft-outlook-conditional-statements


Create a Clang!
Redferret, 2 years ago

Ah yes, conditional comments can omit the problem completely, heres an example:

<!--[if mso]>
<table cellspacing='0' cellpadding='0' width='600' align='left'>
<![endif]-->
<!--[if !mso]><!-->
<table cellspacing='0' cellpadding='0' width='200' align='left'>
<!--<![endif]-->
<tr>
<td width="200">
tblA
</td>
<!--[if !mso]><!-->
</tr>
</table>
<table cellspacing='0' cellpadding='0' width='200' align='left'>
<tr>
<!--<![endif]-->
<td width="200">
tblA
</td>
<!--[if !mso]><!-->
</tr>
</table>
<table cellspacing='0' cellpadding='0' width='200' align='left'>
<tr>
<!--<![endif]-->
<td width="200">
tblA
</td>
</tr>
</table>

essentially this changes the first table to full width, and changes each table into a td


Gmail app apologist
wilbertheinen wilbertheinen, 2 years ago

Putting a conditional comment wich ends and start a td between the 1st and 2nd table and between the 2nd and 3rd table will be enough.

<td>
<table>
...
</table>
<!--[if mso]>
</td>
<td>
<![endif]-->
<table>
...
</table>
<!--[if mso]>
</td>
<td>
<![endif]-->
<table>
...
</table>
</td>

Or something like above. Outlook will render 3 td's.


Create a Clang!
Redferret, 2 years ago

^ this way is much better than mine!


Gmail app apologist
Tweedskin Tweedskin, 2 years ago

I've never seen the conditional closing and opening solution before, so will give it a go, but I've always got round the problem by leaving at least 25px space between each table.

cancantona, 2 years ago

http://thegioimuonmau.info/

merfe05, 2 years ago

I too am having this exact same issue - however, because I am using multilevel tables I am not able to utilize this fix. Please see my HTML below for the responsive tables that I need to adjust for Outlook.

Outlook Spacing (notice uneven spacing between tables)
http://fanone.fanonemarketing.com/res/neweratickets/c907ebaf41d722d6523c89af41e8997d.png

Non-Outlook Spacing (notice even spacing)
http://fanone.fanonemarketing.com/res/neweratickets/27701a4976b39645cc4b082e8fb5b97c.png

Any ideas around this?

<div class="block">
   <!-- 3-columns -->  
   <table width="100%" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="3columns">
      <tbody>
         <tr>
            <td valign="top"><P style="mso-table-lspace: 0; mso-table-rspace: 0">
               <table bgcolor="#ffffff" width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth" modulebg="edit">
                  <tbody>
                     <tr>
                        <td width="100%" valign="top"><P style="mso-table-lspace: 0; mso-table-rspace: 0">
                           <table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
                              <tbody>
                                 <tr>
                                   <td height="20" style="padding-top:5px; padding-bottom:5px;"><P style="mso-table-lspace: 0; mso-table-rspace: 0"><HR></P></td>
                                 </tr>
                                 <tr>
                                    <td><P style="mso-table-lspace: 0; mso-table-rspace: 0">
                                       <!-- col 1 -->
                                       <table width="190" align="left" border="0" cellpadding="0" cellspacing="0" class="devicewidth">
                                          <tbody>
                                             <!-- image 2 -->
                                             <tr>
                                                <td width="190" class="devicewidth" align="center">
                                                   <P style="mso-table-lspace: 0; mso-table-rspace: 0"><img src="http://fanone.fanonemarketing.com/res/neweratickets/96a96bcd6297a797701921867c297e58.png" alt="" border="0" width="190" style="display:block; border:none; outline:none; text-decoration:none;" class="col3img"></P></td>
                                             </tr>
                                             <!-- end of image2 -->
                                             <tr>
                                                <td><P style="mso-table-lspace: 0; mso-table-rspace: 0">
                                                   <!-- start of text content table -->  
                                                   <table width="190" align="center" border="0" cellpadding="0" cellspacing="0" class="devicewidthinner">
                                                      <tbody>
                                                         <!-- Spacing -->
                                                         <tr>
                                                            <td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"><P style="mso-table-lspace: 0; mso-table-rspace: 0">&nbsp;</P></td>
                                                         </tr>
                                                         <!-- Spacing -->
                                                         <!-- title2 -->
                                                         <tr>
                                                            <td style="font-family: Helvetica, arial, sans-serif; font-size: 18px; color: #333333; text-align:center;line-height: 20px;" st-title="3col-title1">
                                                               <P style="mso-table-lspace: 0; mso-table-rspace: 0">Insert Title</P></td>
                                                         </tr>
                                                         <!-- end of title2 -->
                                                         <!-- Spacing -->
                                                         <tr>
                                                            <td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"><P style="mso-table-lspace: 0; mso-table-rspace: 0">&nbsp;</P></td>
                                                         </tr>
                                                         <!-- Spacing -->
                                                         <!-- content2 -->
                                                         <tr>
                                                            <td style="font-family: Helvetica, arial, sans-serif; font-size: 13px; color: #95a5a6; text-align:center;line-height: 20px;" st-content="3col-para1">
                                                               <P style="mso-table-lspace: 0; mso-table-rspace: 0">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</P></td>
                                                         </tr>
                                                         <!-- end of content2 -->
                                                         <!-- Spacing -->
                                                         <tr>
                                                            <td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"><P style="mso-table-lspace: 0; mso-table-rspace: 0">&nbsp;</P></td>
                                                         </tr>
                                                         <!-- Spacing -->
                                                         <!-- button -->
                                                         <tr>
                                                           <td style="font-family: Helvetica, arial, sans-serif; font-size: 13px; color: #000000; text-align:center;line-height: 20px;"><P style="mso-table-lspace: 0; mso-table-rspace: 0">Insert Link</P></td>
                                                         </tr>
                                                         <!-- /button -->
                                                      </tbody>
                                                   </table>
                                                </P></td>
                                             </tr>
                                             <!-- end of text content table -->
                                          </tbody>
                                       </table>
                                       <!-- spacing -->
                                       <table width="15" 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;"><P style="mso-table-lspace: 0; mso-table-rspace: 0">&nbsp;</P></td>
                                             </tr>
                                          </tbody>
                                       </table>
                                       <!-- end of spacing -->
                                       <!-- col 2 -->
                                       <table width="190" align="left" border="0" cellpadding="0" cellspacing="0" class="devicewidth">
                                          <tbody>
                                             <!-- image 2 -->
                                             <tr>
                                                <td width="190" align="center" class="devicewidth"><P style="mso-table-lspace: 0; mso-table-rspace: 0">
                                                   <img src="http://fanone.fanonemarketing.com/res/neweratickets/96a96bcd6297a797701921867c297e58.png" alt="" border="0" width="190"style="display:block; border:none; outline:none; text-decoration:none;" class="col3img">
                                                </P></td>
                                             </tr>
                                             <!-- end of image2 -->
                                             <tr>
                                                <td><P style="mso-table-lspace: 0; mso-table-rspace: 0">
                                                   <!-- start of text content table -->  
                                                   <table width="190" align="center" border="0" cellpadding="0" cellspacing="0" class="devicewidthinner">
                                                      <tbody>
                                                         <!-- Spacing -->
                                                         <tr>
                                                            <td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"><P style="mso-table-lspace: 0; mso-table-rspace: 0">&nbsp;</P></td>
                                                         </tr>
                                                         <!-- Spacing -->
                                                         <!-- title2 -->
                                                         <tr>
                                                            <td style="font-family: Helvetica, arial, sans-serif; font-size: 18px; color: #333333; text-align:center;line-height: 20px;" st-title="3col-title2">
                                                              <P style="mso-table-lspace: 0; mso-table-rspace: 0">Insert Title </P></td>
                                                         </tr>
                                                         <!-- end of title2 -->
                                                         <!-- Spacing -->
                                                         <tr>
                                                            <td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"><P style="mso-table-lspace: 0; mso-table-rspace: 0">&nbsp;</P></td>
                                                         </tr>
                                                         <!-- Spacing -->
                                                         <!-- content2 -->
                                                         <tr>
                                                            <td style="font-family: Helvetica, arial, sans-serif; font-size: 13px; color: #95a5a6; text-align:center;line-height: 20px;" st-content="3col-para2">
                                                               <P style="mso-table-lspace: 0; mso-table-rspace: 0">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</P></td>
                                                         </tr>
                                                         <!-- end of content2 -->
                                                         <!-- Spacing -->
                                                         <tr>
                                                            <td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"><P style="mso-table-lspace: 0; mso-table-rspace: 0">&nbsp;</P></td>
                                                         </tr>
                                                         <!-- /Spacing -->
                                                         <!-- button -->
                                                         <tr>
                                                           <td style="font-family: Helvetica, arial, sans-serif; font-size: 13px; color: #000000; text-align:center;line-height: 20px;"><P style="mso-table-lspace: 0; mso-table-rspace: 0">Insert Link</P></td>
                                                         </tr>
                                                         <!-- /button -->
                                                      </tbody>
                                                   </table>
                                                </P></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;"><P style="mso-table-lspace: 0; mso-table-rspace: 0">&nbsp;</P></td>
                                             </tr>
                                          </tbody>
                                       </table>
                                       <!-- end of spacing -->
                                       <!-- col 3 -->
                                       <table width="190" align="right" border="0" cellpadding="0" cellspacing="0" class="devicewidth">
                                          <tbody>
                                             <!-- image3 -->
                                             <tr>
                                                <td width="190" class="devicewidth" align="center"><P style="mso-table-lspace: 0; mso-table-rspace: 0">
                                                   <img src="http://fanone.fanonemarketing.com/res/neweratickets/96a96bcd6297a797701921867c297e58.png" alt="" width="190" border="0" style="display:block; border:none; outline:none; text-decoration:none;" class="col3img">
                                                </P></td>
                                             </tr>
                                             <!-- end of image3 -->
                                             <tr>
                                                <td><P style="mso-table-lspace: 0; mso-table-rspace: 0">
                                                   <!-- start of text content table -->  
                                                   <table width="190" align="center" border="0" cellpadding="0" cellspacing="0" class="devicewidthinner">
                                                      <tbody>
                                                         <!-- Spacing -->
                                                         <tr>
                                                            <td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"><P style="mso-table-lspace: 0; mso-table-rspace: 0">&nbsp;</P></td>
                                                         </tr>
                                                         <!-- Spacing -->
                                                         <!-- title -->
                                                         <tr>
                                                            <td style="font-family: Helvetica, arial, sans-serif; font-size: 18px; color: #333333; text-align:center;line-height: 20px;" st-title="3col-title3">
                                                               <P style="mso-table-lspace: 0; mso-table-rspace: 0">Insert Title </P></td>
                                                         </tr>
                                                         <!-- end of title -->
                                                         <!-- Spacing -->
                                                         <tr>
                                                            <td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"><P style="mso-table-lspace: 0; mso-table-rspace: 0">&nbsp;</P></td>
                                                         </tr>
                                                         <!-- Spacing -->
                                                         <!-- content -->
                                                         <tr>
                                                            <td style="font-family: Helvetica, arial, sans-serif; font-size: 13px; color: #95a5a6; text-align:center;line-height: 20px;" st-content="3col-para1">
                                                               <P style="mso-table-lspace: 0; mso-table-rspace: 0">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</P></td>
                                                         </tr>
                                                         <!-- end of content -->
                                                         <!-- Spacing -->
                                                         <tr>
                                                            <td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"><P style="mso-table-lspace: 0; mso-table-rspace: 0">&nbsp;</P></td>
                                                         </tr>
                                                         <!-- Spacing -->
                                                         <!-- button -->
                                                         <tr>
                                                           <td style="font-family: Helvetica, arial, sans-serif; font-size: 13px; color: #000000; text-align:center;line-height: 20px;"><P style="mso-table-lspace: 0; mso-table-rspace: 0">Insert Link</P></td>
                                                         </tr>
                                                         <!-- /button -->
                                                      </tbody>
                                                   </table>
                                                </P></td>
                                             </tr>
                                             <!-- end of text content table -->
                                          </tbody>
                                       </table>
                                   </P></td>
                                    <!-- spacing -->
                                    <!-- end of spacing -->
                                 </tr>
                              </tbody>
                           </table>
                       </P></td>
                     </tr>
                  </tbody>
              </table>
           </P></td>

         </tr>
      </tbody>
  </table>
   <!-- end of 3-columns --> 
</div>

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098