Outlook 2007 adding 1px borders

Hi all.

Can anyone help me? I've got an email here that has weird 1px borders strewn about, only in Outlook 2007, and I can't seem to get rid of them, whatever I try. Here's what it looks like in Outlook 2007:

http://dl.dropbox.com/u/3048382/Huhtamaki-Email.jpg

And here's that code I've got (I didn't do most of this, came from a template):

<!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>Huhtamaki Newsletter Template</title>
<style>
html, body {
    margin: 0;
    padding: 0;
}

p {
    margin: 5px 0;
}

table, td {
    border-collapse: collapse;
    margin: 0;
    padding: 0;
    border: none;
}

img {
    margin: 0;
}
</style>
</head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center" bgcolor="#dfecf5"><table width="575" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td height="30" style="text-align: center;"><span style="font-size:11px; font-family:Arial; color:#000; text-align:center;">Having trouble viewing this e-mail? <webversion style="color:#1462a4">View it in your browser</webversion></span></td>
        </tr>
        <tr>
          <td><img src="top-shadow.gif" width="575" height="17" alt="header shadow" /></td>
        </tr>
        <tr>
          <td style="background-color:#1462a4; border: none;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td><!--HEADER LOGO-->
                  
                  <table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td width="15">&nbsp;</td>
                      <td style="text-align:left"><span style="font-family:Arial; font-size:11px; color:#fff; text-align:left; font-style:regular"><$title default='Month Year'$></span></td>
                      <td style="text-align:right"><img src="huh-top-wave.jpg" width="400" height="26" /></td>
                    </tr>
                  </table>
                  
                  <!--END HEADER LOGO--></td>
              </tr>
            </table></td>
        </tr>
        <tr>
          <td align="right" height="88"><img src="huhtamaki-hdr-logo.jpg" alt="stripes" width="575" height="88" /></td>
        </tr>
        <tr>
          <td align="center" style="background-color:#fafafa; border:0px solid #CCC;"><!--CONTENT--> 
            <!--BIG FEATURE-->
            
            <table style="font-family:Arial; font-size:12px; color:#666;" width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td width="15">&nbsp;</td>
                    <td style="text-align:left;">
                        <h1 style="font-size: 35px; font-weight: normal; font-family: Arial; color: #0061a6; margin: 5px 0 0 0;"><$title default='Headline'$></h1>
                        <h2 style="font-family: Georgia, serif; font-size: 25px; font-weight: normal; font-style: italic; color: #000000; margin: 0 0 10px 0;"><$title default='Subtitle'$></h2>
                    </td>
                    <td width="15">&nbsp;</td>
                </tr>
                <tr>
                    <td colspan="3" style="text-align:center;"><img src="<$imagesrc default='product-release-placeholder.jpg' link='true'$>" width="575" /></td>
                </tr>
                <tr>
                    <td colspan="3" style="text-align:center;"><img src="<$imagesrc default='product-release-image-base.jpg' link='true'$>" width="546" /></td>
                </tr>
                <repeater>
                <tr>
                    <td colspan="3" style="text-align:left; padding: 15px;"><h1 style="font-size:18px; margin:0"><$title$></h1>
                    <$description$></td>
                </tr>
                </repeater>
            </table>
            <!--<img src="dottedline.gif" alt="dotted line" />--> 
            <!--END BIG FEATURE--> 
            <!--TWO COLS-->
            
            <repeater>
                <img src="dottedline.gif" alt="dotted line" />
                <table style="font-family:Arial; font-size:12px; color:#666;" width="560" align="center" border="0" cellspacing="0" cellpadding="7">
                  <tr>
                    <td style="text-align:left width: 228px;" width="228"><img src="<$imagesrc default='product_small_1.jpg' link='true'$>" width="214" /></td>
                    <td style="text-align:left" valign="top"><h1 style="font-size:16px; margin:0"><$title$></h1>
                    <$description$></td>
                  </tr>
                </table>
            </repeater>
            <!--END TWO COLS-->
            <!--ONE COL-->
            
            <repeater>
                <img src="dottedline.gif" alt="dotted line" />
                <table style="font-family:Arial; font-size:12px; color:#666;" width="560" cellpadding="0" cellspacing="0" border="0">
                    <tr>
                        <td style="text-align:left; padding: 15px;"><h1 style="font-size:18px; margin:0"><$title$></h1>
                        <$description$></td>
                    </tr>
                </table>
            </repeater>
            
            </td>
        </tr>
        <tr>
          <td align="left"><img src="huh-bottom-wave.jpg" alt="stripes" width="575" height="70" /></td>
        </tr>
        <tr>
          <td style="background-color:#1462a4; border:0px solid #fff;"><!--FOOTER-->
            
            <table width="100%" border="0" cellspacing="0" cellpadding="0" style="font-family:Arial; font-size:12px; color:#0061a6; text-align:center">
              <tr bgcolor="#0061a6">
                <td width="63%" align="left" valign="top"><img src="huh-bottom-wave-2.jpg" width="288" height="130" /></td>
                <td width="37%" valign="top" style="font-family:Arial; font-size:11px; color:#fff; text-align:left; padding-left:15px; font-style:regular">Huhtamaki New Zealand Ltd<br />
                  30 Keeling Road<br />
                  P.O. Box 21-296<br />
                  Henderson, Auckland<br />
                  New Zealand
                  <p>Tel:  +64 - (0) 9 837 0510<br />
                    Fax: +64 - (0) 9 837 1195</p></td>
              </tr>
            </table>
            
            <!--END FOOTER--></td>
        </tr>
        <tr>
          <td style="font-size:11px; font-family:Arial; color:#000; text-align:center;"><img src="footer-shadow.gif" width="575" height="18" alt="footer shadow" /><br />We hope you found this message to be useful. <unsubscribe style="color:#1462a4">Click here</unsubscribe> to unsubscribe. <br />You are subscribed as <span style="color:#1462a4">[email]</span><br />
            <img src="spacer.gif" width="550" height="25" alt="spacer" /></td>
        </tr>
      </table></td>
  </tr>
</table>
</body>
</html>
roshodgekiss roshodgekiss, 6 years ago

Hi cfidecaro, welcome to the forums! It turns out that Outlook '07 is being a little to literal with the border CSS in the template. Simply replace:

border:0px solid #fff; & border:0px solid #CCC;

With:

border: none;

... and you should be set. Turns out that the original code is being interpreted as

border-width:0px;border-style:solid;border-color:#CCC;

and the border-width:0px; is being ignored. Hope this works out!


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

That's done it! Thanks!

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