Alex Rivera | Logout

Outlook 2007 changes link styles in a HTML email to have a blue underline when sent to Hotmail, Gmail, etc. Any fixes?

Asked 2010-11-10T16:09:00.587
16

I've been using the HTML email templates that I obtained from http://www.campaignmonitor.com/templates/ And on every example I have gone through, when I send an email using the HTML template, all the links are given the horrible default blue underline. The emails are being sent using Outlook 2007 and when they are viewed in Outlook they are fine. However, in Hotmail and Gmail, this blue underline persists regardless of what color the text is.

I've tried inline styling of the a tag like so: 

<a href="./" style="color: #E3A216; text-decoration: none;">Mauris commodo hendrerit risus</a>

If I use the exact same HTML email template code and send it from my hotmail account to another hotmail account it works perfectly. So, to me this is an Outlook 2007 issue.

I was able to dissect the html that outlook sends to the hotmail recipient and found that Outlook attaches a stylesheet on top of the HTML code. This is what it sends: 

<style>
.ExternalClass .ecxshape
{;}
</style>

<style>
.ExternalClass p.ecxMsoNormal, .ExternalClass li.ecxMsoNormal, .ExternalClass div.ecxMsoNormal
{margin-bottom:.0001pt;font-size:11.0pt;font-family:'Calibri','sans-serif';}
.ExternalClass a:link, .ExternalClass span.ecxMsoHyperlink
{color:blue;text-decoration:underline;}
.ExternalClass a:visited, .ExternalClass span.ecxMsoHyperlinkFollowed
{color:purple;text-decoration:underline;}
.ExternalClass p.ecxMsoAcetate, .ExternalClass li.ecxMsoAcetate, .ExternalClass div.ecxMsoAcetate
{margin-bottom:.0001pt;font-size:8.0pt;font-family:'Tahoma','sans-serif';}
.ExternalClass span.ecxEmailStyle17
{font-family:'Calibri','sans-serif';color:windowtext;}
.ExternalClass span.ecxBalloonTextChar
{font-family:'Tahoma','sans-serif';}
.ExternalClass .ecxMsoChpDefault
{;}
@page WordSection1
{size:612.0pt 792.0pt;}
.ExternalClass div.ecxWordSection1
{page:WordSection1
html css email stylesheet outlook-2007
Edit
Report

2 Answers

2

Actually, inline-styles are the only way to style your text, but the best way is to declare it several times. Using the FONT-tag as mentioned above doesn't do the trick for all email clients.

The correct way to use the FONT-tag for HTML emails:

<font face="Arial, Helvetica, sans-serif" size="1" color="#333333" style="font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#333333">Example of styled text.</font>

The best way to style your text, is by doing as this:

<table cellpadding="0" cellspacing="0" border="0" align="center" width="600">
  <tr>
    <td width="600" bgcolor="#ffffff" align="left" style="font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#333333;">
      <a href="#" style="color:#333333; text-decoration:underline;"><span style="color:#333333;">Example of styled linktext.</span></a>
    </td>
  </tr>
</table>

I put an extra style in the head, which apply in Outlook (but not in Gmail):

<style type="text/css">
  a, a:link, a:visited { color:#333333; }
</style>
answered 2012-08-24T13:01:33.057
0

If your problem is as simple as not being able to override the Outlook stylesheet you should try the !important declaration with your inline styles, e.g.

<a href="./" style="color: #E3A216 !important; text-decoration: none !important;">Mauris commodo hendrerit risus</a>
answered 2010-11-10T17:18:32.850

Your Answer