Community Forum

Over the years we have built up a community of email marketers, coders and designers that live and breathe email.

Use the Email on Acid Forum like your virtual water cooler: Stop by to discuss email code, quirky clients and fixes and post your issues (with an example of the code) for our community to offer its assistance.

 
   
Text rendering as links in outlook and office

kickstartinc

Newbie
Total Posts:  11
Posted: 31 March 2016 06:19 AM

Hi All,
I am creating an email with a blue background with white type. Some of the text is rendering as a link in Outlook and Office, turning the text blue and making unreadable. The text being affected is a sentence that contains dates. I would assume that it is these dates that are causing the issue but the whole sentence is changing colour and there is a date in another section that is not affected.  I’ve tried applying styles, adding invisible characters to prevent the dates from being recognized and nothing seems to work. Does anyone know of a fix to prevent this from happening?

Any help would be greatly appreciated.

Thanks

File Attachments
textTest.html  (File Size: 1KB - Downloads: 194)

 

Geoff Phillips

Avatar
Sr. Member
Total Posts:  386
Posted: 31 March 2016 06:32 AM
[ # 1 ]

kickstartinc,
Welcome to the forum! Can you attach the code to this ticket as .html file? that would help a lot.

I would also recommend that you try using an inline color style on the link, with !important. Let me know if that helps.


 

kickstartinc

Newbie
Total Posts:  11
Posted: 31 March 2016 06:53 AM
[ # 2 ]

Thanks Geoff.
I’ve tried applying inline styles to but nothing seemed to work. I did try your suggestion and added !important but that didn’t work either. I’ve attached a simplified version of the file with only the text that is causing issue. Hope that helps.

Thanks


 

Geoff Phillips

Avatar
Sr. Member
Total Posts:  386
Posted: 31 March 2016 07:59 AM
[ # 3 ]

kickstartinc,
Yes, I see the problem now. I was unable to stop Outlook.com and Office 365 from changing the text color. However, I did find that the color change was tied to the words “Join us” at the beginning of the sentence. If you change this to, “Be part of our group” the coloring problem goes away.

Check out my results here: https://www.emailonacid.com/app/acidtest/display/summary/NfkLoCdMSByXAuTAKvVjQwa5IEzY07pPLf5tY5S65wTCY/shared

Is a change in copy possible to accommodate this?


 

kickstartinc

Newbie
Total Posts:  11
Posted: 31 March 2016 08:09 AM
[ # 4 ]

Thank you so much for your help. I will discuss this with our client and see if their ok with the change. Do you have any suggestions if they choose to keep it? I had tried to add a   as a way to fool the email client but that didn’t work.


 

Geoff Phillips

Avatar
Sr. Member
Total Posts:  386
Posted: 31 March 2016 08:13 AM
[ # 5 ]

I actually tried converting every single character to an HTML entity, but that didn’t fool it. I tried adding in more spans around it, no luck. I also tried using some of the proprietary styles that Outlook.com adds to cause the color change, but they rewrite the styles with their preprocessor such that they don’t target correctly any more. So I am pretty much out of ideas for workarounds.


 

kickstartinc

Newbie
Total Posts:  11
Posted: 01 April 2016 12:10 AM
[ # 6 ]

I’ve asked the client and I would hope that changing the copy isn’t an issue. Thanks again.


 

kmfwerbung

Newbie
Total Posts:  4
Posted: 19 June 2016 09:47 PM
[ # 7 ]

Hello Geoff, hello kickstartinc,

I’ve also had the same issue in one newsletter:

https://www.emailonacid.com/app/acidtest/display/summary/8YDwYo7krGFycIyS8wYwc5JAlwYPDDDNC2ADkhP4NwBAq/shared

Later I came on this post by chance and was inspired by the suggestion of Geoff. I found that in my case the strange behaviour of Outlook.com / Office 365 was triggered by these 2 words / phrases in the text:

meet
join us

After inserting zero-width no-break spaces into the letters of these 2 words / phrases like this:

meet 
join us 

the issue was then solved:
https://www.emailonacid.com/app/acidtest/display/summary/Uw490gY0BfS6p013og5ZnHa2n0HHwaw16Q8fH2Gi8BVbS/shared

And RĂ©mi has also posted an elegant solution for this issue here in Litmus Community:
https://litmus.com/community/discussions/5361-outlook-com-and-office-365-change-text-to-blue-and-add-dashed-underline

Thank you Geoff for the suggestion!!