Rendering problem with the "NEW" Windows Live Hotmail email client

I have notice that there is a rendering problem with the "NEW" Windows Live Hotmail email client with browser(s) other than, Internet Explorer(IE)  (i.e Firefox, Safari) The rendering problem seem to be that the images in HMTL emails break up when they have been sliced into different parts, irrespective of how they are possitioned in the HTML. In general the HTML does not render quite as expected when viewed in Firefox or Safari.

If anyone had any solution to these problem(s)... Please let me know!

Stig Stig, 9 years ago

Hi Henry,
do you have any sample code that causes these problems?

Not sure, but I'm thinking this could be caused by Windows Live Hotmail's limited CSS support. Sounds kind of strange that this doesn't happen i IE, though, but you know how browsers get..

Anyways, some code should be helpful, to see how the positioning was done.

Stig


The Campaign Monitor Blog – HTML email smarts to go with your good looks.
Henry Balogun, 9 years ago

Send me your email account and I'll forward you a HTML email mine is mistertest02@hotmail.co.uk

bb_matt, 9 years ago

The solution is a tables based layout, unless you are already doing this.

If so - simplify.

Be very wary of using nested tables, this can cause all sorts of rendering bugs.

jumptronic, 9 years ago

Are referring to the horizontal 'gutters' that live mail likes to add?
If so, this is an issue I've seen since WLM was in beta and I have not yet found a fix, but am still investigating:)

jumptronic, 9 years ago

noticed and older thread that may have addressed this:
http://www.campaignmonitor.com/forums/viewtopic.php?id=159

ShadowMatt, 9 years ago

In my searching, I have found a fix. It is to add style="display:block" to ALL images in table cells. This fixes the Live Hotmail display, but it BREAKS Entourage on the Mac. I'm still trying to find a solution that works in Live Hotmail AND in Entourage on the Mac.

ShadowMatt, 9 years ago

I just found a fix that does NOT break Entourage. Most mail clients (including Entourage) strip the <head> of an email, or don't allow additional CSS in the <head>. Live Hotmail *does* allow CSS in the <head>... So... put this in your <head> (assuming that your design is table-based)...

<style media="all" type="text/css">
table img {
display:block;
}
</style>

This will make all images in your table display:block. ADDITIONALLY, any images you are using for spacers will need "display:inline" added so that they don't break your design that way.

So far, this works in Gmail, Outlook 2003, Live Hotmail, and Entourage.

jumptronic, 9 years ago

I can confirm this fix functions great in Outlook 2K7, Gmail, Yahoo mail, aol webmail, thunderbird, mail (mac mail) and Lotus Notes 7 (mac).

crozynski, 7 years ago

Thanks ShadowMatt. This thread just saved me possibly hours of work on a Sunday afternoon. Awesomeness.

Mathew Mathew, 7 years ago

Nice tip ShadowMatt!


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
artlover, 7 years ago

thank you guys for this awesome tip...

if you have several tables in the same email, you might want to give the table you want the images blocked an id and through css avoid having malformed messages:

<style media="all" type="text/css">
img #maintable{
display:block;
}
</style>

in the body:

 
<table id="maintable" width="618" height="684" border="0" cellpadding="0" cellspacing="0">

hope this helps someone...

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098