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

</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.

C-g
  • 163
  • 1
  • 1
  • 5

9 Answers9

20

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>
Alex
  • 8,353
  • 9
  • 45
  • 56
  • This doesn't work. Gmail strips styling from all anchors and moves it to a nested span. – Drazen Bjelovuk Jul 24 '15 at 21:15
  • 1
    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. – cptstarling Nov 09 '15 at 15:38
  • @cptstarling In case of an email address, wrap it in `...` with your custom style, and Outlook won't touch it anymore. Same works for phone numbers, but then you use `tel:` instead of `mailto:`. – Jelle Blaauw Nov 30 '17 at 10:28
4

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

Katy
  • 49
  • 1
  • 2
2

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.

Tony Hadley
  • 29
  • 1
  • 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 ! – blissweb Jun 21 '20 at 10:05
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>
Geert
  • 29
  • 1
0

It's a known bug in Outlook that if an anchor tag does not contain a valid URL, the styling defined will likely be ignored.

davidcondrey
  • 34,416
  • 17
  • 114
  • 136
0

No - Don't use Font Tags. Font Tag render differently from one email client-internet browser combination to other. You can test it.

  • Firefox-Yahoo
  • Internet Explorer-Yahoo

Changes in Font tags:

  • Different line heights

  • Different character-word spacing

To avoid this, use always <span style=font-family: or <td style=font-family: ..

Also

Fix for Outlook and other email clients :

<a href="#" style="color:#735a29 !important; text-decoration:none !important; "><span style="color:#735a29; text-decoration:none;>LINK
</span></a>

In this case, outlook ignores !important, but web email clients don't. That's why we should repeat the same CSS declaration twice on and again on the .. bulletproof technique!

user3408238
  • 139
  • 1
  • 2
0

I don't remember where I found this solution, but I put the following CSS within the <head> of my emails (wrapped within a <style> tag of course.

/*outlook links visited state fix*/
span.MsoHyperlink { mso-style-priority:99; color:inherit; }
span.MsoHyperlinkFollowed { mso-style-priority:99; color:inherit; }
josh1978
  • 698
  • 7
  • 19
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>
ajcw
  • 23,604
  • 6
  • 30
  • 47
  • 5
    For future surfers, this is a really bad idea. Outlook 2007+ *ignores* any inline styles marked important. http://www.campaignmonitor.com/blog/post/3143/outlook-2007-and-the-inline-important-declaration/ – Eli Jul 17 '13 at 19:12
  • 2
    !important isn't supported by Outlook and gets stripped out automatically – egr103 Dec 18 '13 at 15:46
  • @Eli You just saved my bacon. Thanks – Brian Moeskau Aug 13 '14 at 15:56
0

I had an big mess with this problem but I found a fine solution.

Let's say that you want to make the link red with no special styling for a hover situation:

a:link{color: red}
a:visited{color: red}
a:hover{color: red}
a:active{color: red}

If you miss anyone of these 4 statements or make it in another order this might cause your link styling not to work. It works in a gmail client as well.

Lars Ljungqvist
  • 1
  • 1