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.

 
   
Office 365 / Outlook.com web client alters HTML causing visual issue?

cifroes

Newbie
Total Posts:  3
Posted: 11 September 2016 11:31 AM

I found a very weird bug while testing my emails on Office 365. Please bear with me since it’s hard to explain.

On part of my email I have a button made up of a TD and a A tag. I have this button with a background color set and sometimes the link has the href empty (for testing purposes). After the button I have a 25px height TD to give a little bit of spacing to the next things.

I found out that when the HREF is empty, Outlook changes the HTML of my email so that the ‘blank TD’ I have now gets the inline CSS set to the A tag and the A tag is removed. Please note this ‘blank TD’ is NOT the parent of the A, it has no relationship to the A…

This is the look when HREF is empty: http://imgur.com/a/8qcLy and this is how it should look: http://imgur.com/a/YX9kA
I reduced my reproducible example to this: https://gist.github.com/anonymous/5ffb627516f9c6245fd0132fbf76dd01

On Outlook.com I checked the message source and it’s perfect, the same HTML I sent. The problem is using chrome dev tools I can see the HTML rendered when I’m seeing the email and it is changed to something like this: https://gist.github.com/anonymous/16e1d02d8832c4382d09d9514945302d


You can see that the A link tag is basically removed and the inline styles defined for that A tag are then passed on to my ‘blank TD’...

Anyone has any idea how to avoid this crazy problem? Anyone has experience with outlook.com changing the HTML of emails?!?


 

Alex Ilhan

Avatar
Administrator
Total Posts:  203
Posted: 11 September 2016 09:26 PM
[ # 1 ]

Hi cifroes,

Actually, this is quite a common bug with Outlook. Rather than setting blank links, we simply put http://www.example.com as the href. As long as it’s not blank, it should work.

Cheers,
Alex.