Image gap in Google Mail

Question

I seem to be having issues getting an image to line up with another image in a newsletter in Google Mail. I believe it is due to an anchor tag increasing the height of the <td> because of its positioning. I have tried to assign a height to the anchor tag, the <tr>, and the <td> with no luck. Can someone help suggest a solution to this problem. A screenshot of the issue is linked below.

screenshot: http://prntscr.com/2lal9x

Live page with the html code: http://www.birchhavenresort.com/newsletter_templates/general.html

Answer 1

Some general rules for table based html email templates:

Add

style="display:block"

to all images.

Don't set the height and width like this,

  <td colspan="3" style="padding:0 35px;width:600px;">

Instead set it using height="40" and width="300" for example.

  <td width="400" height="40">

Also, add valign="top" to all <td> tags, this will vertically align everything to the top.

Also, some email clients etc will strip out the padding:0 35px; bit, so you might need to have some nested tables unfortunately.

Don't style the <tr> tags, as this most likely won't work.