Home Resources Blog

Despite what Kermit will tell you, it is easy being green, at least if you view your emails in Windows Live / Hotmail. We’ve had a few people tell us that a recent update to the webmail client’s stylesheet is forcing all <Hx> heading elements to be this shade of green.

Here’s an example of headings that look a bit more sickly than intended:

Hotmail's green headings

Thanks to James Walters for doing the digging and finding the culprit in within the “thenewcss” stylesheet.

h2,h2 a,h2 a:visited,h3,h3 a,h3 a:visited,h4,h5,h6,.t_cht {color:#006E12 !important}

Whether that is deliberate or accidental is hard to know, but it has been there for a few weeks now, so it doesn’t look like going away quickly. Fortunately, it is easy enough to work around by adding your own inline !important declaration for your heading elements. Since your CSS will be inline, it takes precedence over the Hotmail stylesheet.

For example:

<h2 style="color:#000 !important;">Your correctly colored heading</h2>

Another email client rendering quirk defeated, at least for now!

  • Dridgett

    Oh that is fantastic. Thanks for that. I got that issue for the first time last week. For some reason my headers and links were going back and forth between

    This couldn’t be diliberate could it? What reasoning could there be behind making all headers green?

  • Ros Hodgekiss

    Hi Dridgett, your guess is as good as mine at this stage. The good folks at Creative Glo (who also wrote an excellent post on the topic) went as far as contacting Hotmail – I would be curious to know the reasoning if they ever do receive a response.

  • Oriol.tf

    If tested myself this topic. It seems that the affected headers are from h2 to h6, excluded remains h1, which behaves properly.
    I also tested the solution you provided, which has been proven to be the most effective. Nevertheless I wonder wether it wouldn’t be smarter to switch those <hx> tags to properly styled divs, which would provably only involve adding font-size and font-weight declarations.

  • Jeff Miller

    Mr. James Walters seems to have an update on site that says the !important is actually not the fix. But offers this solution.

  • darren

    Thanks for this James, been bugging me for a while.

  • Nickolas Simard

    Thanks for… the Kermit song! Those are always a nice touch to an article! :P
    On a serious note though, thanks for researching the topic for us. I already had applied some fix for that, but this article might help others clear up this issue.

  • Ed

    Adding !important will work… but will have the unwanted effect of making Outlook ignore the declaration (which you guys already noted). Go with James Walters’ second solution and style a span inside the heading.

  • David Evans

    This also had me cussing hotmail. I tried to replace my the h2 & h3 I had with styled paras but then of of course hotmail overrode my margins and added their own margins based on my restyled huge text.

    I’ll be using h1s for my headings now until hotmail sorts itself out.

  • Tomteduck

    I fixed it with adding a around the text.
    Like: <h2 style=”#color”>Headline text </h2>

  • Wil

    Great catch – I had noticed this during testing and had changed any green headings to paragraph styles to get around it.

  • matthew w

    It would be great to have one-stop checklist of little issues like these. Campaign Monitor is great and documenting the details and fixes, but it’s hard to keep track of it all. A checklist would us review and fix templates with total confidence.

  • Alison

    We’ve had a similar issue. Our headings are actually supposed to be green so in this case Hotmail turns them a sickly shade of ORANGE!!

    Not sure if your fix will work but we’ll give it a try.

  • Louise

    Could someone give a dummy-answer to this question, please? Once I’m in the index file, I guess this is where I should add something in order for the headings to stay pink (FF1493) and not turn green. But what?

    td.mainbar h2 &#123
    font-family: Georgia;
    font-size: 20px;
    font-weight: bold;
    color: #FF1493;
    margin: 0 0 10px 0;
    padding: 0;

    Thanks in advance!

  • Jamy

    Wouldn’t a ‘fallback’ colour property be easiest?
    <h2 style=”color: #ffffff !important; color: #ffffff;”>Example</h2>

This blog provides general information and discussion about email marketing and related subjects. The content provided in this blog ("Content”), should not be construed as and is not intended to constitute financial, legal or tax advice. You should seek the advice of professionals prior to acting upon any information contained in the Content. All Content is provided strictly “as is” and we make no warranty or representation of any kind regarding the Content.
Straight to your inbox

Get the best email and digital marketing content delivered.

Join 250,000 in-the-know marketers and get the latest marketing tips, tactics, and news right in your inbox.

Subscribe

See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free