Why is Outlook ignoring my inline styles?

I'm coding a template that shows headings in black. But in the template there is a layout that is supposed to display the headings in white.

Here is my template code: http://pastebin.com/KjAThHkJ

Here is the email in Outlook: http://pastebin.com/Yx2PLsSv

To get the email code from Outlook I clicked Other Actions → View Source. The problem in Outlook is on lines 392, 418, 476 and 502. Although there is a style="color:#FFFFFF !important; ..." on the h2 element, the heading still has a black color in Outlook 2007.

Screenshot: https://skitch.com/blogjunkie/843js/2012-05-17-outlook-2007

https://img.skitch.com/20120517-pfppeue6uddrytdbq22fyy5qhq.preview.jpg

Any advice on how to fix this would be appreciated. Thanks in advance.

mrtunes, 4 years ago

i have always found outlook responds better to styles being declared in the head, for some reason beyond me.

roshodgekiss roshodgekiss, 4 years ago

Hi blogjunkie, off the bat I saw the following on line 52:

h1, h2, h3, h4, h5, h6 {
        color: #111 !important;
        line-height: 100% !important;
        -webkit-font-smoothing: antialiased;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
        color: #111 !important;
}

Try removing the !important; in both style declarations and you should be alright. It's likely when the code is being inlined, the color: #111 is being copied into the inline styles and overriding the white color. Let us know how you go :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
blogjunkie, 4 years ago

Thanks Ros. I did some Googling and found that Outlook 2007 ignores inline !important declarations.

http://www.campaignmonitor.com/blog/post/3143/outlook-2007-and-the-inline-important-declaration/

So I had to remove the important declarations for both black and white headings. It works fine in Outlook now, but they're green in Hotmail. Oh well, I guess that's something I can live with..

roshodgekiss roshodgekiss, 4 years ago

Hi blogjunkie, glad to know it's getting there. Have you tried this Hotmail fix?


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
blogjunkie, 4 years ago

I think you've got the wrong link there Ros? I'm aware of the Hotmail fix for green heading, but that involves the !important declaration, which will trigger the Outlook error and make it ignore the inline styles.

roshodgekiss roshodgekiss, 4 years ago

Hmm, I'll have to look into this Outlook error further - thanks for pulling me up on this. Will let you know if I come up with a more sound solution :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

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
1-888-533-8098