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>

Solution 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.

Solution 2

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).

Solution 3

@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.