Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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>
like image 976
Malachi Avatar asked Sep 12 '13 22:09

Malachi


People also ask

Why isn't my border showing up in HTML?

If you've set the shorthand border property in CSS and the border is not showing, the most likely issue is that you did not define the border style. While the border-width and border-color property values can be omitted, the border-style property must be defined. Otherwise, it will not render.

How do I show borders in Outlook?

Click the "Format Text" tab and then click the small arrow next to the Border icon in the Paragraph group. Choose "Borders and Shading" from the menu.


2 Answers

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.

like image 100
Lyovo Graphics Avatar answered Sep 30 '22 00:09

Lyovo Graphics


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 &nbsp; and now it looks the same in outlook as it does in browser (and the same as your original html).

like image 31
Jon B Avatar answered Sep 29 '22 23:09

Jon B