Background color and alignment issues in Windows Live Hotmail

Thanks to our friends at Emailcenter, we were recently alerted of an email alignment and background color rendering glitch in the new Windows Live Hotmail. Thanks to this issue, we’re seeing email designs being narrowed down to the width of an enclosed table, which is duly making email newsletters look ‘left-aligned’. Lets go into a bit of detail and show how you can prevent this from happening in your campaigns.

Bye, bye background colors

A common technique used to add background colors or images to an email newsletter is to wrap a table with all your content, with another table applying a background color like so:

<table width="100%" bgcolor="#f0f0e8">
   ...
   <table width="600" align="center">Your content here</table>
   ...
</table>

Sadly, what the new Windows Live Hotmail is doing is setting the email width as the maximum fixed width defined in your HTML code. This means that it’s collapsing/ignoring the outer table (width="100%") and only showing the inner table (width="600"):

Hotmail alignment/bg issues

The side-effect of this is that the campaign now also looks left-aligned, thanks to the copious amount of white-space to the right.

Ouch… What’s the fix?

In so much as you could set the fixed width of your inner table to something wider (eg. width="800"), this makes the email increasingly difficult to read on devices with small resolutions, such as smartphones and older PCs. Thankfully, Emailcenter came up with an ingenious fix, that simply involves adding the following code to the <head> section of your HTML email code:

<style type="text/css">

   .ReadMsgBody { width: 100%;}

   .ExternalClass {width: 100%;}

</style>

Like magic, your email newsletter is restored to all its glory:

Fixed!

With Hotmail accounting for over 16% of email client market share worldwide, it’s simply worth adding this fix to keep your email rendering as close to what’s intended as possible. Reassuringly, this snippet doesn’t have any impact on how your email displays in all the other major email clients.

Many thanks to the team at Emailcenter for sharing this valuable tip with us, and thank you to Oye Modern for allowing us to demonstrate with their lovely newsletter. If you’re seeing any other quirks in the new Windows Live Hotmail, please share them in the comments below.

Posted by Ros Hodgekiss

26 Comments

  • Dan Cunningham
    13th August

    Hah! Brilliant. Such an easy fix!

    Cheers for this info! I’ve certainly book marked it ready for future use! :)

    Regards
    Dan.

  • Koen Mertens
    13th August

    Tested and approved. Just what I needed…
    Thanks for this great fix!

    Regards
    Koen

  • Tetsuo
    13th August

    Why not just wrap the whole thing in <div align=“center>HERE</div> instead? No CSS needed.

    Nice fix though, thanks. Hotmail adds all sorts of rubbish to your code!

  • Rachel
    14th August

    Thanks for this fix, very handy.

    The latest Hotmail seems to have also overriden inline styles on heading tags by uing !important in their css. Annoying to say the least, as templates need to be updated.

    That’ll teach me for trying to use more semantic HTML in my email templates! :O(

  • Justin
    14th August

    amazing!! I have been pulling my hair out all week over this.

    Thanks a lot!!

  • kate
    16th August

    Thats great! I’ve been looking for something like this : )

  • Emmett
    17th August

    Great tip, thanks…..make sure body of email is set to width:100% as well, or it won’t work.

  • CCode
    17th August

    The simpler and cleaner fix is this one. Add the following Head-Stylesheet:

    <style type=“text/css”>
    body { width: 100% !important; }
    </style>

    That’s all! It has the same effect but doesn’t use proprietary Hotmail class-names.

    Cheers!

  • Legues
    18th August

    Excelent! Exactly what i needed!!! Thanks a lot!!!

  • Lea
    18th August

    I’m still having background color issues? On your email the background color has been restored with the fix but my background color is still default white, however the alignment is fixed? Any suggestions?

  • Cat
    20th August

    Anyone noticing any additional whitespace?

  • Matthew
    20th August

    NOT WORKING???  For anyone who can’t seem to get this to work (since hotmail keeps prepending your classnames with “exc”) try overwriting styles by using the ID of the “ExternalClass” div instead of the class name. 

    What is really going on here is the “ExternalClass” div has “display: inline” which causes problems.  I have added the following style for the fix:

    “#mpf0_MsgContainer{display: block !important;}”

    This is more specific than a class name and could be changed by hotmail in the future.  But for those who couldn’t get any of the other options above to work, this could be a last resort.

    Good luck!

  • Leon
    27th August

    I tried the fixes proposed above, but they did not work in my case. However, the following piece of code did work:

    <style type=“text/css” media=“screen”>
      .ExternalClass {display: block !important;}
    </style>

  • FlossieT
    27th August

    @Rachel I’m noticing the heading issue too - have you (or anyone else) found a workround other than reverting to non-semantic markup and using P tags all the way through?

  • Heike
    31st August

    hotmail seems to also change the h3 tags to a green color, taking out the inline color# preference you have chosen….you might notice this on the above email. Has anyone a way to fix that?

  • Kishore
    31st August

    Thanks for this fix.

  • Paul
    31st August

    To fix the color issues you simply have to add !important to your color tags, as below:

    <style type=“text/css”>
    h2 {
    color: #333333 !important;
    }

    or the inline version: <h   #333333 !important”>Heading</h3>

  • Nate
    3rd September

    How would you accomplish the same feat - having 100% width with a background color - using inline styles?  When launching email campaigns, I generally avoid CSS bc it tends to cause problems one way or another.  There has to be an alternative via inline styling.

  • Cole
    29th September

    Thank you so much for this! I thought I was in for a few hours of turmoil with this one.

  • Marc
    1st October

    Nothing of the above worked for me..

    But adding style=”table-layout:fixed” to the 100% width table did!

    so like:

    < table width=”100%” bgcolor=”[your color]” border=”0″  >

  • Jeff Miller
    1st October

    @Marc Thank you!

    The style=”table-layout:fixed” was the only thing that worked for me.

  • Tyler
    15th October

    Thank you very much Ros for sharing the info, it helps me to fix the problem.
    The original code worked fine for me.

  • Philip
    28th October

    This fix doesn’t seem to work in Hotmail/Firefox…

  • Savell
    29th October

    Will adding this CSS fix, affect any other clients eg Outlook?
    Or will other clients just ignore the above fix?

  • Ros Hodgekiss
    29th October

    Philip - I’ll check that out. Are you using Mac or Windows (not that it should really make a difference)?

    Savell - Not to my knowledge. I believe these classes are specific to Hotmail.

  • ajaxx
    1st November

    This worked for me! THANKS!

    < table width=”100%” bgcolor=”[your color]” border=”0″  >

Sign up for free.
Then send campaigns for as little as $9/month

Create an account