Activity Digest Email Weird Format in Outlook

The issue is with the markup that creates this section of the summary email. This is a screenshot from Outlook 2019 (Windows 10):

I’m seeing the problem on all desktop versions of Outlook that I’ve tested it on (Outlook 2010 - Outlook 2019.) The tests available on Litmus are run on Windows 10. What these versions of Outlook have in common is that they all use Microsoft Word to render the emails.

Microsoft Word cannot handle the CSS float rules that are in the Discourse markup. This is what is causing the “likes” and “replies” counts to display underneath the icons instead of floating beside them. The vertical alignment issue is the result of some p elements that the rendering engine adds to the markup in an attempt to apply the email’s CSS. Outlook adds padding to the p elements in an attempt to replicate the email’s CSS.

I spent some time trying to find a CSS solution to the problem. I don’t think that is going to be possible. To fix the issue we are going to have to change the markup of that section of the email to use tables instead of CSS.

5 Likes