HTML email link color dilemma

Question

I designed an HTML email and I am having the following issues: First my entire design is based on a blue color so any blue text will not be readable by the reader/user, text has to be white. GMAIL automatically color phone numbers and links blue but the main problem is Microsoft Outlook OWA.

To fix the phone number and link coloring in GMAIL I did the following:

<a style="color: #FFFFFF; 
   text-decoration: none" 
   href="#/">
       <span style="color: #FFFFFF; 
                    text- decoration: none">
           1800-000-0000
       </span>
</a>

This works perfectly for GMAIL and every where else BUT as I mentioned most of my client uses Outlook or MS OWA (Outlook Web Application).

OWA ignores the color I set in my inline style and makes the link default blue; this only happens when the email is previewed. If you actually open the email all the styles kicks in.

My dilemma is, what should I do? I have already given up hope but this is my last resort. Is there a way to override the link color for Outlook OWA? I have used !IMPORTANT, the FONT tag, NESTING to the 5 degree.

The Problem here is not Outlook but OWA.

Here is a screenshot when I inspect the element in Chrome:

Screenshot of Google Chrome Developer Panel

And here is FF:

enter image description here

Any ideas?

Please!

Have you inspected it in the browser during the state where the style is not applied? With Firebug or Chrome Console, you should be able to determine what's overriding the style you've set. Also, just a wild guess, have you tried a `` insert? — Jared Farrish, Aug 19 '12 at 09:26
Where would I be putting this style? And no I have not inspected anyting because I was under the impression that even if you knew that, you cannot control it.?? Not sure, just a thought. By the way don't styles get stripped if they are not inline? — Asynchronous, Aug 19 '12 at 09:38
If you find the style which is overridden, you might be able to override that with an `!important` addition to your style. Usually I find this a bad practice, but this might be a case where it is a good idea. — Hidde, Aug 19 '12 at 09:41
Have you ever tried looking at the codes in there? So I right click o the element in my page and click inspect? Not really seeing anything but I am sure something is there, the code is so long. — Asynchronous, Aug 19 '12 at 09:50
Can you copy in all the css you see in the 'inspect element' from Google Chrome? — Hidde, Aug 19 '12 at 13:03
In Firefox/Chrome hover your mouse over the element in question, right-click, and `Inspect Element`. I prefer and know best Firebug, so in that you'll see the `HTML` tab in focus, and on the far right right a box with `Style` tab focused. You can look at the styles applied per element by clicking on each in the left `HTML` tab, which will update the right. Scroll through the `Style` tab and you'll see which are active and which are being overridden (will be struck through). More or less, you have to do this to figure out what is going on, and should learn to do this anyways. It's pretty handy. — Jared Farrish, Aug 19 '12 at 15:16
And, y'know, it's better than guessing and adding `!important` to everything. Note, there is also `! important` (with a space). — Jared Farrish, Aug 19 '12 at 15:18
I did just that, but again I am not seeing any that appears to be over writing the inline style sheet. I have added a screen shot above. The anchor tag I am using has no Class, I am using only inline styles. — Asynchronous, Aug 19 '12 at 20:53
You might want to change the link background (or its surrounding background) if its text color can't be overridden. — Jay, Aug 20 '12 at 06:39

score 58 · Answer 1 · edited Aug 19 '20 at 20:53

58

You'll find success by including the <font> declaration, which is deprecated in modern HTML, though some versions of OWA still respect it:

<a style="color: #FFFFFF; text-decoration: none" href="#/">
  <span style="color: #FFFFFF; text-decoration: none">
    <font color="#FFFFFF">1800-000-0000</font>
  </span>
</a>

edited Aug 19 '20 at 20:53

Alter Lagos

12,090
1
70
92

answered Nov 11 '13 at 19:59

estaples

932
8
9

1

Works for outlook 2016 – zed Feb 20 '19 at 10:15
works for outlook 2016 on mac osx, windows7, and windows10! – jpw Apr 24 '20 at 04:44
FONT element it's not supported by HTML5 and Gmail doesn't accept it however, still works for Outlook. – Jim Jun 04 '20 at 17:18
It might be nice to explain the rest of your solution. I feel inclined to copy it, but then not sure if I need all that. – BBaysinger Feb 03 '22 at 07:53
This is the way in Outlook. – mydoglixu Sep 29 '22 at 21:30

Kerry Smyth · Answer 2 · 2014-04-16T06:01:48.240

Outlook Web App (OWA) link colors change from inline styles. I have spent a few hours trying to change/fix link colors in OWA where it strips away inline styles for email templates I am creating. I tried various techniques with + tags with no success. Finally found something that seems to work:

      <a href="http://www.somewebsite.com.au/" target="_blank" style="color:#FFFFFF;">White Link</a>

Changed it to:

      <a href="http://www.somewebsite.com.au/" target="_blank" style="color:#FFFFF6;">White Link (almost)</a>

Seems fine so far.

Further testing. I put the slightly off color on the the <td style="color:#FFFFF6;"> then the correct color on the <a href="http://www.somewebsite.com.au/" target="_blank" style="color:#FFFFFF;">

This worked for me as well, thanks! As long as the `` tag is inside another element with a *different* color specified, the `` color will be obeyed (it seems). OWA version 14.3.235.1, Firefox 41. — Jay, Sep 02 '15 at 17:09

score 10 · Answer 3 · answered Apr 08 '14 at 22:49

10

Its a known bug with Outlook that if an anchor tag does not contain a valid URL, then the styling of said tag will be ignored.

The tendancy to add !important will also work against you in this case because Outlook will completely ignore any tags suffixed with !important.

Put a URL on your anchor tag, or wrap the text in a span tag inside of the anchor and put your styling there.

answered Apr 08 '14 at 22:49

davidcondrey

34,416
17
114
136

Can confirm. Everything worked when I removed the !important – prawn Jan 26 '21 at 16:36

score 7 · Answer 4 · answered Sep 06 '13 at 17:39

7

I have been able to fix this by putting a table inside the a tag.

<a href="">
    <table>
        <tr>
            <td style="color: #FFFFFF">Link text here</td>
        </tr>
    </table>
</a>

answered Sep 06 '13 at 17:39

kavun

3,358
3
25
45

5

LOL, WTF, whyyyyyyyy m$, whyyyyyy. This ACTUALLY worked for me, good catch :) – Larzan Oct 20 '15 at 15:03
1

This way, your link will not work in Outlook 2003. You should put only tags and text or inline elements inside tag. – lyubeto Jan 04 '17 at 08:19
NOOOO! It worked! :O – mydoglixu Sep 29 '22 at 21:27

score 1 · Answer 5 · answered Oct 22 '14 at 21:35

Figures. Just when we've gotten used to not being able to use the cool new email tricks because Outlook doesn't support them, Microsoft throws OWA at us, with a whole slew of new bugs.

We've gotten around its awful link styling by applying a display:inline-block to the link. This at least gets rid of the underline. I have no idea why.

We ran into another bug when trying to style our links the same color as the parent element. For some reason, making the parent element's color different fixed it. Changing it by one character up or down usually gives you a pretty close color.

<td style="color:#CCCCCD">
<a href="http://mylink" style="display:inline-block; color:#CCCCCC">Link</a>
</td>

score 1 · Answer 6 · answered Sep 19 '16 at 21:44

1

I used the following and it worked fine in Outlook 2007, 2010, 2013, and Outlook.com. I will check with OWA soon.

#outlookLink {text-decoration: none; color: #ffffff !important}
<a href="" id="outlookLink" name="Anchor" style="text-decoration: none; color: #ffffff !important;">Your text and link here.</a>

answered Sep 19 '16 at 21:44

Orlando Rodriguez

11
3

Please check it first then answer. OP is asking about OWA specifically, so this is not an answer. Once you get enough reputation, you'll be able to comment, too where this kind of post belongs. – YakovL Sep 19 '16 at 22:57

score 1 · Answer 7 · edited Aug 31 '20 at 22:31

1

<a href="#" style="color: #FFF;">
  <strong style="color: #FFF; font-weight: normal;">Example Link</strong>
</a>

it worked for me! Make sure to use <strong>, I tried it with other tags, but that didn't work.

edited Aug 31 '20 at 22:31

Alter Lagos

12,090
1
70
92

answered Jul 30 '18 at 04:06

leon

11
1

score 1 · Answer 8 · answered Jan 20 '21 at 11:49

I have also noticed that for OWA the order of items in the style= property might be relevant. I've seen cases when using:

<a href="/some_url" style="text-decoration: none; color: inherit;">...</a>

Would cause OWA to strip the color attribute (but leave `text-decoration), but reversing the order, e.g.:

<a href="/some_url" style="color: inherit; text-decoration: none;">...</a>

Would make OWA preserve both. I can't see any sense in this, but this is how it is...

I've also see that the context of a tag can influence this style-stripping: The stripping I mentioned above is triggered when the a tag is preceded by a h2 tag, but removing that h2 also prevents OWA from stripping the tag (I haven't investigated when or why this happens exactly, though, just wanted to point out that context can be relevant here as well).

I realize that none of this is a direct answer to the original question, but I imagine it will be helpful for others who come here with a similar question.

score 0 · Answer 9 · answered Aug 24 '12 at 13:38

OWA is actually stripping all the styles of the a-tag, including that of the span-tag you included. You can add styles in the head part, but again, OWA is ignoring this for hyperlinks. I added a style for a, a:link, a:visited in the head, the same color as in the a-tag and the including span-tag. The result? My linktext is colored but the underlining is still the default blue. The clue: there's no clue for me.

score 0 · Answer 10 · answered Apr 05 '13 at 04:00

When sending html emails the best practice is to stick to old HTML3 and HTML4. Email clients do not play well with CSS2 and up. Inline CSS work much better.

Instead of:

<a style="color: #FFFFFF; text-decoration: none" href="#/">
 <span style="color: #FFFFFF; text- decoration: none">1800-000-0000</span>
</a>

By the way, you have syntax errors in this line, after each css declaration you need a ;

Corrected:

<a style="color: #FFFFFF; text-decoration: none;" href="#">
  <span style="color: #FFFFFF; text- decoration: none;">1800-000-0000</span>
</a>

Try this:

<a color="#FFFFFF" text-decoration="none" href="#">
  1800-000-0000
</a>

Do not forget to specify the HTML version on the DOCTYPE.

I've found myself working in both sides of this situation. I worked on a web based email client using PHP with IMAP, I had to strip HTML emails of a lot of things because they'd break not only the layout of the app but also the intended behavior of buttons and forms. How? you might ask. With a desktop email client this probably wouldn't be a problem but with a web based email client loading external css/js files can result into a very large array of potential pitfalls and nasty bugs.

On another occasion I was working on wedding invitations sent over HTMl emails, The amount of inline css we had to do was ridiculous. To make it work on you have to use mostly HTML3 and maybe a bit of HTML4 but not too much.

I recommend you to experiment with tables and deprecated HTML3 inline css.

BTW @darwin... Last declaration in the line doesn't *need* the semi. I thought it did as well, but it is perfectly valid. HOWEVER.. it is a poor practice for future expansion so not recommended. Refer to a good answer here: http://stackoverflow.com/questions/11939595/leaving-out-the-last-semicolon-of-a-css-block — Phlume, Feb 21 '14 at 15:28

score 0 · Answer 11 · answered May 23 '16 at 14:13

Try adding a class my-link to each link in question and the following CSS in your style tag:

.my-link a,
a[x-apple-data-detectors] {
  color:inherit !important;
  text-decoration: underline !important;
}

That usually covers things for me. If that fails, there is a heavier version of this code here:

.my-link a,
a[x-apple-data-detectors] {
    color: inherit !important;
    text-decoration: none !important;
    font-size: inherit !important;
    font-family: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
}

source

score 0 · Answer 12 · answered Jun 07 '16 at 13:44

I saw this thread and tried the options above. The TD hack worked with changing the hex code, but I just stumbled upon a nice solution if anyone would like to try:

<div style="text-decoration: none;">
<a href="LINK" style="display: inline-block; color: #878f93; text-decoration: none;">LINK TEXT</a>
</div>

Setting the DIV to text-decoration NONE was supported by OWA. I personally was asked to remove the underline, so for my case it's perfect.

I hope people find this useful. Thanks for everyone who added their solutions as well.

score 0 · Answer 13 · answered Dec 21 '17 at 09:10

This question is still relevant as of today 21-12-2017. I had no problem with my code in Outlook, Gmail but not in Outlook Web App. I had to use this outdated tag to solve it.

<a class="app-link" style="font-size:14px; color:#ff6600 !important; text-decoration:underline;" href="https://somesite/something/"><font color="#ff6600 !important;"> Gå til app</font></a>

It was weird that style within hyperlink will NOT work for Outlook Web App(OWA), therefor, adding <font color="#ff6600 !important;"> worked! Strange but this is how Microsoft wants to tease us!

score -1 · Answer 14 · answered Oct 04 '19 at 00:43

-1

**

PSEUDO CSS SUPPORTED (2007, 2010, 2016, 2017 and others)

It is like a hack because it doesn't support.

<a href="#" target="_blank" style="font-size:20px;">
   <strong style="color:#ffffff;">@Model.TelephoneTextHtml</strong>
</a>

answered Oct 04 '19 at 00:43

Vinod Kumar

1,191
14
12

HTML email link color dilemma

14 Answers14

PSEUDO CSS SUPPORTED (2007, 2010, 2016, 2017 and others)

It is like a hack because it doesn't support.

Linked