It’s crucial to close the open div within another conditional mso after the standard image, of course. We then opened a div set to display: none so that the standard image element that followed would not render if we’re viewing the email in MS Office/Outlook. In the conditional fix, we added a table around the image set to width='50%' as a precaution, and set the width: 207px inside the mso conditional. I’ll explain this below but here’s the code with the mso conditional fix (italics and bold): YOUR NEWSLETTER NAME Here’s the original code without the conditional fix: YOUR NEWSLETTER NAME Otherwise, MS Office/Outlook would duplicate the image. We ended up calling the full image element separately with adjusted width properties and wrapping the second image in a div that would hide the original image only if the email client is mso. On it’s own, this does not fix the exploding image problem. Here’s what that looks like near the very end of our HTML: We have to add an additional conditional expression at the end of the table to close these elements as well. So, within the existing table structure, we’re just adding another table set to width='600' and centering it. It only renders if the client is mso (italics and bold). We used conditional formatting to insert an additional centered table inside the #bodyTable. The width of #bodyTable is set to a max-width: 600px and is set inline to a width='100%' so it adjusts well to various screen sizes, but Outlook seems to ignore those values-or at least the max-width value.

The body of our template begins like this (pre-fix): Outlook doesn’t like max-width and min-width CSS values, even if inline. Problem 1 and 2 work together and problem 3 is a separate issue related to font resizing we recommend fixing while you’re at it. There are essentially three (probably more) problems Outlook has with our template. What he was proposing was for a different issue, but it got me thinking about conditional formatting for MS Office/Outlook in our template code. The few addressing image resizing, though well-written and promising, didn’t work for me.Įli Dickinson provided a clue and a way forward for me in his email template trick on GitHub. I found a lot of people attempting to solve various Outlook issues for HTML emails.

You can see that the ITEAMS logo is far larger than it should be and it forces the table structures to expand to accommodate it. Outlook’s creative, but unwelcome reinterpretation of image and table styles

Html email setup for outlook 10