Wondering why your Outlook specific styles aren’t being respected after patting yourself on the back for knowing that they exist at all?
Well I did both and it cost me several hours!
As any email developer will tell you, Outlook can be a pain to work with. From odd rendering bugs to VML code, it’s a world unto itself.
I’m building more accessible email templates these days and as such, I’m making greater use of semantic HTML tags (paragraph, headers, lists etc). This means we can directly style the HTML using CSS properties such as ‘margin-bottom’.
As I said before, Outlook has its own rules and thus doesn’t recognise the ‘margin’ property so we have to use a special Outlook CSS property called ‘mso-margin-bottom-alt’ to do the same thing but (after patting myself on the back for knowing these properties exist at all!) I was scratching my head as to why Outlook wasn’t adding any spacing.
As a keen problem solver, I reduced the template to only include a few lines of CSS and the table involved. I reverted to older code, checked other templates…
I was stumped. Was Litmus having a bad day? Was *I* having a bad day?
I put each CSS property on a new line.
Then I saw it.
Yup, Outlook doesn’t understand !important and will ignore the entire CSS rule if you include it. Keep those eyes peeled!