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.

Solution 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>

Solution 2

To get rid of the blue in Gmail just change the color from #000000 to #000001. Gmail makes all black links blue.

Solution 3

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>

Solution 4

You should not be using styles, inline or otherwise, in email templates. Deprecated code is the order of the day and the underline on the font is avoided by (in)correctly applying the font-colour declaration around the link itself, even if it is already inside a font declaration for the surrounding text. Example:

<font face="Arial, Helvetica, sans-serif" color="#ffffff" size="2">Some non link text here followed by <a href="http://www.yourlink.com" target="_blank"><font color="#ffffff"><u><em>the text for the link here surrounded by the font style specifically for the link</em></u></font></a> irrespective of the text that surrounds it</font>

Enjoy. HTML emails are very backward in the way that they have to be constructed in order to satisfy all email clients.

View more solutions

Comments

[Eli]

For future surfers, this is a really bad idea. Outlook 2007+ ignores any inline styles marked important. campaignmonitor.com/blog/post/3143/…

[egr103]

!important isn't supported by Outlook and gets stripped out automatically

[Brian Moeskau]

@Eli You just saved my bacon. Thanks

[Drazen Bjelovuk]

This doesn't work. Gmail strips styling from all anchors and moves it to a nested span.

[cptstarling]

It works when you work with a link on regular words, but if you use a domain name or an e-mail address as readable text (so not just as a link behind a word), it will printed in blue nonetheless.

[Sander Schaeffer]

You are missing a " on the SPAN style. :)

[Jelle Blaauw]

@cptstarling In case of an email address, wrap it in <a href="mailto:...">...</a> with your custom style, and Outlook won't touch it anymore. Same works for phone numbers, but then you use tel: instead of mailto:.

[josh1978]

@Cyntech thanks. I updated with the solution I now use.

[blissweb]

Doesn't matter about how deprecated this is ... it seems to be the ONLY thing that works on Outlook for Android as of 2020. Also works in Gmail for Android. Hooray !

[rakeden]

literally saying Outlook in the headline :)