Extra Padding?

My Design looks perfect in web based browser, but when I open it in the email, extra padding added to the middle cell and the background is moved about 1 px to right. This is getting my nervous!

<!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">
<!--
h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
    font-weight: bold;
    color: #2D2D2D;
}
td {
    padding: 10px;
}
.nopadding {
    padding: 0px;
}
h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: #1E84CE;
}
#page tr #blue {
    background-color: #E4E4E4;
}
body {
    background-color: #0D6AC1;
}
.white {
    color: #FFF;
}
p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 15px;
    color: #666;
}
.information {
    font-size: 12px;
    font-style: italic;
    line-height: 14px;
    font-weight: normal;
    color: #666;
}
.markme {
    color: #1E84CE;
}
.smallmeta {
    font-size: 12px;
    color: #1E84CE;
}
#page {
    background-color: #FFF;
}
a {
    font-style: normal !important;
    font-weight: normal !important;
    text-decoration: none !important;
    color: #1E84CE !important;
}
img {
    display: block;
}
-->
</style>
</head>

<body>
<table width="700" border="0" align="center" cellpadding="0" cellspacing="0" id="page">
  <tr>
    <td colspan="4" class="nopadding"><img src="images/header.gif" alt="Flow" width="700" height="227" align="bottom" /></td>
  </tr>
  <tr>
    <td width="41" rowspan="3" class="nopadding"><img src="images/left.gif" alt="Left Background" width="40" height="573" align="right" /></td>
    <td height="75" colspan="2" valign="bottom"><h1>Dear Client Name</h1></td>
    <td width="40" rowspan="3" class="nopadding"><img src="images/right.gif" alt="Right Background" width="40" height="573" align="left" /></td>
  </tr>
  <tr>
    <td width="383" valign="top"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mollis metus sit amet tortor scelerisque vel iaculis quam dapibus. Mauris sed massa quis neque commodo vulputate nec sit amet magna. Praesent vitae velit nisi, in tincidunt magna. Phasellus a mi vitae mauris gravida mollis. Duis sed ipsum felis, at blandit nulla. Donec non tempus sem. Aliquam lorem justo, fermentum ac scelerisque at, luctus nec erat.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mollis metus sit amet tortor scelerisque vel iaculis quam dapibus. Mauris sed massa quis neque commodo vulputate nec sit amet magna. Praesent vitae velit nisi, in tincidunt magna. Phasellus a mi vitae mauris gravida mollis. Duis sed ipsum felis, at blandit nulla. Donec non tempus sem. Aliquam lorem justo, fermentum ac scelerisque at, luctus nec erat.</p></td>
    <td width="236" valign="top" id="blue"><h2>Header here</h2>
      <p class="information">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mollis metus sit amet tortor scelerisque vel iaculis quam dapibus. Mauris sed massa quis neque commodo vulputate nec sit amet magna. Praesent vitae velit nisi, in tincidunt magna.</p>
    <p class="information"> Phasellus a mi vitae mauris gravida mollis. Duis sed ipsum felis, at blandit nulla. Donec non tempus sem. Aliquam lorem justo, fermentum ac scelerisque at, luctus nec erat.</p>
    <p>&nbsp;</p></td>
  </tr>
  <tr>
    <td valign="bottom" id="content2"><p class="smallmeta">Sender's Name<br />
        +965 XXXXXXXX<br />
        <a href="mailto:contact@iwanttoflow.com">email@email.com</a><br />
      <a href="www.iwanttoflow.com">www.agencywebsite.com</a></p></td>
    <td valign="bottom" id="content2">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="4" class="nopadding"><img src="images/footer.gif" alt="Footer Background" width="700" height="64" align="top" /></td>
  </tr>
</table>
</body>
</html>

http://iwanttoflow.com/email/images/marked.jpg
Any help is really appreciated..

BThies BThies, 6 years ago

Hi ahamzawy,

I'd recommend the following:
• Use nested tables for the entire design instead of rowspans and colspans - they tend to throw off designs depending on which e-mail client is viewing them.
• For padding, all <td>'s in the same <tr> row must have the same top and bottom padding or breaks may appear in Outlook 2007/2010.  You can always nest a table with a single <td> with the padding.

More information here:  http://www.campaignmonitor.com/forums/viewtopic.php?id=1475


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