Footer Hyperlinks not changing colour in Outlook Web Access

We have the following ocde in an email template which is styling some links white.
Except in Outlook Web Access - where thay are always blue.

How can we style them correctly in POutlook Web access.

         <tr>
          <td align="center" style="font-family: 'Open Sans', sans-serif; font-size: 14px; font-weight: 400; color: #ffffff; line-height: 24px;">
           <a style="border-style: none; font-family: 'Open Sans', sans-serif; font-size: 14px; font-weight: 700; color: #ffffff; line-height: 24px;" href="mailto:marketing@davidantrobus.com">marketing@ourdomain.com</a>
          </td>
         </tr>

         <tr>
          <td height="10"></td>
         </tr>

         <tr>
          <td align="center" style="font-family: 'Open Sans', sans-serif; font-size: 14px; font-weight: 700; color: #ffffff; line-height: 24px;">
           <a style="border-style: none; font-family: 'Open Sans', sans-serif; font-size: 14px; font-weight: 700; color: #ffffff; line-height: 24px;" href="http://www.davidantrobus.com">ourdomain.com</a>
          </td>
         </tr>

Here is how this code renders in OWA

http://demo.clarkedesign.co.uk/temp/cm/html-rendered.png

And then here is how is finally display - with blue hyperlinks NOT WHITE
http://demo.clarkedesign.co.uk/temp/cm/footer-link-colour.png

StephenJ StephenJ, 1 year ago

Hey clarkedesign,

I don't have access to OWA myself at present, so can't confirm 100% if this will work for you, but as per Ros's fantastic OWA article from a couple of years ago, OWA is rather truculent and doesn't play nicely with the other CSS kids unfortunately, and so you may want to go old school here - *really* old school, in fact; I'm tempted to even call it 'paleo' ;) - and use a <font> tag as well here.

Thus, if we take your example link of:

<a style="border-style: none; font-family: 'Open Sans', sans-serif; font-size: 14px; font-weight: 700; color: #ffffff; line-height: 24px;" href="http://www.davidantrobus.com">ourdomain.com</a>

What you may want to try is updating it to the following:

<a style="border-style: none; font-family: 'Open Sans', sans-serif; font-size: 14px; font-weight: 700; color: #ffffff; line-height: 24px;" href="http://www.davidantrobus.com"><font color="#ffffff">ourdomain.com</font></a>

Notice I added <font color="#ffffff">ourdomain.com</font> to your existing code there, to try and force it to display as white.

If that doesn't work, try <span style="color:#ffffff">ourdomain.com</span> instead.

It may also be doing this because your link text itself is actually a URL (i.e. ourdomain.com ), and so you may want to try changing your link text from "ourdomain.com" and to something like "visit our web site", to see if this helps, also.

Lastly, I have heard that OWA doesn't always honour 'white' or #ffffff specifically, so you may also want to try changing your font color to #fffffe instead, which should achieve more consistent results.

So perhaps give that a try and see how you go :)

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098