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

Question

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;}

</style>

.ExternalClass seems to be setting the values for the a tag, but my inline styling doesn't appear to be overwriting what Outlook is adding to the email.

I've tried creating a stylesheet in the head section, and even in the body section, but this does nothing.

Does anyone know a fix for this? I either want rid of the underline, or even just have the underline display in the color I have specified for links.

Thanks to anyone who can help.

Answer 1

Update: This answer was correct at the time of writing in 2012 but doesn't seem to work anymore.

Wrap your text with a <span> tag with a style attribute.

You should also be using <font> to be extra careful.

For example:

<a style="color:#E3A216; text-decoration:none;">
  <span style="color:#E3A216;">
    <font color="#E3A216">
      Click me
    </font>
  </span>
</a>