Gmail blue links in email

Question

I can't figure out how to change these blue links Gmail is adding to the email I'm trying to code.

I've searched online and implemented their fixes but to no avail.

Here's my code.

<th class="small-12 large-6 last columns text-right show-for-large" valign="middle" style="Margin:0 auto;color:#fff;font-family:'Open Sans',sans-serif;font-size:16px;font-weight:400;line-height:1.3;margin:0 auto;padding:0;padding-bottom:16px;padding-left:8px;padding-right:16px;padding-top:16px;text-align:right;width:274px">
    <a href="https://website.com/wealth" style="Margin:0;color:#fff!important;font:inherit;font-family:'Open Sans',sans-serif;font-size:10px!important;font-weight:400;line-height:1.75;margin:0;padding:0;pointer-events:none;text-align:left;text-decoration:none!important">Wealth</a>&nbsp;&nbsp; 
    <a href="https://discover.website.io/" style="Margin:0;color:#fff!important;font:inherit;font-family:'Open Sans',sans-serif;font-size:10px!important;font-weight:400;line-height:1.75;margin:0;padding:0;pointer-events:none;text-align:left;text-decoration:none!important">News</a>&nbsp;&nbsp; 
    <a href="https://website.com/contact" style="Margin:0;color:#fff!important;font:inherit;font-family:'Open Sans',sans-serif;font-size:10px!important;font-weight:400;line-height:1.75;margin:0;padding:0;pointer-events:none;text-align:left;text-decoration:none!important">Contact Us</a>&nbsp;&nbsp;
</th>

Possible duplicate of [Gmail stripping link color from emails?](https://stackoverflow.com/questions/9110327/gmail-stripping-link-color-from-emails) — fen1x, Jun 05 '18 at 17:06
And it's weird that it only happen to one of the links while the other links seem to be fine. Perhaps there's something else causing this? Like a plugin or something installed on your browser? — Alon Eitan, Jun 05 '18 at 17:14
@AlonEitan I've tried looking at it on two different browsers and same issue. — Peekay, Jun 05 '18 at 17:23
@Peekay So please check the solution in the suggested duplicate - See if it helps — Alon Eitan, Jun 05 '18 at 17:23
@AlonEitan I've tried the fix suggested in the other post. If I change the color to color:#000001!important;, it works. Obviously it does not show because the background is black. If I change it #fffffff, I get the same problem. — Peekay, Jun 05 '18 at 17:35
@Peekay You have 7 `f`s there (`#fffffff`) It must be 3/6 (`#fff` or `#ffffff`) — Alon Eitan, Jun 05 '18 at 17:37
@AlonEitan, tried changing to color to off white (#f7f7f7) and still getting the same issue. I hate email development! — Peekay, Jun 05 '18 at 17:41
@AlonEitan still getting the same issue after fixing the hex code. — Peekay, Jun 05 '18 at 17:46
@Peekay Sorry, but I'm out of ideas. The only thing I can think of is more testing & debugging - Try changing the link, change the text, change the structure (Wrap the text with a `span` and give the span `color:#ffffff;`) and so on... It should work with the details you provided and I don't know why it doesn't — Alon Eitan, Jun 05 '18 at 17:48

score 3 · Accepted Answer · edited Jun 05 '18 at 18:09

3

I added a <span> tag around the links to get it working per Alon's suggestion in the comments.

edited Jun 05 '18 at 18:09

TylerH

20,799
66
75
101

answered Jun 05 '18 at 17:55

Peekay

175
3
13

1

When the timer expires be sure to mark this as the accepted answer (click the checkmark) so that others know it solved your problem! – TylerH Jun 05 '18 at 18:09

score 1 · Answer 2 · answered Sep 19 '19 at 09:01

So for gmail in order to pick up the an actual style for a hyperlink anchor ( ) you have to use the following inline css to set the colour and remove the underlining : style="color: #FF0000; text-decoration:none; cursor:text; pointer-events: none;"

This is how a complete tag would look like : <a href="http://www.google.com/" style="color: #FF0000; text-decoration:none; cursor:text; pointer-events: none;">Click here to go to Google</a>

This works as of date answered : 19/09/2019

score 0 · Answer 3 · answered Jun 06 '18 at 08:02

You'll want to change the colours the 6 digit values, I don't think any email clients support 3 digit colours. I'd also remove all the inline styles on the a tags apart from color & text-decoration, also drop the !important. The font styling will all be inherited from the th.

An overall css fix I use in all templates is below. You'll also need to add an id="body" to your <body> element.

    u+#body a,
    #MessageViewBody a {
      color: inherit;
      text-decoration: none;
      font-size: inherit;
      font-family: inherit;
      font-weight: inherit;
      line-height: inherit;
    }

(#MessageViewBody a will remove blue links from Samsung Mail too, no need to add that ID into your code though. A handy fix to have.)

Gmail blue links in email

3 Answers3