• 0

How to fix annoying 1px gap in table cell in email newsletter


Question

hi,

i am creating an email newsletter and i use table to create the layout. I have this very annoying 1px or 2px gap between <tr></tr> and <tr></tr> when I did the test and view it in gmail. I managed to fix the 1px gap between <td> by adding margin and padding to 0 but still couldn't get rid of <tr> part.

any help? :pinch:

Link to comment
Share on other sites

7 answers to this question

Recommended Posts

  • 0

The <table> has cellpadding and cellspacing by default. You will need to add:

 &lt;table cellspacing="0" cellpadding="0"&gt;

That will remove any gaps.

i already did that... and still there.

post-18012-0-99502200-1295556009.png

Link to comment
Share on other sites

  • 0

Well, post up your code and HTML then.

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
&lt;title&gt;&lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;

&lt;table width="700" cellpadding="0" cellspacing="0" style="padding:0; margin:0;" border="0" align="center"&gt;
&lt;tr&gt;
&lt;td valign="top" align="left" width="272" height="48"&gt;&lt;img src="https://www.engagewithnawbo.com/eblast/01.jpg" width="272" height="49" /&gt;&lt;/td&gt;
&lt;td valign="top" align="left" width="255" height="48"&gt;&lt;a href="http://www.nawbo-sfba.org/" target="_blank"&gt;&lt;img src="https://www.engagewithnawbo.com/eblast/02.jpg" style="display:block" width="255" height="49" border="0" /&gt;&lt;/a&gt;&lt;/td&gt;
&lt;td valign="top" align="left" width="172" height="48"&gt;&lt;a href="http://www.nawbo-sv.org/" target="_blank"&gt;&lt;img src="https://www.engagewithnawbo.com/eblast/03.jpg" width="173" height="49" border="0" /&gt;&lt;/a&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td valign="top" align="left" width="273" height="201"&gt;&lt;img src="https://www.engagewithnawbo.com/eblast/04.jpg" width="272" height="202" /&gt;&lt;/td&gt;&lt;td valign="top" align="left" width="256" height="201"&gt;&lt;img src="https://www.engagewithnawbo.com/eblast/05.jpg" width="255" height="202" /&gt;&lt;/td&gt;&lt;td valign="top" align="left" width="171" height="201"&gt;&lt;img src="https://www.engagewithnawbo.com/eblast/06.jpg" width="173" height="202" /&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td valign="top" align="left" width="273" height="145"&gt;&lt;img src="https://www.engagewithnawbo.com/eblast/07.jpg" width="272" height="146" /&gt;&lt;/td&gt;
&lt;td valign="top" align="left" width="256" height="145"&gt;&lt;img src="https://www.engagewithnawbo.com/eblast/08.jpg" width="255" height="146" /&gt;&lt;/td&gt;
&lt;td valign="top" align="left" width="171" height="145"&gt;&lt;img src="https://www.engagewithnawbo.com/eblast/09.jpg" width="173" height="146" /&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr valign="top" align="left"&gt;
&lt;td valign="top" align="left" width="273" height="142"&gt;&lt;img src="https://www.engagewithnawbo.com/eblast/10.jpg" width="272" height="142" /&gt;&lt;/td&gt;
&lt;td valign="top" align="left" width="256" height="142"&gt;&lt;img src="https://www.engagewithnawbo.com/eblast/11.jpg" width="255" height="142" /&gt;&lt;/td&gt;
&lt;td valign="top" align="left" width="171" height="142"&gt;&lt;img src="https://www.engagewithnawbo.com/eblast/12.jpg" width="173" height="142" /&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr valign="top" align="left"&gt;
&lt;td valign="top" align="left" width="273" height="144"&gt;&lt;img src="https://www.engagewithnawbo.com/eblast/13.jpg" width="272" height="144" /&gt;&lt;/td&gt;
&lt;td valign="top" align="left" width="256" height="144"&gt;&lt;img src="https://www.engagewithnawbo.com/eblast/14.jpg" width="255" height="144" /&gt;&lt;/td&gt;
&lt;td valign="top" align="left" width="171" height="144"&gt;&lt;img src="https://www.engagewithnawbo.com/eblast/15.jpg" width="173" height="144" /&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr valign="top" align="left"&gt;
&lt;td valign="top" align="left" width="273" height="45"&gt;&lt;a href="http://www.engagewithnawbo.com/" target="_blank"&gt;&lt;img src="https://www.engagewithnawbo.com/eblast/16.jpg" width="272" height="45" border="0" /&gt;&lt;/a&gt;&lt;/td&gt;
&lt;td valign="top" align="left" width="256" height="45"&gt;&lt;a href="http://www.engagewithnawbo.com/" target="_blank"&gt;&lt;img src="https://www.engagewithnawbo.com/eblast/17.jpg" width="255" height="45" border="0" /&gt;&lt;/a&gt;&lt;/td&gt;
&lt;td valign="top" align="left" width="171" height="45"&gt;&lt;a href="http://www.engagewithnawbo.com/" target="_blank"&gt;&lt;img src="https://www.engagewithnawbo.com/eblast/18.jpg" width="173" height="45" border="0" /&gt;&lt;/a&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr valign="top" align="left"&gt;
&lt;td valign="top" align="left" width="273" height="38"&gt;&lt;a href="http://www.engagewithnawbo.com/about.html" target="_blank"&gt;&lt;img src="https://www.engagewithnawbo.com/eblast/19.jpg" width="215" height="38" border="0" /&gt;&lt;/a&gt;&lt;a href="http://www.engagewithnawbo.com/faqs.html" target="_blank"&gt;&lt;img src="https://www.engagewithnawbo.com/eblast/19a.jpg" width="57" height="38" border="0" /&gt;&lt;/a&gt;&lt;/td&gt;
&lt;td valign="top" align="left" width="256" height="38"&gt;&lt;a href="http://www.engagewithnawbo.com/registration.html" target="_blank"&gt;&lt;img src="https://www.engagewithnawbo.com/eblast/20.jpg" width="102" height="38" border="0" /&gt;&lt;/a&gt;&lt;a href="http://www.engagewithnawbo.com/events.html" target="_blank"&gt;&lt;img src="https://www.engagewithnawbo.com/eblast/20a.jpg" width="80" height="38" border="0" /&gt;&lt;/a&gt;&lt;a href="http://www.engagewithnawbo.com/testimonials.html" target="_blank"&gt;&lt;img src="https://www.engagewithnawbo.com/eblast/20b.jpg" width="73" height="38" border="0" /&gt;&lt;/a&gt;&lt;/td&gt;
&lt;td valign="top" align="left" width="171" height="38"&gt;&lt;a href="http://www.engagewithnawbo.com/sponsors.html" target="_blank"&gt;&lt;img src="https://www.engagewithnawbo.com/eblast/21.jpg" width="173" height="38" border="0" /&gt;&lt;/a&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr valign="top" align="left"&gt;
&lt;td valign="top" align="left" width="273" height="45"&gt;&lt;img src="https://www.engagewithnawbo.com/eblast/22.jpg" width="272" height="45" border="0" /&gt;&lt;/td&gt;
&lt;td valign="top" align="left" width="256" height="45"&gt;&lt;img src="https://www.engagewithnawbo.com/eblast/23.jpg" width="255" height="45" border="0" /&gt;&lt;/td&gt;
&lt;td valign="top" align="left" width="171" height="45"&gt;&lt;img src="https://www.engagewithnawbo.com/eblast/24.jpg" width="173" height="45" border="0" /&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;


&lt;/body&gt;
&lt;/html&gt;

Link to comment
Share on other sites

  • 0

Wow I forgot the easiest thing.. it's gMail that's the problem (as well as having to ensure it renders properly in other mail clients.)

Add:

 style="display:block"

To all of the images you are using. Let me know if that works.

Link to comment
Share on other sites

  • 0

Wow I forgot the easiest thing.. it's gMail that's the problem (as well as having to ensure it renders properly in other mail clients.)

Add:

 style="display:block"

To all of the images you are using. Let me know if that works.

sweet. that worked :) thx.

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.