0

So, I'm having issues with Outlook 2007/2010 spacing (border collapse?) issue.

Here is an image as to what it is doing (the Hurry Now.. text gets pushed down)

Here is what it is supposed to look like & works fine in all other email clients.

Here is my snippet of code for the Hero section

<table cellpadding="0" cellspacing="0" width="561" align="center" bgcolor="#4b88cf" style="font-family: Tahoma, Arial, Verdana, sans-serif; font-size:40px; font-weight:normal; line-height:40px; text-align:left; color:#ffffff; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
    <tr>
        <td width="561" height="37" style="font-size: 0; line-height: 0" bgcolor="#4b88cf"> &nbsp;</td>
    </tr> <!-- end spacer --> 
    <tr> 
        <td height="48" valign="top" style="color: #ffffff;"><font color="#ffffff">Save 10% on all</font></td> 
    </tr> <!-- heading -->
    <tr> 
        <td height="48" valign="top" style="color: #ffffff;"><font color="#ffffff">EasyACCT 2013 products.</font></td> 
    </tr> <!-- heading -->
    <tr> 
        <td height="48" valign="top" style="color: #ffffff;"><font color="#ffffff">Only 4 days left!</font></td> 
    </tr> <!-- heading -->
    <tr>
        <td width="561" height="25" style="font-size: 0; line-height: 0" bgcolor="#4b88cf"> &nbsp;</td>
    </tr> <!-- spacer here -->
    <!-- start button --> 
    <tr>
        <td>
            <table cellpadding="0" cellspacing="0" align="left" style="font-family: Tahoma, Arial, Verdana, sans-serif; font-size:14px; font-weight:normal; line-height:20px; text-align:left; color:#ffffff; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
                <tr>
                    <td style="border-collapse: collapse;"><img src="http://intuit.pistonclients.com/13-intu-r-1629/images/left-btn.png" border="0" style="display: block;" alt="left side button"/></td> <!-- left side button -->
                    <td align="center" style="font-weight: bold; border-collapse: collapse;" bgcolor="#f0640f"><a href="http://accountants.intuit.com/accounting/lp/quickbooks/easyacct-renew.jsp?s_cid=EM" style="text-decoration: none;"><font color="#ffffff" style="text-decoration: none;">Renew Now to Save 10%</font></a></td> 
                    <td style="border-collapse: collapse;"><img src="http://intuit.pistonclients.com/13-intu-r-1629/images/right-btn.png" border="0" style="display: block;" alt="right side button"/></td> <!-- right side button -->
                </tr>
            </table>
        </td>
    </tr>
    <!-- end button -->
    <tr>
        <td width="561" height="15" style="font-size: 0; line-height: 0; border-collapse: collapse;" bgcolor="#4b88cf">&nbsp;</td>
    </tr> <!-- spacer here -->
    <tr>
        <td valign="top" width="561" style="font-size: 18px; color: #ffffff; border-collapse: collapse;"><font color="#ffffff">Hurry, offer ends October 31!</font><sup style="font-size: 12px; line-height: 0; vertical-align: 8px"><font color="#ffffff">1</font></sup></td>
    </tr> 
    <tr>
        <td width="561" height="23" style="font-size: 0; line-height: 0; border-collapse: collapse;" bgcolor="#4b88cf">&nbsp;</td>
    </tr> <!-- spacer here -->
</table>
Glorfindel
  • 21,988
  • 13
  • 81
  • 109
mhy
  • 11
  • 1
  • 4
  • possible duplicate of [Inconsistent spaces below TD elements in tables in HTML email in Outlook (2007 and 2010)](http://stackoverflow.com/questions/6520731/inconsistent-spaces-below-td-elements-in-tables-in-html-email-in-outlook-2007-a) – Jacques ジャック Oct 13 '13 at 01:49

3 Answers3

1

This is a problem I've come across with Outlook 2007,2010 and of course 2013. They don't like small cells.

I've found this code has worked for me and gone through Litmus tests.

<tr height="1">
   <td width="482" height="1" align="left" valign="top" background="#000000" style="background:#000000;font-size: 1px; line-height: 0px; mso-line-height-rule: exactly;">&nbsp;</td>
</tr>

The mso-line-height-rule: exactly; is an outlook specific style. The font-size: 1px should match however much height you want your cell to be. The line-height: 0px; zero's out any line-height space.

HOWEVER, after testing your code snippet with the updated cells this doesn't seem to be the actual problem. I made the spacer cells black so I could better see what was actually going on.

code with spacer cells made black

The black spacer cell ends well above the copy, ie. it's not pushing your text down. The issue is actually the cell with the white copy in it.

I added a line height to the cell and removed the border-collapse:collapse; (you don't need it on individual cells. You may just want to double check your superscripts are all good.

    <tr>
    <td valign="top" width="561" style="font-size: 18px; line-height: 20px; color: #ffffff;"><font color="#ffffff">Hurry, offer ends October 31!<sup style="font-size: 12px; line-height: 0; vertical-align: 8px"><font color="#ffffff">1</font></sup></font></td>
</tr>

This was the result:

enter image description here

Hope that helps.

Community
  • 1
  • 1
Terri Swiatek
  • 489
  • 2
  • 11
  • 21
0

Outlook has a minimum cell height of 19px, so the 15px cell you have as the spacer in seems to be expanding, evern though you have the font-size and line-height zero'd out.

An alternative way to do it, is instead of having your text sandwiched between two spacer rows, make 1 taller row and vertically center it instead:

<tr>
    <td valign="middle" width="561" height="50" style="font-size: 18px; color: #ffffff; border-collapse: collapse;"><font color="#ffffff">Hurry, offer ends October 31!</font><sup style="font-size: 12px; line-height: 0; vertical-align: 8px"><font color="#ffffff">1</font></sup></td>
</tr>

Throughout your whole email, you don't really need separate rows for each line of text, just use <br> instead to separate the rows.

John
  • 11,985
  • 3
  • 45
  • 60
0

I agree with John. Just use the breaks to create vertical whitespace. You're making it more difficult for yourself, without any reason :-) Just put the right attributes at their right place: your use of the font-tag is overwhelming, as is the border-collapse:collapse and the font-size:0; line-height:0;.

If you want to create a whitespace, give a height at the TD (20px) and style="font-size:20px; line-height:20px;", with a BR-tag inside (no nbsp).

See my example:

    <table cellpadding="0" cellspacing="0" border="0" width="561" align="center" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
        <tr><td bgcolor="#4b88cf" align="left" style="font-family:Tahoma, Arial, Verdana, sans-serif; font-size:40px; line-height:46px; color:#ffffff;"><br />Save 10% on all<br />EasyACCT 2013 products.<br />Only 4 days left!<br /><br /></td></tr>
        <tr><td bgcolor="#4b88cf"><table cellpadding="0" cellspacing="0" border="0" align="left"><tr>
            <td width="12" height="50" bgcolor="#f0640f"><img src="http://intuit.pistonclients.com/13-intu-r-1629/images/left-btn.png" width="12" height="50" alt="" border="0" style="display:block;" /></td>
            <td bgcolor="#f0640f" align="center" style="font-family:Tahoma, Arial, Verdana, sans-serif; font-size:14px; line-height:20px; color:#ffffff;"><a href="http://accountants.intuit.com/accounting/lp/quickbooks/easyacct-renew.jsp?s_cid=EM" style="color:#ffffff; text-decoration:none;"><strong style="color:#ffffff;">Renew Now to Save 10%</strong></a></td>
            <td width="14" bgcolor="#f0640f"><img src="http://intuit.pistonclients.com/13-intu-r-1629/images/right-btn.png" width="14" height="50" alt="" border="0" style="display:block;" /></td>
        </tr></table></td></tr>
        <tr><td bgcolor="#4b88cf" style="font-family:Tahoma, Arial, Verdana, sans-serif; font-size:18px; line-height:20px; color:#ffffff;"><br />Hurry, offer ends October 31!<sup style="font-size:12px; line-height:0; vertical-align:8px">1</sup><br /><br /></td></tr></table>
Lucas Zamboulis
  • 2,494
  • 5
  • 24
  • 27
nizrab
  • 1
  • 1