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:

{title}

And here is the same page in Outlook 2007:

{title}

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.

  • Danny Zevallos

    MS doesn’t make anything easy. !important, inline, tables, hacks, questionable padding and margin. I almost want to just drop Outlook support completely but B2B organization’s stats say I should care. Everyone, please stop using Outlook! :)

  • Jorge Pedret

    I this would be a nice trick to hack stuff for outlook 2007!

    Imagine setting your property for outlook 2007 first, then setting the sam property to be seen by all the other browsers with the !important property…

  • D

    Did you mean padding instead of background-color?

  • July

    <style>
    body &#123
    background-color: red;
    zoom: 300%;
    text-decoration: underline;
    &#125
    </style>
    People, please stop using
    <ul>
    <li>Outlook 2007</li>
    <li>Outlook 2010</li>
    </ul>
    &#123code&#125
    [removed]alert&#40’Please stop using Outlook 2007’&#41;[removed]
    &#123code&#125

  • Blaine

    Am I the only one that noticed you’re missing a quote? Typo?

    text here

  • David Greiner

    Good spotting Blaine, that typo has been fixed. Thanks.

Want to improve your email marketing? Subscribe to get tips on improving your email marketing delivered to your inbox.
X

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free