border in html email doesn't show up in outlook 2010, but works in Thunderbird

Question

I have the following code in my html email.. it's inside a table field:

<span class=solid style="width:100%;height:5px;border-top:1px solid #f89d30;display:inline-block;"></span>

Now, this 'orange line' does show up in html email when it's send to Thunderbird, but a recipient that uses Outlook 2010 doesn't see the line.

And yes, I know there is another thread about this, but I tried that solution (only difference I saw was that I had display:block instead of display:inline-block;).. and it didn't work.

Any other suggestions?

table:

<table border=0 cellpadding=5 cellspacing=0 style="font:300 15px/1.625 'Helvetica Neue',Helvetica,Arial,sans-serif">
<tr><td colspan=5><span class=solid style="width:100%;height:1px;border-top:1px solid #f89d30;display:inline-block;"></span></td></tr>
      <tr>
        <td nowrap style="font-size:12px;" colspan=2>Item Description</td>
        <td width=50 nowrap style="font-size:12px;">Price</td>
        <td width=50 style="font-size:12px;">Quantity</td>
        <td width=50 nowrap style="font-size:12px;">Sub Total</td>
      </tr><tr><td colspan=5><span class=solid style="width:100%;height:5px;border-top:1px solid #f89d30;display:inline-block;"></span></td></tr>
  <tr>
    <td valign=top>&nbsp;
    </td><td style="font-size: 10px;" nowrap valign=top><h2 style="margin:0;">Vitamin C </h2></td>
<td nowrap valign=top>$39.95</td>
<td nowrap valign=top><input type="text" name="qty1" value="3"  size=2 readonly=readonly></td>
<td nowrap valign=top>$1.00&nbsp;&nbsp;</td></tr><tr><td colspan=5><span class=solid style="width:100%;height:5px;border-top:1px solid #f89d30;display:block;"></span></td></tr>
    <tr><td colspan=4>Order Subtotal</td><td>$1.00</td></tr>
<tr><td colspan=3></td><td colspan=2><span class=solid style="width:100%;height:5px;border-top:1px dashed #f89d30;display:inline-block;"></span></td></tr>
<tr><td colspan=3></td><td colspan=2><span class=solid style="width:100%;height:5px;border-top:1px solid #f89d30;display:inline-block;"></span></td></tr>
<tr><td colspan=5><span class=solid style="width:100%;height:5px;border-top:1px solid #f89d30;display:inline-block;"></span></td></tr>
<tr><td colspan=3>&nbsp;</td>
<td colspan=2>[checkout]</td></tr></table>

Answer 1

When the table does not appear in the emails.

I spent a lot of time researching and in the end I found the solution.

Here I leave a code that has served me in Outlook emails and iMac Mail.

To show the table:

<table rules="all" bordercolor="#4d4c4d" border="1" bgcolor="#FFFFFF" cellpadding="10"  align="center" width="800">
</table >

I hope it serves you.

Answer 2

@Malachi you also need to include a background colour for your <td>

so

<td bgcolor="#da5903" style="height:5px;">
  <img src="mydomain.com/orangepixel.gif" alt="" />

The gif is there purely to make the TD behave and fix to the right height. Background images are not always supported, so it is safer to use an IMG, the reason it is transparent is because you use the background colour on the TD, the image is purely to fix the height.

Answer 3

This might not be a complete answer, as I don't have access to an outlook 2010 client (see edit below), but here is my best attempt:

According to this, the display style property is not supported in outlook 2010:

http://campaignmonitor.cachefly.net/assets/files/css/campaign-monitor-guide-to-css-in-email-jan-2013.pdf?ver=1252

Since <span> is an inline element, and since display doesn't work in outlook 2010, then giving an inline element a border might not be supported in outlook 2010. Try to switch it to a div (or better, put the border-top style on the tr / td )

eg

 <tr><td colspan="5"><div class="solid" style="width:100%;height:1px;border-top:1px solid #f89d30;"></div></td></tr>

EDIT: just tested it on outlook 2010, it didn't do the trick. What always worked for me for outlook, is to use a tr and td with height 1px, no padding or margin / spacing, and a 1px clear pixel image (or &nbsp and a very small font size)

Answer 4

It seems you could put the border on the TD instead of the SPAN, that works in OL 2010. I added:

.solid1 {border-top:1px solid #f89d30;}
.dashed1 {border-top:1px dashed #f89d30;}

used those in the TD that encloses the span, deleted the spans completely and replaced them with   and now it looks the same in outlook as it does in browser (and the same as your original html).