4

I've created HTML mailers before, but I just cannot figure out how to remove the text-decoration from a link using inline styles for the Gmail/Yahoo clients. I am getting the link colors the way I want them, but gmail is inserting that ugly blue line under every link. I have tried

<a href="link" target="_blank" style="color:red;text-decoration:none">link</a>

And

<a href="link" target="_blank" style="color:red;text-decoration:none"><span style="text-decoration:none">link</span></a>

I am using the F12 tools to inspect the email, and the inline styles are completely blown away by the email client and don't appear. I have a very basic template with no overriding properties - am I missing something that I need for Gmail?

Peter O.
  • 32,158
  • 14
  • 82
  • 96
b.Dye
  • 66
  • 1
  • 4
  • This may help you http://stackoverflow.com/questions/8998378/how-do-i-remove-link-underlining-in-my-html-email – Sree Nov 29 '12 at 05:02
  • I've seen every post on Stack regarding this problem. My CSS is correct. I am trying to figure out why gmail is blowing away my inline styles, and how I could possibly override gmail's css with my own. I've tried different doctypes, striped everything out of the header, and nothing works. – b.Dye Nov 29 '12 at 15:19

3 Answers3

3

Your code seems correct, I suspect it's actually the client you're sending the emails FROM that is stripping the code.

Outlook 2013 for example will strip text-decoration:none from anchor tags when sending HTML emails. Try sending your emails from an alternative client and see if you still have issues with the tags being stripped.

slm
  • 15,396
  • 12
  • 109
  • 124
Kris Egan
  • 31
  • 3
2

Try using the real color code. Not sure if the closing semicolon makes a difference also... This always works for me (in Gmail at least)

<a href="" style="color: #770000; text-decoration: none;">click here</a>

On a side note, Gmail is known to break #FFFFFF and #000000 (pure black or white). In that case I use #FFFFF9 and #000001 instead.

John
  • 11,985
  • 3
  • 45
  • 60
0

Try this:

<a href="link" target="_blank" style="text-decoration:none;">
    <span style="color:red;">link</span>
</a>
Sliq
  • 15,937
  • 27
  • 110
  • 143
Amanda
  • 1