Gaps in emailed HTML table rows

This post has nothing to do directly with WordPress, but this is a little tip I need to post to remind me how I fixed this particular problem.

Because of restrictions in certain email clients, I still rely on HTML tables for newsletter layouts.  When I cut up an image and place the image slices in individual table cells, the result looks fine in a browser by itself, but when sent and viewed in Gmail, there is a noticeable gap between the rows.

The browser’s element inspector says the row height is computed to 2 pixels larger than the image size despite entering the correct height in the row and cell.

I found entering the line-height attribute set to zero fixes the problem.  In each row tag enter

style=”line-height:0;”

so your row tag looks like <tr style=”line-height:0;”>

You will also need to add line-height attribute to a <p> or <span> tag around your text so it’s not all bunched up together.  Setting line-height to equal or greater than the pixel height of your font-size should do it.

Aweber adds
tags to my RSS feed

Note: this article has been updated on Sept 3, 2009

I am using Aweber to email out a client’s blog entries.  The client is very particular about preserving his formatting.  He wants the entry to appear the same in both the email and his blog page.

Aweber’s Blog Broadcast Messages are fed by the item:description tags in an RSS feed from the blog.

The description tag is fed by the excerpt of that blog entry.  If none is defined, WordPress grabs the first few dozen words and ends it with “…” to indicate there is more but you have to go to the blog site to read it.

This was fixed this using the Advanced Excerpt plugin. Not only does this plugin copy the contents of the blog entry in its entirety, but also copies in the HTML code.  I set it to copy the first 1000 words. The blog entries are usually very short so this length works fine.  HTML tags are not counted in the 1000 words.

The next problem came when I set up the Blog Broadcast in Aweber. Extra lines were added to the emails I received.  In the source code of the message in my email client and at Aweber.com, I looked at the code of the messages sent out.  I found an extra <br /> tag that was not in the RSS code it was pulling from.

I made a copy of one of the messages that had went out, and removed all the extra <br /> tags and sent the message as a test.  No extra spacing this time.  This told me, the problem had to occur in the RSS import process.

My guess is that there is code to replace new line characters (n) with <br /> tags for those people who who just use plain text in their excerpts to maintain their formatting.

I asked Aweber about this and they are looking into the problem after I convinced them there was a problem.  I’m still awaiting on a response.

Meanwhile, in case they can’t fix it for some reason, I think I came up with another solution.  I am using Yahoo! Pipes to search the item:description tags of my RSS feed, and strip out the new line characters using regular expressions.  Regular expressions tend to tie my brain in knots, but a little research at Brooks Brayne’s blog showed me what to do.

yahoopiperemovenewline

Above, I’m telling pipes to search the item.description for all new line characters and replace them with nothing a space. Had to put a space in there because words would wind up mashed together.

The preview window in Pipes shows exactly what I wanted to see.

However, the code in the actual RSS feed for the Yahoo! Pipe is showing the left and right angle brackets as &lt; and &gt; which could be a problem.  I was afraid the &lt; and &gt; are going to appear in the email instead of the angle brackets. But email turned out perfectly.

Except for the plain text version. Aweber strips out all the HTML tags, and with no new line characters, the text doesn’t break into separate lines.

Next I will try searching for the <br /> tags and removing them as well as the </p> (end paragraph) tags and leave the new line characters intact.  This way, Aweber can insert their <br /> tags and the plaintext will look right.

Update 09/03/2009: Aweber appears to have fixed this issue and my fix caused a problem today.  The newline characters [/n] are now appearing in the emails.  I changed RSS feed back to regular blog feed instead of going through Yahoo! Pipes.  But I definitely need to keep Pipes in mind should I run into a similar issue again.

Update 09/04/2009: OK, it wasn’t Aweber.  I looked at the code coming out of Pipes and the [n] code is visible there.  I think the code changed somewhere, but Brooke Bayne’s blog now shows that the proper code for a new line is [n].  Or maybe it always said that and I messed it up… but then why did it work before?