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.

Postie and Gmail/Google Apps

My Google Apps account was not working with the Postie plugin.

I got this error message:

Unable to connect. The server said – POP3 connect: Error
Try putting in your full email address as a userid and try again.

My settings were:

Mail Protocol: POP3
(The only other option IMAP/IMAP-SSL/POP3-SSL had a message saying it was not available.)

Port: 995

Postie Time Correction: –6 hours

Mail Server: pop.gmail.com

Mail Userid: <email address>

Mail password: <password>

I did a little Google digging and found the solution in a comment at the very bottom of this page at Economy Sized Geek.

All I had to do was add “ssl://” to the beginning of my mail server to become “ssl://pop.gmail.com”

After making the change, I was able to connect to the mail server. Thank you, lewen7er9.