Windows Live html emails on Firefox & Safari

Member

12 Posts

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:

Code:

<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>

Last edited by devperson (3 years ago)

Posted 3 years ago

easement

New member

1 Posts

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

Last edited by easement (3 years ago)

Posted 3 years ago

Stig

Campaign Monitor

304 Posts

Is there a specific reason why you need nested tables?

How about something like this?

Code:

<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

Code:

style="margin: 0 auto;"

so that it would still be centered.

Posted 3 years ago

danjak

New member

1 Posts

easement wrote:
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

Posted 3 years ago
devperson

Member

12 Posts

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

Thanks again!

Posted 3 years ago
ShadowMatt

New member

4 Posts

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

Posted 3 years ago
ShadowMatt

New member

4 Posts

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.

Posted 3 years ago

Forums