PDA

View Full Version : HTML Email - Row Spacing in Gmail/Hotmail



superjoepsu
09-05-2008, 02:27 PM
So I've recently ventured into HTML email design, and am now considering a career change... :)

I did some background reading on it and have learned all sorts of things.... Use tables, no header styles, no background images (for Outlook 07), and conflicting advice on whether or not to use a doctype.

I was recently tasked to create an HTML email and have ended up coming with 6 different ways to output basically the same HTML. Entourage 08, Outlook 03, and other email programs all tend to render as desired. However Gmail and Hotmail (assuming most online clients) have these most undesirable spacing issues between rows that I just cannot seem to wrap my head around. As you will see in the code below, I have two rows where I need my images to touch and Gmail/Hotmail like to place huge padding between these rows, making my efforts aesthetically displeasing.

I have noticed that this only seems to happen with images, yet background images do seem to work. However I was told not to use them. Not only that, but can I even apply background position inline styles? Also, can I apply min-height as an inline style?

Anyways, here is my code. It seems like it should be pretty simple to have two rows touch, but that is my challenge. Any ideas?

Thanks!



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Marketing Email</title>
</head>

<body>

<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td colspan="2">
<img src="http://img145.imageshack.us/img145/5554/bannerimgkw8.gif" border="0" usemap="#hc" />
<map name="hc"><area shape="rect" coords="28,22,247,42" href="#"></map>
</td>
</tr>

<tr>
<td colspan="2">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="28"></td>
<td align="left">
<p style="font-size:27px; font-family:'Times New Roman', Times, serif; color:#ff9900;">Title of email goes here</p>
</td>
</tr>
</table>
</td>
</tr>

<tr>
<td colspan="2" height="10"></td>
</tr>

<tr>
<td colspan="2">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="28"></td>
<td valign="top">
<img src="http://img258.imageshack.us/img258/2784/tilejq3.gif" align="left" />
<p style="font-size:12px; font-family:Arial, Helvetica, sans-serif;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec a libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur nulla. Donec velit. Integer vitae nulla et leo tincidunt ullamcorper. Ut blandit neque et velit. Vestibulum erat ante, adipiscing vitae, aliquet sed. Curabitur nulla. Donec velit. Integer vitae nulla et leo tincidunt ullamcorper.</p>
<br />
</td>
<td width="28"></td>
</tr>
</table>
</td>
</tr>

<tr>
<td colspan="2">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="28"></td>
<td valign="top">
<ul style="font-size:12px; font-family:Arial, Helvetica, sans-serif; font-weight: bold; color:#ff9900;" type="square">
<li><font color="#006699">Nam libero. Pellentesque habitant morbi tristique senectus et netus</font></li><br />
<li><font color="#006699">Fames ac turpis egestas. In enim massa</font></li><br />
<li><font color="#006699">Venenatis eget, molestie in, rutrum</font></li><br />
<li><font color="#006699">Vestibulum id lorem. Nulla justo nibh, congue a, ultrices ac, fermentum</font></li>
</ul>
</td>
<td width="166" align="right" valign="bottom"><img src="http://img258.imageshack.us/img258/1667/bgmid1eb0.gif" /></td>
</tr>
</table>
</td>
</tr>

<tr>
<td colspan="2" valign="top" height="70"><img src="http://img401.imageshack.us/img401/6381/bgmid2pi8.gif" /></td>
</tr>

<tr>
<td colspan="2">
<table width="100%" cellpadding="10" cellspacing="0" border="0">
<tr>
<td>
<p style="font-size:10px; font-family:Arial, Helvetica, sans-serif; color:#999999;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec a libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.<br /><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec a libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.<br /><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec a libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.<br /><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec a libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</td>
</tr>
</table>
</td>
</tr>
</table>

</body>

</html>

hosdank
09-07-2008, 12:11 AM
I THINK what you could do is combine both those images into one image. Then use a <div> tag like this to position the text
something like this(Note: The percentages are off)


<div style="position: absolute; top: 35%; left: 27%; width: 59%; height: 39%">

That will place the text wherever you need it to be, even if it's on top of a image. Sorry if that is not what you wanted. :D

agiko
03-26-2009, 03:52 AM
hi, superjoepsu:
I think your problem is relative to "<map><area ... /></map>", you should put them in the end of html file before </body> mark. Hope it will help you!

but i also met a problem: while you check the html mail(like hotmail, etc) use Mozilla browser(Opera, Firefox, Safari, Google Chrome) not IE, you will find spacing between table rows too, i don't know why? Can anybody help me, very thanks!

julieb
01-31-2011, 05:28 PM
You need to include style="display:block" on all of your images to prevent the gap issue.