Outlook is !important AND precious!

Won­der­ing why your Out­look spe­cif­ic styles aren’t being respect­ed after pat­ting your­self on the back for know­ing that they exist at all?

Well I did both and it cost me sev­er­al hours!

As any email devel­op­er will tell you, Out­look can be a pain to work with. From odd ren­der­ing bugs to VML code, it’s a world unto itself.

I’m build­ing more acces­si­ble email tem­plates these days and as such, I’m mak­ing greater use of seman­tic HTML tags (para­graph, head­ers, lists etc). This means we can direct­ly style the HTML using CSS prop­er­ties such as ​‘mar­gin-bot­tom’.

As I said before, Out­look has its own rules and thus doesn’t recog­nise the ​‘mar­gin’ prop­er­ty so we have to use a spe­cial Out­look CSS prop­er­ty called ​‘mso-mar­gin-bot­tom-alt’ to do the same thing but (after pat­ting myself on the back for know­ing these prop­er­ties exist at all!) I was scratch­ing my head as to why Out­look wasn’t adding any spacing.

Problem Solving

As a keen prob­lem solver, I reduced the tem­plate to only include a few lines of CSS and the table involved. I revert­ed to old­er code, checked oth­er templates…

I was stumped. Was Lit­mus hav­ing a bad day? Was *I* hav­ing a bad day?

I put each CSS prop­er­ty 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!