Outlook putting in unwanted spacing

If anyone can help I'll be so grateful as I am running out of ideas. Have created a template which appears like this in Outlook 2007. Please note that there are supposed to be images above each column, but these haven't been added yet. The problem is the 3rd column with the break in the text block.

http://demo.theglobalgroup-test.co.uk/wp-content/uploads/2015/02/Screenshot.png

And this is the code for that section which isn't displaying correctly -

<div class="block">
   <!-- 3-columns -->  
   <table width="95%" bgcolor="#f6f4f5" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="3columns">
      <tbody>
         <tr>
            <td>
               <table bgcolor="#ffffff" width="580" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth" modulebg="edit">
                  <tbody>
                     <tr style="page break before:always">
                        <td width="95%" height="20"></td>
                     </tr>
                     <tr>
                        <td>
                           <table width="540" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
                              <tbody>
                                 <tr>
                                    <td>
                                       <!-- col 1 -->
                                       <table width="165" align="left" border="0" cellpadding="0" cellspacing="0" class="devicewidth">
                                          <tbody>
                                             <!-- image 2 -->
                                             <tr style="page break before:always">
                                                <td width="165" height="128" align="left" class="devicewidth">
                                                   <img editable src="" alt="" border="0" width="165" height="128" style="display:block; border:none; outline:none; text-decoration:none;" class="col3img">
                                                </td>
                                             </tr>
                                             <!-- end of image2 -->
                                             <tr>
                                                <td>
                                                   <!-- start of text content table -->  
                                                   <table width="165" align="left" border="0" cellpadding="0" cellspacing="0" class="devicewidthinner">
                                                      <tbody>
                                                         <!-- Spacing -->
                                                         <tr style="page break before:always">
                                                            <td width="100%" height="15" style="font-size:0px; line-height:0px; mso-line-height-rule: exactly;">&nbsp;</td>
                                                         </tr>
                                                         <!-- Spacing -->
                                                         <!-- title2 -->
                                                         <tr>
                                                            <td style="font-family: Helvetica, arial, sans-serif; font-size: 18px; color: #00aedf; font-weight: bold; text-align:left;line-height: 20px;" st-title="3col-title1">
                                                               <singleline label='heading'>Lorem Ipsum</singleline>
                                                            </td>
                                                         </tr>
                                                         <!-- end of title2 -->
                                                         <!-- Spacing -->
                                                         <tr style="page break before:always">
                                                            <td width="100%" height="5" style="font-size:0px; line-height:0px; mso-line-height-rule: exactly;">&nbsp;</td>
                                                         </tr>
                                                         <!-- Spacing -->
                                                         <!-- content2 -->
                                                         <tr style="page break before:always">
                                                            <td style="font-family: Helvetica, arial, sans-serif; font-size: 13px; color: #95a5a6; text-align:left;line-height: 20px;" st-content="3col-para1">
                                                               <multiline label='copy'>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</multiline>
                                                            </td>
                                                         </tr>
                                                         <!-- end of content2 -->
                                                         <!-- Spacing -->
                                                         <tr style="page break before:always">
                                                            <td width="100%" height="15" style="font-size:0px; line-height:0px; mso-line-height-rule: exactly;">&nbsp;</td>
                                                         </tr>
                                                         <!-- Spacing -->
                                                         <!-- button -->
                                                         <tr>
                                                            <td>
                                                               <table height="30" align="left" valign="middle" border="0" cellpadding="0" cellspacing="0" class="tablet-button" st-button="edit">
                                                                  <tbody>
                                                                     <tr>
                                                                        <td width="auto" align="left" valign="middle" height="30" style=" background-color:#00adef; border-top-left-radius:4px; border-bottom-left-radius:4px; border-top-right-radius:4px; border-bottom-right-radius:4px;background-clip: padding-box;font-size:13px; font-family:Helvetica, arial, sans-serif; text-align:center;  color:#ffffff; font-weight: 300; padding-left:18px; padding-right:18px;">
                                                                        
                                                                           <span style="color: #ffffff; font-weight: 300;">
                                                                              <a style="color: #ffffff; text-align:center;text-decoration: none;" href="#"><singleline label='button'>Read More</singleline></a>
                                                                           </span>
                                                                        </td>
                                                                     </tr>
                                                                  </tbody>
                                                               </table>
                                                            </td>
                                                         </tr>
                                                         <!-- /button -->
                                                      </tbody>
                                                   </table>
                                                </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 style="page break before:always">
                                                <td width="10%" height="10" style="font-size:0px; line-height:0px; mso-line-height-rule: exactly;">&nbsp;</td>
                                             </tr>
                                          </tbody>
                                       </table>
                                       <!-- end of spacing -->
                                       <!-- col 2 -->
                                       <table width="165" align="left" border="0" cellpadding="0" cellspacing="0" class="devicewidth">
                                          <tbody>
                                             <!-- image 2 -->
                                             <tr style="page break before:always">
                                                <td width="165" height="128" align="left" class="devicewidth">
                                                   <img editable src="" alt="" border="0" width="165" height="128" style="display:block; border:none; outline:none; text-decoration:none;" class="col3img">
                                                </td>
                                             </tr>
                                             <!-- end of image2 -->
                                             <tr>
                                                <td>
                                                   <!-- start of text content table -->  
                                                   <table width="165" align="left" border="0" cellpadding="0" cellspacing="0" class="devicewidthinner">
                                                      <tbody>
                                                         <!-- Spacing -->
                                                         <tr style="page break before:always">
                                                            <td width="100%" height="15" style="font-size:0px; line-height:0px; mso-line-height-rule: exactly;">&nbsp;</td>
                                                         </tr>
                                                         <!-- Spacing -->
                                                         <!-- title2 -->
                                                         <tr>
                                                            <td style="font-family: Helvetica, arial, sans-serif; font-size: 18px; color: #00aedf; font-weight: bold; text-align:left; line-height: 20px;" st-title="3col-title2">
                                                               <singleline label='heading'>Lorem Ipsum</singleline>
                                                            </td>
                                                         </tr>
                                                         <!-- end of title2 -->
                                                         <!-- Spacing -->
                                                         <tr style="page break before:always">
                                                            <td width="100%" height="5" style="font-size:0px; line-height:0px; mso-line-height-rule: exactly;">&nbsp;</td>
                                                         </tr>
                                                         <!-- Spacing -->
                                                         <!-- content2 -->
                                                         <tr style="page break before:always">
                                                            <td style="font-family: Helvetica, arial, sans-serif; font-size: 13px; color: #95a5a6; text-align:left;line-height: 20px;" st-content="3col-para2">
                                                               <multiline label='copy'>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</multiline>
                                                            </td>
                                                         </tr>
                                                         <!-- end of content2 -->
                                                         <!-- Spacing -->
                                                         <tr style="page break before:always">
                                                            <td width="100%" height="15" style="font-size:0px; line-height:0px; mso-line-height-rule: exactly;">&nbsp;</td>
                                                         </tr>
                                                         <!-- /Spacing -->
                                                         <!-- button -->
                                                         <tr>
                                                            <td>
                                                               <table height="30" align="left" valign="middle" border="0" cellpadding="0" cellspacing="0" class="tablet-button" st-button="edit">
                                                                  <tbody>
                                                                     <tr>
                                                                        <td width="auto" align="left" valign="middle" height="30" style=" background-color:#00adef; border-top-left-radius:4px; border-bottom-left-radius:4px; border-top-right-radius:4px; border-bottom-right-radius:4px;background-clip: padding-box;font-size:13px; font-family:Helvetica, arial, sans-serif; text-align:center;  color:#ffffff; font-weight: 300; padding-left:18px; padding-right:18px;">
                                                                        
                                                                           <span style="color: #ffffff; font-weight: 300;">
                                                                              <a style="color: #ffffff; text-align:center;text-decoration: none;" href="#"><singleline label='button'>Read More</singleline></a>
                                                                           </span>
                                                                        </td>
                                                                     </tr>
                                                                  </tbody>
                                                               </table>
                                                            </td>
                                                         </tr>
                                                         <!-- /button -->
                                                      </tbody>
                                                   </table>
                                                </td>
                                             </tr>
                                             <!-- end of text content table -->
                                          </tbody>
                                       </table>
                                       <!-- end of col 2 -->
                                   
                                       <!-- spacing -->
                                       <table width="23" align="left" border="0" cellpadding="0" cellspacing="0" class="removeMobile">
                                          <tbody>
                                             <tr style="page break before:always">
                                                <td width="100%" height="10" style="font-size:0px; line-height:0px; mso-line-height-rule: exactly;">&nbsp;</td>
                                             </tr>
                                          </tbody>
                                       </table>
                                       <!-- end of spacing -->
 
                                       <!-- col 3 -->
                                       <table width="165" align="right" border="0" cellpadding="0" cellspacing="0" class="devicewidth">
                                          <tbody>
                                             <!-- image3 -->
                                             <tr style="page break before:always">
                                                <td width="165" height="128" align="left" class="devicewidth">
                                                   <img editable src="" alt="" width="165" height="128" border="0" style="display:block; border:none; outline:none; text-decoration:none;" class="col3img">
                                                </td>
                                             </tr>
                                             <!-- end of image3 -->
                                             <tr style="page break before:always">
                                                <td>
                                                   <!-- start of text content table -->  
                                                   <table width="165" align="left" border="0" cellpadding="0" cellspacing="0" class="devicewidthinner">
                                                      <tbody>
                                                         <!-- Spacing -->
                                                         <tr style="page break before:always">
                                                            <td width="100%" height="15" style="font-size:0px; line-height:0px; mso-line-height-rule: exactly;">&nbsp;</td>
                                                         </tr>
                                                         <!-- Spacing -->
                                                         <!-- title -->
                                                         <tr style="page break before:always">
                                                            <td style="font-family: Helvetica, arial, sans-serif; font-size: 18px; color: #00aedf; text-align:left; font-weight: bold; line-height: 20px;" st-title="3col-title3">
                                                               <singleline label='heading'>Lorem Ipsum</singleline>
                                                            </td>
                                                         </tr>
                                                         <!-- end of title -->
                                                         <!-- Spacing -->
                                                         <tr style="page break before:always">
                                                            <td width="100%" height="5" style="font-size:0px; line-height:0px; mso-line-height-rule: exactly;">&nbsp;</td>
                                                         </tr>
                                                         <!-- Spacing -->
                                                         <!-- content -->
                                                         <tr style="page break before:always">
                                                            <td style="font-family: Helvetica, arial, sans-serif; font-size: 13px; color: #95a5a6; text-align:left;line-height: 20px;" st-content="3col-para1">
                                                               <multiline label='copy'>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</multiline>
                                                            </td>
                                                         </tr>
                                                         <!-- end of content -->
                                                         <!-- Spacing -->
                                                         <tr style="page break before:always">
                                                            <td width="95%" height="15" style="font-size:0px; line-height:0px; mso-line-height-rule: exactly;">&nbsp;</td>
                                                         </tr>
                                                         <!-- Spacing -->
                                                         <!-- button -->
                                                         <tr style="page break before:always">
                                                            <td>
                                                               <table height="30" align="left" valign="middle" border="0" cellpadding="0" cellspacing="0" class="tablet-button" st-button="edit">
                                                                  <tbody>
                                                                     <tr>
                                                                        <td width="auto" align="left" valign="middle" height="30" style=" background-color:#00adef; border-top-left-radius:4px; border-bottom-left-radius:4px;border-top-right-radius:4px; border-bottom-right-radius:4px; background-clip: padding-box;font-size:13px; font-family:Helvetica, arial, sans-serif; text-align:center;  color:#ffffff; font-weight: 300; padding-left:18px; padding-right:18px;">
                                                                        
                                                                           <span style="color: #ffffff; font-weight: 300;">
                                                                              <a style="color: #ffffff; text-align:center;text-decoration: none;" href="#"><singleline label='button'>Read More</singleline></a>
                                                                           </span>
                                                                        </td>
                                                                     </tr>
                                                                  </tbody>
                                                               </table>
                                                            </td>
                                                         </tr>
                                                         <!-- /button -->
                                                      </tbody>
                                                   </table>
                                                </td>
                                             </tr>
                                             <!-- end of text content table -->
                                          </tbody>
                                       </table>
                                    </td>
                                    <!-- spacing -->
                                    <!-- end of spacing -->
                                 </tr>
                              </tbody>
                           </table>
                        </td>
                     </tr>
                     <tr style="page break before:always">
                        <td width="100%" height="20"></td>
                     </tr>
                  </tbody>
               </table>
            </td>
         </tr>
      </tbody>
   </table>
   <!-- end of 3-columns --> 
</div>

Any ideas?

roshodgekiss roshodgekiss, 1 year ago

Hi there, tash21 - thanks for getting in touch and sorry to hear you're having these Outlook 2010 issues. This unfortunately sounds like a known Outlook 2007 / 2010 specific bug at present, as these email clients use 'text boundaries', which differ slightly from 'page breaks. Text boundaries are used to separate elements within the web layout for purposes of printing and don't actually output any HTML code.

It seems that within Outlook, text boundaries stretch to a maximum height of 23.7 inches (aprox. 1,790 pixels) before it automatically inserts a partition line and creates a new text boundary. Therefore, because your campaign is quite long, this is just why Outlook may be generating this unwanted space for you here.

You might want to check out this article by Email on Acid which describes some possible fixes - let us know how you go!


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

Join 150,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