Tables Not Rendering Correctly in Hotmail

Ryan Wenzel · August 2009

Hi all,

I just designed a new e-mail template for news/announcements. It looks great in Gmail, Yahoo, AOL, Outlook, etc., but in Hotmail there's white space between the rows. I've been playing with it and I don't know how to fix it. I've attached a screen grab of what it looks like in Hotmail, and the code I used to open the table is below:

Any ideas how I might be able to fix this?

Thanks,

Ryan

James Zetlen · August 2009

Hi Ryan,

Unlike most other email readers, Hotmail likes to display images inside table cells as though they were inline text. This means they get leading space like text does, which leads to those white bands below them. You can fix this by adding an explicit style attribute to all your layout imagery: style="display:block". Here's how I would modify your code:

All the major email readers have their own quirks. Email HTML rendering is years behind rendering in Web browsers...we're all suffering with you.

Matt Burghdoff 2 · August 2009

James Zetlen:
Hi Ryan,

Unlike most other email readers, Hotmail likes to display images inside table cells as though they were inline text. This means they get leading space like text does, which leads to those white bands below them. You can fix this by adding an explicit style attribute to all your layout imagery: style="display:block". Here's how I would modify your code:

<TABLE class=EC_AINoBorder style="BORDER-COLLAPSE: collapse" borderColor=#000000 cellSpacing=0 cellPadding=0 width=500 align=center border=1>

<TBODY>

<TR>

<TD height=74><IMG style="display:block" src="http://www.henrystreet.org/images/content/pagebuilder/141131.jpg" border=0></TD></TR>

<TR>

<TD height=30><IMG style="display:block" src="http://www.henrystreet.org/images/content/pagebuilder/141135.jpg" border=0></TD></TR>

All the major email readers have their own quirks. Email HTML rendering is years behind rendering in Web browsers...we're all suffering with you.

Thanks for posting that, James. Hotmail's space has been a minor mystery that I've been skirting around - i.e. including a bit of white space as part of the design and playing with background colors. Good to know there's another solution.

Noah Cooper · August 2009

James Zetlen:
Hi Ryan,

Unlike most other email readers, Hotmail likes to display images inside table cells as though they were inline text. This means they get leading space like text does, which leads to those white bands below them. You can fix this by adding an explicit style attribute to all your layout imagery: style="display:block". Here's how I would modify your code:

<TABLE class=EC_AINoBorder style="BORDER-COLLAPSE: collapse" borderColor=#000000 cellSpacing=0 cellPadding=0 width=500 align=center border=1>

<TBODY>

<TR>

<TD height=74><IMG style="display:block" src="http://www.henrystreet.org/images/content/pagebuilder/141131.jpg" border=0></TD></TR>

<TR>

<TD height=30><IMG style="display:block" src="http://www.henrystreet.org/images/content/pagebuilder/141135.jpg" border=0></TD></TR>

All the major email readers have their own quirks. Email HTML rendering is years behind rendering in Web browsers...we're all suffering with you.

Since Hotmail is one of the few clients that actually supports embedded styles, you can also just add:

img{display: block;}

</style>

Tables Not Rendering Correctly in Hotmail

Comments

Categories