CODEWITHSUNDEEP
htmlgmailtablelayouthtml-email
Username_null
Username_null

Reputation: 1315

html email issues with layout

I haven't had to send any mailshots for a number of years and I remember the process to be very painful then.

I have cut up my design into three sections and placed them within a table the table has a height and width defined and so do all the individual elements, however when viewed in an email client such as Gmail there are spaces between the three table rows.

My html. I think you'll agree it couldn't be more simplified!

<table border="0" cellpadding="0" cellspacing="0" width="550" height="550">
 <tr>
  <td colspan="2" bgcolor="#ffffff" width="550" height="104">
<img src="images/OC_01.gif" alt="" width="550" height="104"></td>
 </tr><tr>
  <td bgcolor="#ffffff" width="246" height="341">
<img src="images/OC_02.gif" alt="" width="246" height="341"></td>
  <td bgcolor="#ffffff" width="304" height="341">
<img src="images/OC_03.gif" alt="" width="304" height="341"></td>
 </tr><tr>
<td colspan="2" bgcolor="#014280" width="550" height="105" valign="top">
<a href="TBA"><img src="images/OC_04.gif" alt="" width="550" height="105"></a></td>
 </tr>
</table>

Is there anyone here today that has enough email html experience to point me in the right direction?

Edit to add: I have been dissecting some commercial emails that have been sent to me in the past and I have found that some of them also have this weird spacing issue in Gmail. I have also noticed that each has been designed in such a way as to accommodate any extra spacing between the rows so I'm going to assume that the answer to this question is to ensure that the design is produced in such a way that these gaps are not an issue.

Upvotes: 1

Views: 5099

Answers (3)

Gabe
Gabe

Reputation: 21

You must include style="display:block" with all images to prevent the gap issue in various email clients.

Example:

<img src="http://www.website.com/images/kitty.jpg" alt="Picture of Kitty" 
 width="1000" height="1000" 
 style="border:none; margin:0px; padding:0px; **display:block;**"/>

Upvotes: 2

vlgalik
vlgalik

Reputation: 477

Add following attribute to the IMG element:

style="display: block;"

I've added it for you http://jsfiddle.net/xE9Qr/

Default IMG display is inline-block which produces unwanted space after.

I've tested it using http://ctrlq.org/html-mail/ and the spaces between TR elements are gone now. Remeber to see the result you have to send HTML table layout email to your gMail account.

Upvotes: 1

ghstcode
ghstcode

Reputation: 2912

Adding align="top" to images seems to be a potential fix:

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" bgcolor="#ffffff">
    <img src="images/OC_01.gif" alt="" width="550" height="104" align="top"/>
</td>
</tr>
<tr>
<td bgcolor="#ffffff" width="246">
    <img src="images/OC_02.gif" alt="" width="246" height="341" align="top" />
</td>
<td>
    <img src="images/OC_03.gif" alt="" width="304" height="341" align="top" />
</td>
</tr>
<tr>
<td colspan="2" bgcolor="#014280">
    <a href="addlater"><img src="images/OC_04.gif" alt="" width="550" height="105" align="top" /></a></td>
</tr>
</table>

Upvotes: 0

Related Questions