Windows Live html emails on Firefox & Safari

Hi there

I'm having problems with html emails in Windows Live (on Firefox and Safari). If I use nested tables in my code I get a 2/3 pixel horizontal gap between the different elements of the email. This does not occur on IE 6 or 7 and weirdly enough, previous emails we've built and tested (which looked fine on the old Hotmail) are now showing up with these gaps in Windows Live.

Anybody experiencing the same thing?

Any help or suggestions most welcome - Thanks.


I quickly put together a mock html email which demonstartes the problem - code below:

<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="top">
<table width="500" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" valign="top"><img src="images/pic5.jpg" width="500" height="113"></td>
</tr>
<tr>
<td align="left" valign="top">
<table width="500" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" valign="top" bgcolor="#990000"><img src="images/spacer.gif" width="50" height="50"></td>
<td align="left" valign="top" bgcolor="#FFCC00"><img src="images/spacer.gif" width="50" height="50"></td>
<td align="left" valign="top" bgcolor="#990000"><img src="images/spacer.gif" width="50" height="50"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
easement, 9 years ago

did you try:
style="display:block;"  on your image?

Stig Stig, 9 years ago

Is there a specific reason why you need nested tables?

How about something like this?

<table width="500" border="0" cellpadding="0" cellspacing="0" style="margin: 0 auto;">
<tr>
<td align="left" valign="top" colspan="3"><img src="images/pic5.jpg" width="500" height="113"></td>
</tr>
<tr>
<td align="left" valign="top" bgcolor="#990000"><img src="images/spacer.gif" width="50" height="50"></td>
<td align="left" valign="top" bgcolor="#FFCC00"><img src="images/spacer.gif" width="50" height="50"></td>
<td align="left" valign="top" bgcolor="#990000"><img src="images/spacer.gif" width="50" height="50"></td>
</tr>
</table>

I added

style="margin: 0 auto;"

so that it would still be centered.


The Campaign Monitor Blog – HTML email smarts to go with your good looks.
danjak, 9 years ago
easement :

did you try:
style="display:block;"  on your image?

It works!!
Thanks very much easement

Style for table doesn't work, but thanks stig for your input

devperson, 9 years ago

Thanks for the suggestions all - using style="display:block" solved my problems!

Thanks again!

ShadowMatt, 9 years ago

I posted in another thread, but adding "display:block" will BREAK the display in Entourage on the mac. Any other potential fix ideas? I tried "margin: 0" and "padding: 0" but neither have an effect on Live Hotmail

ShadowMatt, 9 years ago

I'm reposting from a different thread (in case someone finds the answer here)...

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.

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