How to centre and email in Hotmail

The way Hotmail collapses the outer backgounds of emails and aligns them to the left has always been annoying. In July 2010 a new version of Hotmail came along which minimised the backgrounds even more. It seemed like a good time to see if there was a work around.

While Gmail and Yahoomail will happily correctly interpret code for a table used to give a background colour and/or centre the email, hotmail will not. For example the following works fine in everything but Hotmail:


<table style="padding-bottom: 24px;" cellspacing="0" cellpadding="3" width="100%" align="center">
<tbody>
<tr>
<td bgcolor="#dedede">

It’s actually just the width=”100% which seems to be being ‘disregarded’, although actually it’s not. The reason hotmail makes it look as though the width is being disregarded is the something to do with the styles attached to the div which wraps the body of the email:

<div id="mpf0_MsgContainer" class="ExternalClass">

The class ExternalClass has a display style of inline-block set, with no width specified. The consequence is that the div takes its width from its child elements so, since the first child has a percentage width set, it looks further down the line of siblings until it finds a width, which is usually the table which contains the actual body of the email. Hence the background is nearly totally lost.

Happily the solution is simple – place the following code just inside the email’s opening <body> tag. Locating it there will ensure hotmail does not strip it out.


<style type="text/css">.ExternalClass {width: 100%;}</style>

Only Hotmail uses ExternalClass so Gmail, YahooMail and Outlook will simply ignore this style. So now the background should occupy most of the width of the email view frame, and the body of the email should be centred. Thanks to the guys at campaignmaster for the solution.

Tags: