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>
</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 </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> </td>
<td colspan=2>[checkout]</td></tr></table>
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.
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.
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.
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).
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With