How-to: Fix Gmail displaying gaps between images.

Posted on April 10, 2012 by Jimmy K. in Articles, Tutorials.

An interesting thing happens to graphic emails when viewed with Gmail. Say you have a graphic email (click here for an example) that you sliced up because you want each piece to link to a different URL, then you piece them all back together using tables to make it look like it did before you sliced it, then you input the HTML into an email system and blast it out to your list. Now you have a problem because all the images that you sliced up will have gaps below them when your message is viewed with Gmail.

Gmail automatically adds extra space to table cells which contain only an image. I’ve read online that the way to fix this is to add style=”display: block;” to these images, but I’ve tested that theory and, while it works for a single column of images, it causes display problems when you have, say, four rows of images with the second row having three images next to each other. Anything below the second row simply disappears in Gmail (and who knows where else).

I’ve also read that adding style=”line-height: 50%;” to the images will work too. Since this example is strictly a graphic email, I simply applied style=”line-height: 50%;” to the parent <table> tag, which will also apply to it’s child elements. If you mix text and images in your newsletter, only apply style=”line-height: 50%; to the images to be safe, otherwise you add it to the <table> tags.

Below is an example of my implementation. You can see that I have three rows stacked on top of each other and that the second row has three columns because we want that piece to be send an email when clicked.

<table style="width: 800px; height: 690px; border: 0px; border-collapse: collapse; line-height: 50%;">
<tr style="width: 800px; height: 179px;">
<td style="width: 800px; height: 179px; padding: 0px;"><a href="http://www.sample.com" target="_blank"><img src="top.jpg" style="width: 800px; height: 179px; border: 0px;" alt="Logo"></a></td>
</tr>
<tr style="width: 800px; height: 511px;">
<td style="width: 800px; height: 511px; padding: 0px;"><img src="body.jpg" style="width: 800px; height: 511px; border: 0px;" alt="Body"></td>
</tr>
</table>

<table style="width: 800px; height: auto; border: 0px; border-collapse: collapse; line-height: 50%;">
<tr style="width: 800px; height: 60px;">
<td style="width: 390px; height: 60px; padding: 0px;"><img src="left.jpg" style="width: 390px; height: 60px; border: 0px;" alt=""></td>
<td style="width: 350px; height: 60px; padding: 0px;"><a href="mailto:sample@sample.com"><img src="link.jpg" style="width: 350px; height: 60px; border: 0px;" alt="Contact"></a></td>
<td style="width: 60px; height: 60px; padding: 0px;"><img src="right.jpg" style="width: 60px; height: 60px; border: 0px;" alt=""></td>
</tr>
</table>

<table style="width: 800px; height: 230px; border: 0px; border-collapse: collapse; line-height: 50%;">
<tr style="width: 800px; height: 230px;">
<td style="width: 800px; height: 230px; padding: 0px;"><a href="http://www.sample.com" target="_blank"><img src="bottom.jpg" style="width: 800px; height: 230px; border: 0px;" alt="Footer"></a></td>
</tr>
</table>

Tags: , ,

 

Jimmy K. is a Chicago-based web developer who actively posts tutorials, articles and insights on his web development blog to help other programmers and developers.

You can find Jimmy on Google+ and Twitter.

 
 
 
 
 

If you like this, please leave a comment.

Name (required)
Email Address (required)
Website
Comments: