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!

Code:

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

Code:

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

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

Thread: HTML Email - Row Spacing in Gmail/Hotmail

Thread Tools

Search Thread

HTML Email - Row Spacing in Gmail/Hotmail

Bookmarks

Bookmarks

Posting Permissions