HTML Email Issue: loss of backgrounds in Hotmail (includes fix)

Various email clients have different quirks and html challenges – in our HTML email coding section we document these and detail any workarounds if available.

Email Client Affected:

This issue affects the new version of Hotmail.

Issue:

Hotmail have introduced a code in their rendering engine that effectively removes the background image or colour properties from ‘wrapper’ full width tables. Full width tables are commonly used in html emails to implement background formatting and to center the main email, and are specified as 100% wide.

Effectively the new Hotmail code forces the maximum width of the email to be widest part of the email defined in pixels, which may be either an image or a table.

Fix:

Whilst the width of the wrapping table could be forced out to a certain width (eg. 1000px), this would cause other rendering issues in other platforms (and it would be pretty impractical). Instead, a small CSS code snippet can be used to force the width back out to 100% – simply add this code at the top of the email HTML code:

<STYLE type=”text/css”>
.ReadMsgBody
{ width: 100%;}
.ExternalClass
{width: 100%;}
</STYLE>

Discovered:

July 2010

By Elliot Ross

Elliot Ross is Managing Director of Action Rocket, an email marketing creative agency based in London. You can find him on Twitter at @iamelliot

  • http://www.pure360.com/email-marketing-solutions/email-marketing-company/email-marketing-brighton-people/andy-thorpe-aka-4p fourpster

    Style tags for hotmail browser client – crazy! it’s always Microsoft being awkward with email.Ironically, before I saw this our designer told me about it this morning and I wouldn’t believe him without proof.I’m still not quite sure – it still seems a bit mad?

  • Pingback: HTML Tricks Update – Hotmail background colours « Get In The Inbox

  • http://twitter.com/fourpster Andy T

    Style tags for hotmail browser client – crazy! it's always Microsoft being awkward with email.
    Ironically, before I saw this our designer told me about it this morning and I wouldn't believe him without proof.
    I'm still not quite sure – it still seems a bit mad?

  • Pingback: Email issue « Toddfraserdesign's Blog

  • http://www.daobydesign.com Ryan

    Worked like a charm! Thanks!

  • http://www.daobydesign.com Ryan

    Worked like a charm! Thanks!

  • Welshy1984

    great fix! thanks very much!

  • Welshy1984

    great fix! thanks very much!

  • suzyq

    that is fantastic, thanks for sharing :)

  • suzyq

    that is fantastic, thanks for sharing :)

  • Paulbrist

    Nice.. just what i was looking for!

  • Paulbrist

    Nice.. just what i was looking for!

  • http://insightdesigns.com Mike

    Thank you! This worked perfectly.

  • http://insightdesigns.com Mike

    Thank you! This worked perfectly.

  • Pingback: Hello Inbox, An Email Marketing Blog by Email Marketing Service Provider, EmailDirect.» Blog Archive » Email Coding Guidelines – Part 2: Picking Inline CSS Apart

  • Dean puckett

    A more sustainable fix that doesn’t require Hotmail’ client styles and also expands to all clients elegantly is:

    body { width: 100%;}
    Works perfectly in Hotmail and won’t become dated.

  • Dean puckett

    A more sustainable fix that doesn’t require Hotmail’ client styles and also expands to all clients elegantly is:

    body { width: 100%;}
    Works perfectly in Hotmail and won’t become dated.

  • Pingback: Hello Inbox, An Email Marketing Blog by Email Marketing Service Provider, EmailDirect.» Blog Archive » Hold The Phone – A Look at Designing for Smartphones

  • lui

    this doesn’t work anymore

    • http://www.elliot-ross.co.uk/ Elliot Ross

      are you sure? just tested it and it seems ok?

  • nego

    Thanks! This helped a lot !

  • Melissa

    Is there an inline solution? My email marketing software seems to strip out my internal styles immediately