CODEWITHSUNDEEP
htmlcssemailoutlookhtml-email
Rain
Rain

Reputation: 259

Outlook email rendering CSS

We have a fairly complex Email written in HTML/CSS and it renders just fine with Apple and Google products, but Outlook 2016 (and earlier ones) are giving me a serious headache.

  1. How can I add padding between images?

With regular HTML I just have border property set 40px, but in Outlook it's ignored.

  1. Why does Outlook render additional white space / line break between different text sets?

There isn't anything of sorts written in the code, yet Outlook seems to add empty lines out of nowhere.

I did find this comprehensive list of mso fixes, but I've got no clue at the moment what to even try.

Any suggestions?

Upvotes: 0

Views: 1103

Answers (2)

laujonat
laujonat

Reputation: 342

I generally keep a rules and workarounds at the top of my head when rendering CSS styles for Outlook clients. Some of these are probably a repeat of your implementation. (Since it is not provided)

1) Stick to inline styles instead of imported stylesheets unless you are server side rendering. 2) In outlook, use max-width to determine the width for the email body, and use width for other clients. 3) Use media queries sparingly within the tag. Media queries aren't supported across all clients. 4) If all else fails, monkey patch using MSO method that targets specific Outlook clients. <!-- (gte mso 9)|(IE)

To put space between your images, try wrapping both of them in their own tag and define your styles there directly. It sounds tedious, but I found this to be a reliable fix.

Hope this helps.

Upvotes: 1

Tieskevo
Tieskevo

Reputation: 71

Have a look at https://www.campaignmonitor.com/css/
it will atleast give you a better idea of why things aren't working.

Upvotes: 2

Related Questions