OutLook renders unnecessary space

Question

My HTML is like this

<tr>
        <td align="left" valign="top">
           <table width="590" border="0" cellspacing="0" cellpadding="0">
              <tbody><tr>
                 <td width="296" align="left" valign="top">
                    <table width="285" border="0" align="left" cellpadding="0" cellspacing="0">
                       <tbody><tr>
                           <td height="38" colspan="2" align="left" valign="top">

                               <h2 style="font-size:18px;color:#535353;padding-top:0;font-family:Arial, Helvetica, sans-serif;"><a href="#" style="text-decoration:none;color:#535353;" target="_blank" class="c_nobdr t_prs">Two Column with seperation</a></h2>

                           </td>
                       </tr>
                                                  <tr>
                              <td colspan="2" align="left" valign="top">
                                  <p style="font-size:14px;color:#888888;line-height:22px;font-family:Arial, Helvetica, sans-serif;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tristique nulla lectus, eu porttitor mi porttitor sed. Sed cursus leo eget gravida condimentum. Duis dapibus tempus tortor, vel pellentesque erat Lorem </p>
                              </td>

                       </tr>
                       <tr>
                          <td width="144" height="60" align="center" valign="middle" style="line-height:60px !important;">
                             <strong style="font-size:25px;color:#ed1d21;font-family:Arial, Helvetica, sans-serif;">55.25 KR</strong>
                          </td>
                          <td width="141" align="right" height="50" valign="middle">
                             <a href="#" target="_blank">
                             <img src="https://bay174.mail.live.com/Handlers/ImageProxy.mvc?bicild=&amp;canary=VHTXyKjxqs8yDk0PdNghJS79MbTBdqSBvOPi1wujgZ8%3d0&amp;url=http%3a%2f%2fi5.cmail3.com%2fei%2fr%2f6E%2f4B2%2f850%2f213212%2fcsimport%2fbestil-her_14.png" alt="Bestil Her" width="108" height="34" style="border-width:0;">
                             </a>
                          </td>
                       </tr>
                    </tbody></table>
                 </td>
                 <td width="294" align="right" valign="top">
                    <table width="285" border="0" align="right" cellpadding="0" cellspacing="0">
                       <tbody><tr>
                           <td height="38" colspan="2" align="left" valign="top">

                               <h2 style="font-size:18px;color:#535353;padding-top:0;font-family:Arial, Helvetica, sans-serif;"><a href="#" style="text-decoration:none;color:#535353;" target="_blank">Two Column with seperation</a></h2>

                           </td>
                       </tr>
                       <tr>
                          <td colspan="2" align="left" valign="top">
                             <a href="#" target="_blank">
                             <img src="https://bay174.mail.live.com/Handlers/ImageProxy.mvc?bicild=&amp;canary=VHTXyKjxqs8yDk0PdNghJS79MbTBdqSBvOPi1wujgZ8%3d0&amp;url=http%3a%2f%2fi4.cmail3.com%2fei%2fr%2f6E%2f4B2%2f850%2f213212%2fcsimport%2fthum01_13.gif" alt="Thum01" width="285" height="180" style="border-width:0;">
                             </a>
                       </td></tr>
                       <tr>
                          <td colspan="2" align="left" valign="top">
                             <p style="font-size:14px;color:#888888;line-height:22px;font-family:Arial, Helvetica, sans-serif;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;"></p>
                          </td>
                       </tr>
                    </tbody></table>
                 </td>
              </tr>
           </tbody></table>
        </td>
     </tr>

This works fine everywhere except OutLook 2010 email client. In out look the line breakes and unnecessary space comes. Result in outlook is like this

Expected output is like this Can any one point out whats going wrong?

Answer 1

This looks like the "Outlook Page Break Issue". It is one of the quirks of the Microsoft Word engine that Outlook uses to render html. It adds an invisible break line in there, and if you have anything too tall (like an image) it will bump down. Unfortunately it is unavoidable, so you just have to design around it.

Good news for you is that your sections are rather small. Try adding or removing 30-60 pixels somewhere in your design above the trouble area. The break point would then fall above or below your image, preventing it from being pushed down.