Home Resources Blog

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>

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%;}


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


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.

  • Dan Cunningham

    Hah! Brilliant. Such an easy fix!

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


  • Koen Mertens

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


  • Tetsuo

    Why not just wrap the whole thing in <div align=”center&gt;HERE&lt;/div&gt; instead? No CSS needed.

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

  • Rachel

    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

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

    Thanks a lot!!

  • kate

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

  • Emmett

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

  • CCode

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

    <style type=”text/css”>
    body &#123 width: 100% !important; &#125

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


  • Legues

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

  • Lea

    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

    Anyone noticing any additional whitespace?

  • Matthew

    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&#123display: block !important;&#125”

    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

    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 &#123display: block !important;&#125

  • FlossieT

    @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

    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

    Thanks for this fix.

  • Paul

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

    <style type=”text/css”>
    h2 &#123
    color: #333333 !important;

    or the inline version: <h3 style=”color: #333333 !important”>Heading</h3>

  • Nate

    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

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

  • Marc

    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″” style=””table-layout:fixed”” >

  • Jeff Miller

    @Marc Thank you!

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

  • Tyler

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

  • Philip

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

  • Savell

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

  • Ros Hodgekiss

    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

    This worked for me! THANKS!

    < table width=””100%”” bgcolor=””[your” color]” border=””0″” style=””table-layout:fixed”” >

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.


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