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:

And here is FF:

Any ideas?

Please!

Solution 1

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>

Solution 2

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.

Solution 3

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

Solution 4

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>

Solution 5

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

View more solutions

Comments

[Jared Farrish]

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 <style>a:link, a:visited, a:hover { color: white; }</style> insert?

[Asynchronous]

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?

[Hidde]

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.

[Asynchronous]

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.

[Hidde]

Can you copy in all the css you see in the 'inspect element' from Google Chrome?

[Jared Farrish]

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]

And, y'know, it's better than guessing and adding !important to everything. Note, there is also ! important (with a space).

[Asynchronous]

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.

[Jay]

You might want to change the link background (or its surrounding background) if its text color can't be overridden.

[Phlume]

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: stackoverflow.com/questions/11939595/…

[Jay]

This worked for me as well, thanks! As long as the <a> tag is inside another element with a different color specified, the <a> color will be obeyed (it seems). OWA version 14.3.235.1, Firefox 41.

[Larzan]

LOL, WTF, whyyyyyyyy m$, whyyyyyy. This ACTUALLY worked for me, good catch :)

[YakovL]

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.

[lyubeto]

This way, your link will not work in Outlook 2003. You should put only <img> tags and text or inline elements inside <a> tag.

[zed]

Works for outlook 2016

[jpw]

works for outlook 2016 on mac osx, windows7, and windows10!

[Jim]

FONT element it's not supported by HTML5 and Gmail doesn't accept it however, still works for Outlook.

[prawn]

Can confirm. Everything worked when I removed the !important

[BBaysinger]

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.