Office365 Web Client Quirks Thread

I was thinking it might be useful to start a discussion about office365 and it's funny ways it decides to render HTML emails. Here is what I have gathered so far and tomorrow I will begin plowing ahead to try and find work arounds for each of these problems. Let me know if you have seen anything else and so I can add it to the list!

Background Images
Status: Broken
Background images do not work correctly. This may be impossible to fix.

Text-Decoration (text-underline: none)
Status: Broken
It appears the using  text-decoration does no work correctly.

Link Color
Status: Flaky
Many links get turned blue. I think I have noticed a pattern to this, and may have a potential solution.

Hiding Content
Status: Broken
All fixes for hiding content on desktop versions of a mailing (usually done for responsive e-mails) appear not to work in Office365.

Blank TD's below 15px blow out to 15px
Status: Broken
This appears to be the same problem as in Outlook 2013, but the fix for Outlook 2013 does not work.

Sorry that I don't have a lot of solutions to these problems yet, but tomorrow I can dedicate some time to looking for answers. I will keep you guys posted as I go along.

roshodgekiss roshodgekiss, 4 years ago

Superb, Lando - thank you for being so proactive! Just a heads up also that we've mentioned a quirk or two in our blog post on Outlook 2013 and 365.

Keep recording your findings - it's very useful!


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
roshodgekiss roshodgekiss, 4 years ago

Hi Lando, we've had a customer ask about link colors in Outlook 365 - did you find a solution to this?


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
LandoCalrissian, 4 years ago

Here are a few new things that I learned.

Link color appears to be flaky as I mentioned before, and it seems that if you choose a color that is a commonly used webcolor it will restyle the color. For example if you color a link #333333 it will turn blue, but if you change it by one and use #333332 that will work. My recommendation would to use a color that's really close to what you want, but not a commonly used color.

You also can successfully hide elements in outlook365, the one rule is the item must be in a div. Here is an example:

<div style="width:0px;height:0px;display:none;visibility:hidden;line-height:0;mso-hide:all;font-size:0px;">
    CONTENT
</div>

Still looking into the other ones. Sorry this took me so long, got a little backed up with other projects. Hopefully this can help someone out there.

roshodgekiss roshodgekiss, 4 years ago

Oh nice, I'll pass on this tip to our customer - thank you so much for your help! :D


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
gavinlynch, 4 years ago
LandoCalrissian :

Here are a few new things that I learned.

Link color appears to be flaky as I mentioned before, and it seems that if you choose a color that is a commonly used webcolor it will restyle the color. For example if you color a link #333333 it will turn blue, but if you change it by one and use #333332 that will work. My recommendation would to use a color that's really close to what you want, but not a commonly used color.

You also can successfully hide elements in outlook365, the one rule is the item must be in a div. Here is an example:

<div style="width:0px;height:0px;display:none;visibility:hidden;line-height:0;mso-hide:all;font-size:0px;">
    CONTENT
</div>

Still looking into the other ones. Sorry this took me so long, got a little backed up with other projects. Hopefully this can help someone out there.

Just wanted to add that I have succesfully hidden <td>'s using what you have used above with a few minor differences (I'm not using visibility:hidden, for instance)

zerocents zerocents, 4 years ago

Does max-height: 0 and overflow: hidden work?


Michael Muscat
roshodgekiss roshodgekiss, 4 years ago

Hi there zerocents, we haven't tested these CSS properties in Outlook 365 explicitly - it's one for our next CSS guide update! However, if Outlook.com is anything to go by, you may have luck with overflow: hidden, but not much dice with max-height. Let us know how you go, if you do test it out :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free