Problem with tables

Hello! This is my first post here, but i figure this would be the best place to ask about my problem.

Thing is, I'm attempting to design a email-based newsletter, but keep running into some problems with my design. There are two white spaces appearing above the logo and at the bottom of the image when trying to view them in gmail. Check pics for details -



http://img245.imageshack.us/img245/5098/screen2g.png
White line above logo


http://img683.imageshack.us/img683/8812/screen1ar.png

Same kind of line below everything.

Here is the code I'm using:

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


<table width="98%" border="0" style="background-color: #b4cad4;">


<tr><td><table width="520" height="100" border="0" cellspacing="0" cellpadding="0" style="background-color:#FFF; margin: 0 auto 0 auto;">


       <tr><td><table width="520" border="0" cellspacing="0" cellpadding="0"><tr><td width="520" height="46"><img src="SRC" alt="top" width="520" height="46"/></td></tr></table></td></tr>
       
       
       <tr><td><table width="520" border="0" cellspacing="0" cellpadding="0" style="margin: 0 auto 0 auto;" background="BG-IMAGE"><tr><td width="520" height="143"><img src="IMAGE" width="501" height="143" alt="Energihuset i Uppsala - Nyhetsbrev nr. 2" style="margin-left:8px;"/></td></tr></table></td></tr>
       
       
       <tr><td width="520px"><table width="520" border="0" cellspacing="0" cellpadding="0"><tr><td background="BACKGROUND" width="520"><span style="margin:0 auto 0 auto; width:490px;">{$content}</td></tr></table></td></tr>
      
      
      <tr><td td width="520px" height="48"><table width="520" border="0" cellspacing="0" cellpadding="0"><tr><td width="520px" height="48"><img src="IMAGE" alt="bottom" width="520" height="48"/></table></td></tr>
     

</table>
    
</td>
</tr> 
</table>
</body>
</html>

The content is then rendered in cms made simple. Any help is appreciated, I tried everything in my arsenal to tackle this problem.

Thanks!

Mathew Mathew, 6 years ago

The most likely culprit is Gmail adding a margin to your image - a simple img {display:block} should help with that. Check out http://www.campaignmonitor.com/blog/post/3132/how-to-stop-gmail-from-adding-a-margin-to-your-images/ for details.


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
Karlijn_RAEN, 6 years ago

What if block doesn't work?
well.. somehow the table sizes change in gmail

BThies BThies, 6 years ago

You have tags that weren't closed properly, tags not formatted properly, and unsupported elements.

Try this instead:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body { margin:0 !important; padding:0 !important; display:block !important; }
.ReadMsgBody { width:100% !important; }
.ExternalClass { width:100% !important; display:block !important; }
div, p, li, a { -webkit-text-size-adjust:none; }
img { display:block; }
</style>
</head>
<body>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td align="center" bgcolor="#b4cad4"><table width="520" border="0" cellspacing="0" cellpadding="0" style="background-color:#ffffff;">
        <tr>
          <td width="520" bgcolor="#ffffff"><img src="SRC" alt="top" width="520" height="46" style="display:block;" /></td>
        </tr>
        <tr>
          <td width="520" background="BG-IMAGE"><table width="520" border="0" cellspacing="0" cellpadding="0">
              <tr>
                  <td width="8"></td>
                <td width="501" height="143"><img src="IMAGE" width="501" height="143" alt="Energihuset i Uppsala - Nyhetsbrev nr. 2" style="display:block;"/></td>
                <td width="8"></td>
              </tr>
            </table></td>
        </tr>
        <tr>
          <td width="520" background="BACKGROUND"><table width="520" border="0" cellspacing="0" cellpadding="0">
              <tr>
                      <td width="15"></td>
                    <td width="490"><span>{$content}</span></td>
                    <td width="15"></td>
              </tr>
            </table></td>
        </tr>
        <tr>
          <td width="520" height="48"><img src="IMAGE" alt="bottom" width="520" height="48"/></td>
        </tr>
      </table></td>
  </tr>
</table>
</body>
</html>

Brian Thies
Professional Email Developer
Thies Publishing

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098