HTML email link color dilemma

user_1044581 0
Viewed 94687

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!

html-email email-client css html
14 Answers

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

user_101533400

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.

user_7400480

**

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>
user_37713540
Related