Whether you are a designer, a developer or writer, when Trish our QA team leader arrives at your desk, you know something has gone wrong. Except when she is bringing her excellent cakes around.
Today Trish pointed out that a tiny Campaign Monitor tweak I’d made in our dev environment was not working in Outlook 2007. Hardly surprising, but to save you all the time I just spent, here is a quick tip:
Outlook 2007 will totally ignore any inline style which uses the !important declaration
I was trying to ensure a particular paragraph always had a white background, with some simple code:
<p style="background-color:#fff !important;">text here</p>
In the browser, and in the mail clients I had to hand it worked exactly as expected for such simple CSS. However, in Outlook 2007 the white background was not showing.
It turns out that although Outlook 2007 keeps the style declaration in place, it is totally ignored by the renderer, as if it was not there. Other inline styles will still apply, just not the ones marked !important.
Here’s how Apple Mail rendered my test page:
And here is the same page in Outlook 2007:
That third box contains exactly the same inline styles as the second box, but with each one marked as !important. You can see they are just ignored by Outlook 2007.
The !important will work fine when not inline
I ran some tests, and this issue wasn’t specific to background color, or to the paragraph element, it seemed to affect every element. When I tested the same styles from a CSS block in the head of the document, they worked correctly.
It isn’t often you would need to use an !important declaration in an email, especially when you are the one building the whole email. Compared to the lack of padding, for example, this is a minor issue, but worth recording in case anyone else ever needs it.