Email campaign not displaying properly in GMail and Outlook 7

Hello
Can anyone help? My campaign displays perfectly in most email clients except Google mail and Outlook 7. This is my code...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>korinto_choc.jpg</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
td img {display: block;}.columnLeft {font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 9px;
    font-weight: normal;
    color: #000000;
    text-align: left;
}
.columnRight {font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 9px;
    font-weight: normal;
    color: #000000;
    text-align: right;
}
a:link {
    color: #000000;
}
a:visited {
    color: #000000;
}
.text {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: normal;
    color: #000000;
    background-image: url(images/body_text.jpg);
    background-repeat: no-repeat;
    text-align: left;
    vertical-align: top;
}
.textBold {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: bold;
    color: #000000;
    text-align: left;
    vertical-align: top;
}
</style>
<!--Fireworks CS3 Dreamweaver CS3 target.  Created Mon Nov 09 16:39:13 GMT+0000 (GMT) 2009-->
</head>
<body bgcolor="#ffffff">
<table border="0" cellpadding="0" cellspacing="0" width="600" height="786">
<!-- fwtable fwsrc="korinto_choc.png" fwpage="Page 1" fwbase="korinto_choc.jpg" fwstyle="Dreamweaver" fwdocid = "1327513231" fwnested="0" -->
  <tr>
   <td><img src="images/spacer.gif" width="106" height="1" border="0" alt="" /></td>
   <td><img src="images/spacer.gif" width="194" height="1" border="0" alt="" /></td>
   <td><img src="images/spacer.gif" width="117" height="1" border="0" alt="" /></td>
   <td><img src="images/spacer.gif" width="183" height="1" border="0" alt="" /></td>
   <td><img src="images/spacer.gif" width="1" height="1" border="0" alt="" /></td>
  </tr>

  <tr>
   <td colspan="4"><a href="http://www.nwglobalvending.co.uk/" target="_blank"><img name="header" src="images/header.jpg" width="600" height="200" border="0" id="header" alt="Experience chocolate heaven" /></a></td>
   <td><img src="images/spacer.gif" width="1" height="200" border="0" alt="" /></td>
  </tr>
  <tr>
   <td colspan="4"><a href="http://www.nwglobalvending.co.uk/Productrange/Necta/HotBeverageDispensers/Korinto/tabid/323/Default.aspx" target="_blank"><img name="korinto_choc_r2_c1" src="images/korinto_choc_r2_c1.jpg" width="600" height="70" border="0" id="korinto_choc_r2_c1" alt="We lead, others follow" /></a></td>
   <td><img src="images/spacer.gif" width="1" height="70" border="0" alt="" /></td>
  </tr>
  <tr>
   <td><img name="korinto_choc_r3_c1" src="images/korinto_choc_r3_c1.jpg" width="106" height="373" border="0" id="korinto_choc_r3_c1" alt="" /></td>
   <td colspan="2" class="text"><p class="textBold">We're pleased to announce the arrival of the latest edition to our sought-after K range of table-top machines.</p>
     <p>A new variation of Korinto, the ES2IN, is available now and it adds the offer of a top-quality chocolate drink to its famous ‘High Street’ tasting coffee.</p>
     <p>Hot Chocolate is an industry standard, but the quality delivered by this new Korinto raises <br />
      the bar in taste, quality and consistency. <br />
      We’re delighted to offer the Korinto ES2IN<br />
      and I must say that it has been eagerly<br />
      awaited by many of our customers.</p>
     <p class="textBold">Korinto ES2IN is in stock now - so,<br />
      for great tasting coffee and now,<br />
      tempting, delicious hot chocolate; <br />
      get in touch with us now!</p>
     <p>Kind regards<br />
    Mike Kane, Sales Director. N&amp;W</p></td>
   <td><a href="http://www.nwglobalvending.co.uk/Productrange/Necta/HotBeverageDispensers/Korinto/tabid/323/Default.aspx" target="_blank"><img name="korinto_choc" src="images/korinto_choc.jpg" width="183" height="373" border="0" id="korinto_choc" alt="Korinto ES2IN" /></a></td>
   <td><img src="images/spacer.gif" width="1" height="373" border="0" alt="" /></td>
  </tr>
  <tr>
   <td colspan="4"><img name="contact_strip" src="images/contact_strip.jpg" width="600" height="39" border="0" id="contact_strip" alt="Call N&W now on 01902 355 000" /></td>
   <td><img src="images/spacer.gif" width="1" height="39" border="0" alt="" /></td>
  </tr>
  <tr>
   <td colspan="4"><a href="http://www.vend-ex.co.uk/" target="_blank"><img name="vendex_strip" src="images/vendex_strip.gif" width="600" height="64" border="0" id="vendex_strip" alt="Vendex - See us on Stands E18 and F14 on November 17th" /></a></td>
   <td><img src="images/spacer.gif" width="1" height="64" border="0" alt="" /></td>
  </tr>
  <tr>
   <td colspan="2"><span class="columnLeft">Having trouble viewing this email?<br />
       <webversion> View it in your browser </webversion>

BThies BThies, 7 years ago

- Background images not supported

- Colspans & Rowspans can always cause a number of issues depending on the design - I prefer to code the width of the columns rather than use spacers whenever possible.  Nested tables work quite well.

Can you post an image of how it's displaying in Outlook 2007?  (or e-mail the images and I can take a look on this end)


Brian Thies
Professional Email Developer
Thies Publishing
stendal, 6 years ago

Having the same problem.

It looks like the following HTML:
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/spacer.gif" width="106" height="1" border="0" alt="" /></td>
</tr>
</table>

Makes the following redering in Gmail:
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/spacer.gif" width="106" height="106" border="0" alt="" /></td>
</tr>
</table>

Since the original spacer.gif image has 1:1 height (1px) and width (1px), Gmail seems to take over the height so it fits the original proportions.

Any solutions out there?

stendal, 6 years ago

My solution:

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width:106px; height:1px; line-height:1px;font-size:0;"><img src="images/spacer.gif" width="1" height="1" border="0" alt="" /></td>
</tr>
</table>

This looks nice in Gmail too... :)

tpeterson, 6 years ago

I had a similar problem in gmail a few months ago and was able to fix it by adding the "display:block" css to all my images.
This seemed to remove all the erroneous space in images (for gmail at least)

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