Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML email link color dilemma

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!

like image 931
Asynchronous Avatar asked Sep 04 '25 16:09

Asynchronous


2 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>
like image 123
estaples Avatar answered Sep 07 '25 06:09

estaples


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

like image 25
Kerry Smyth Avatar answered Sep 07 '25 05:09

Kerry Smyth