0

So I have made a email signature and it works fine in desktop Gmail. The problem is that when I open an email in desktop Outlook links turn blue and underline . How can I fix this?

This is my HTML

<td style="font-family:'Open Sans', sans-serif;color:#000000;font-size:9px;line-height: 14px;font-weight: 400;">
    <a style="color:#000000!important;text-decoration:none!important;" href="" target="_blank" data-saferedirecturl="">
        Av.Infante Santo, 69 a-c | 1350-177 Lisboa - Portugal
    </a>
</td>
Bruno C
  • 37
  • 11
  • Possible duplicate of [Styling HTML email for Gmail](https://stackoverflow.com/questions/9056172/styling-html-email-for-gmail). In a nutshell: Gmail only supports `style` tag inside the document's `head` – GalAbra Feb 14 '18 at 10:12
  • Do you really need to use `a` tag? Is it supposed to be a link? You may consider using `span` instead. – Nailgun Feb 14 '18 at 10:14
  • @Nailgun yes its a link. and i tried to change the a tag for span and that way the links turn blue in desktop gmail.. – Bruno C Feb 14 '18 at 10:21
  • Did my answer for work you? – Syfer Mar 10 '18 at 12:51

1 Answers1

1

When Gmail spots an address or phone number in an email, it automatically adds an extra style declaration, which formats any link in the email that has no inline styles attached to it, as blue:

.ii a[href] { color: #15c; }

How to fix?

Option 1:

  • Wrap the telephone number or address in a <span></span>
  • Give the <span> a class. Example: <span class=”contact”></span>
  • Declare the class in the <style> section of your email.

CSS:

.contact a {color:#000000!important; text-decoration:underline!important;}

HTML:

<span class="contact">675 Massachusetts Ave.<br>Cambridge, MA 02139, USA</span>

Option 2:

Add a default styling for all links created by Gmail, for this to work you will need to add an id of body (in this example) to the body of your email.

CSS:

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

HTML:

<body id="body">
</body>

If you want to read more about Gmail links here is the source of the above example code which explains everything fully.

Option 3: (which I usually use)

Add a zero width non joiner code (&zwnj;) and space (&nbsp;) to the address or phone number so the numbers don't become a link. This is usually client request to disable link.

HTML:

1&zwnj;3&zwnj;5&zwnj;0-1&zwnj;7&zwnj;7 Lisboa

All CSS you need in this example will be the ones you use on your HTML/

Hope this answers your question.

Syfer
  • 4,262
  • 3
  • 20
  • 37