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, 3 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, 3 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, 3 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, 3 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, 3 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, 3 years ago

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


Michael Muscat
roshodgekiss roshodgekiss, 3 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

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