E-mailer Outlook 2007 adding space between TD cells

HTML & CSS
1

Hi i am pulling my hair out with Outlook 2007 and code that renders fine in IE is adding spaces to the table in Outlook!!

I dont know why. Picture in Outlook is here: http://cid-0990c0a249621766.office.live.com/embedphoto.aspx/.Public/anoying.jpg

I have tried everything, from white space reset, to making sure there are no spaces or breaklines between elements but it still shows with spaces. Code is below:

<html>
<head>
<title>Mailer</title>
<style media="all" type="text/css">
img {display:block;}
table td { border-collapse: collapse; }
</style>
</head>
<body>
<table width="852" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td><table width="100&#37;" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr><td width="28"><img src="l.jpg" width="28" height="327"></td>
            <td width="821">&nbsp;</td>
            <td width="28"><img src="r.jpg" width="28" height="327"></td></tr>
          <tr><td colspan="3"><img src="div.jpg" width="852" height="27"></td></tr>
          <tr><td width="28"><img src="l.jpg" width="28" height="327"></td>
            <td>&nbsp;</td>
            <td width="28"><img src="r.jpg" width="28" height="327"></td></tr>
          <tr><td colspan="3"><img src="div.jpg" width="852" height="27"></td></tr>
        </table></td>
      </tr>
      <tr>
        <td>footer</td>
      </tr>
    </table></td>
  </tr>
</table>
</body>
</html>

Full code including graphics are here: http://cid-0990c0a249621766.office.live.com/embedicon.aspx/.Public/emailer.zip

Any ideas greatly appreciated, sorry for information overload I have been pulling my hair out on this for hours. :injured:

Many thanks in advance,

Chris

2

Would you mind putting this online somewhere with absolute links? Then it would be easier to test and suggest solutions. Rather than using col spans etc, I would recommend using tables within tables. I find that much more robust.

3

Hi Ralph, yep sorry for that, I have uploaded the screen shot below:

Source files are here: [URL=“http://www.unifiedmicrosystems.com/wp-content/uploads/2010/10/error.zip”]

And the source code is below (i have made it even simpler, a table with two columns, the spaces are still being added):

<html>
<head>
<title>Mailer</title>
<style media="all" type="text/css">
*{ margin: 0; padding: 0;}
img {display:block;}
table td { border-collapse: collapse; }
</style>
</head>
<body>
<table width="852" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr><td><img src="div.jpg" width="852" height="27"></td></tr>
  <tr><td><img src="div.jpg" width="852" height="27"></td></tr>
</table>
</body>
</html>

Please note, I am designing the above in HTML (as an HTML file), i open it in IE8, then goto Send as Page, which pops up the Outlook 2007 or Outlook 2010 window with the html embedded inside. Not sure if its a problem with my HTML for emailers, or if its a problem with IE8 adding something. Either way i have done mailers before this way without issue, so am very confused.

Thanks again,

Chris

4

What I really meant was can you post the full code of the email, with absolute links to the images that are hosted online somewhere. That makes it easier to test. I don’t have time to upload your images to my own server, re-fashion the links etc.

5

Hi Ralph, ok gotcha fully understood. Please see http://www.monsterserve.net/test/mailer.html

Opening the above page, going File -> Sent to -> As page, causes the 1px or 2px gaps to appear between rows.

Many thanks,

Chris

6

OK, good, that’s what I was after.

However, now that I’m testing this, no gaps show up when I open this in Outlook 2007 n Win7. What OS are you using?

7

hi I’m using Windows 7 and Outlook 2010… could it be my system?!

8

Nah, must be Outlook 2010. I would be shocked if there were no new bugs in Outlook 2010. MS has a reputation to maintain, after all.

9

Try removing the display:block from the image and applying vertical-align:top instead.


img {vertical-align:top}
10

Ah, good idea Paul. The other thing I’ve found is that inline CSS is much more reliable for HTML emails. So, as painful as it is, I would write it like this:

<img src=“div.jpg” style=“vertical-align: top” width=“852” height=“27”>

Outlook 07 (at least) is incredibly fussy about where the styles are placed. (I’ve just finished an email like this, and it took me the better part of a day to find a way to get Outlook to accept some styles. I ended up resorting to <font> tags. :x )

11

Yes I should have mentioned that styles should be inline and there are some tools around that will do that for you automatically.:slight_smile: