CODEWITHSUNDEEP
htmlcssoutlook
nxl904
nxl904

Reputation: 1

How can i get a border element to render in Outlook 2010?

I am trying to get the following HTML to fully render in Outlook 2010 fake a button (since outlook doesn't render many css selectors). :

<table style="border: solid; background-color: red;">
<tbody >
<tr>
<td><a style = "text-decoration:none"href="www.google.com"  ><span style="color: black;">here</span></a></td>
</tr>
</tbody>
</table>

Everything seems to work except the border lining does not render at all. From what I understand, outlook should render this (http://www.campaignmonitor.com/css/), but does not. Any help anyone can provide would be appreciated.

Upvotes: 0

Views: 367

Answers (1)

adaam
adaam

Reputation: 3706

I usually just use shorthand css properties for borders like so:

<table cellspacing="0" cellpadding="0"> <tr> 
<td align="center" width="300" height="40" bgcolor="#fff" style="-webkit-border-radius: 5px; -moz-border-radius: 5px;  border: solid 1px #e9e9e9; border-radius: 5px; color: #000; display: block;">
<a href="http://www.EXAMPLE.com/" style="color: #000; font-size:16px; font-weight: bold; font-family: Helvetica, Arial, sans-serif; text-decoration: none; line-height:40px; width:100%; display:inline-block">
Awesome Email Button
</a>
</td> 
</tr> 
</table>

(Weirdly) for some reason shorthand border css properties render correctly in Outlook 07 and 2010

See http://jsfiddle.net/E6ZYz/

Reference link: http://emailwizardry.nightjar.com.au/2012/08/30/outlook-200710-borders-pain/

Upvotes: 1

Related Questions