Browse by...
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>
   ...
</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.

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

Get started with Campaign Monitor today.

With our powerful yet easy-to-use tools, it's never been easier to make an impact with email marketing.

Try it for free