border width discrepancy for Outlook HTML emails

Question

I am creating a html email, and I need to add some vertical spacing between my tables. In order to get round the problem of margin-top and margin-bottom not being supported in Outlook 2007, 2010 and 2013 I decided to add spacing between my tables be using the fully supported border style.

I added a border to the bottom of my table, and ran it through premailer to get the following inline style:

<table align="center" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; width: 600px; border-bottom-width: 20px; border-bottom-color: #f3f2ef; background-color: white; border-style: none none solid;" bgcolor="white">

This works, however the border width for Outlook 2007, 2010 and 2013 is considerably less than for other email clients. I put the result into photoshop, and measured it at 8px, where it should be 20px.

Can anyone tell me what is causing this discrepancy please?

Answer 1

I may have an alternate solution if you're willing to let go of using border.

In my experience, border is unreliable, so I usually use a transparent spacer gif in a td, like this:

<tr>
  <td bgcolor="#f3f2ef">
    <img src="http://www.yourdomain.com/images/spacer.gif" style="display:block;" width="1" height="20" alt="">
  </td>
</tr>

Make this as the last row in your table and you should be set.

Answer 2

You can get around using spacer gifs by creating tables with   inside them. Example:

<table width="600" cellpadding="0" cellspacing="0" align="left">
  <tr>
    <td width="20" bgcolor="#959595">&nbsp;</td>
    <td width="560" bgcolor="#959595" style="padding: 0px;">&nbsp;</td>
    <td width="20" bgcolor="#959595">&nbsp;</td>
  </tr>
  <tr>
    <td width="20" bgcolor="#959595">&nbsp;</td>
    <td width="560" bgcolor="#FFFFFF" style="padding: 20px;">&nbsp;<br>Content<br>...<br>&nbsp;</td>
    <td width="20" bgcolor="#959595">&nbsp;</td>
  </tr>
  <tr>
    <td width="20" bgcolor="#959595">&nbsp;</td>
    <td width="560" bgcolor="#959595" style="padding: 0px;">&nbsp;</td>
    <td width="20" bgcolor="#959595">&nbsp;</td>
  </tr>               
</table>

Answer 3

I agree with DevinKoncar that spacerimages sometimes are the only solution, but the last time I had the urge to use this was some years ago. Btw, the naming of these images is important for your spam-rating, so use neither "spacer" nor "pixel", instead name them colorwise (like white.gif). The preview pane for Outlook Online will change the size of your spacerimages, when you haven't downloaded them yet, which is pretty ugly in almost every design. Don't use PNG's: some mailclients (like Lotus Notes) have a problem with the rendering.

If the only thing you want to do is creating a whitespace between two tables, you can just use the BR-tag, no? Just set the font-size and line-heigt in the surrounding table. The only restriction is a BR-tag underneath a table, but between two is never a problem.

Also, you can put a BR-tag as the only content inside a td, and use the font-size and line-height to create the needed height.

    <table cellpadding="0" cellspacing="0" border="0" align="center" width="600"><tr><td bgcolor="#ffffff" style="font-size:20px; line-height:20px;"><br />
        <table cellpadding="0" cellspacing="0" border="0" align="center" width="500"><tr><td bgcolor="#f1f1f1" style="font-size:20px; line-height:20px;">Row 1</td></tr></table><br />
        <table cellpadding="0" cellspacing="0" border="0" align="center" width="500"><tr><td bgcolor="#f1f1f1" style="font-size:20px; line-height:20px;">Row 2</td></tr></table>
    </td></tr></table>