Html email -- space between tables

bluellipse · December 8, 2011, 4:23pm

Hi,

I created an html email and it looks great except in Firefox email clients. There is a small horizontal space between tables whether it’s hotmail, gmail or yahoo. Any ideas why that may be?

Thank you,
Meryl

ralphm · December 9, 2011, 3:36am

It would be useful to see your code. Preferably, have everything in one big tables, with more tables within table cells if need be.

bluellipse · December 9, 2011, 4:15pm

I resolved the issue I spoke of but I still have a similar with another email. It’s not specific just to one browser. I have this problem on my email client. Even though I indicated my valign=“bottom” my images are not sitting on the bottom-border. Here is my code–thank you:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=UTF-8”>
<title>none</title>
</head>
<body leftmargin=“0” marginwidth=“0” topmargin=“0” marginheight=“0” offset=“0” bgcolor=‘#f5f5f5’ >

<table width=“600” bgcolor=“#ffffff” cellspacing=“0” cellpadding=“0” align=“center” border=“0”>
<tr>
<td style=“padding-top:10px; padding-bottom:5px; font-size: 10px; color:#000000; font-family: verdana, arial, sans-serif;”>
<center>
View this email <a href=“#” style=" text-decoration:underline; color:#000;">online.
</a>
</center></td>
</tr>
</table>

<table width=“299” bgcolor=“#ffffff” cellspacing=“0” cellpadding=“0” align=“center” border=“0” style=" border-right:1px solid #000;“><tr>
<td width=“299” valign=“top” align=“center” style= “padding-top:20px; font-family:Helvetica, Arial, sans-serif; font-size:13px; line-height:120%; font-weight:bold;”>How much do the biggest Virginia.<br>
advertisers spend?</td></tr>
<tr><td width=“299” valign=“bottom” align=“center” style=“display:block;”><a href=”#"><img src=“http://aa.com/aw/aaimg/mcdataeff2.jpg” alt=“Spend” width=“239” height=“179” border=“0”></a>
</td></tr></table></td>

<td width=“300” valign=“top” align=“center”>
<table width=“300” bgcolor=“#ffffff” cellspacing=“0” cellpadding=“0” align=“center” border=“0” ><tr>
<td width=“300” valign=“top” align=“center” style= “padding-top:20px; font-family:Helvetica, Arial, sans-serif; font-size:13px; line-height:120%; font-weight:bold;”>
Want to know who pulls in the most<br>
revenue by name, including <br>
tech, hospitals and PR?
</td></tr>
<tr>
<td width=“300” valign=“bottom” align=“center” style=“display:block;”><a href=“#” style=“text-decoration:none;”><img src=“http://aa.com/aw/aaimg/appleeff2.jpg” alt=“Revenue” width=“260” height=“164” border=“0”></a></td></tr></table></td></tr></table>

<td width=“600” colspan=“2” valign=“top” align=“left” style= “padding-left:35px; padding-top:10px; font-family:Helvetica, Arial, sans-serif; font-size:13px; line-height:120%;”>
<em>Company</em> can tell you so much about potential clients, your competition and the
marketplace. But only if you <a href=“#” style=“font-weight:bold; color:#eb9700;”>RENEW now!</a><br><br>

By renewing your Company subscription now, you’ll continue to receive:</td></tr>

<ul>

&lt;li style="padding-bottom:5px;"&gt;Profiles of top U.S. advertisers, and global marketers &lt;/li&gt;

&lt;li style="padding-bottom:5px;"&gt;Information on which agencies and account &lt;/li&gt;

&lt;li style="padding-bottom:5px;"&gt;Revenue reports &lt;/li&gt;

&lt;li style="padding-bottom:5px;"&gt;Interactive ventures companies&lt;/li&gt;&lt;/ul&gt;&lt;/td&gt;
&lt;td width="125" valign="top" align="left"&gt;&lt;a href="#" style="text-decoration:none"&gt;

&lt;/tr&gt;

<tr>
<td width=“600” colspan=“2” valign=“top” align=“left” style= “padding-left:35px; padding-right:35px; padding-bottom:20px; font-family:Helvetica, Arial, sans-serif; font-size:13px; line-height:120%;”>
This information
in this market. Please <a href=“#” style=“font-weight:bold; color:#eb9700;”>renew now</a> to ensure you have it
when you need it!</td>

</tr></table>

</body>
</html>

bluellipse · December 9, 2011, 4:50pm

I figured it out!! I need to put display:block with the img tag not the <td>

ralphm · December 9, 2011, 10:43pm

Well done! I was scrolling down to say use display: block as an inline style on the image, but you got there first. I do that always not (in emails) to avoid this happening.