Question

I am coding a newsletter in a table format that ought to be compatible with (mostly) every e-mail client, but Outlook 2007 adds 1px spaces to every image that’s in one row with text-elements.

I set border-collapse: collapse, cellpadding="0" and cellspacing="0" on the table and style="font-size:1px; line-height:0;" on the TDs but it doesn’t work. IMGs are display:block. Also setting valign="bottom" on the top element and valign="top" on the bottom one didn’t work.

Here is my fiddle: http://jsfiddle.net/ycpNK/9/ – The red and the green boxes are the ones affected by the spacing. You can reproduce this bug in Outlook 2007.

Does someone know how to get rid of the spaces?

Answer 1

If I recall correctly, setting display:block on the image corrects this behaviour. So try:

<img src="myimage.jpg" width="100" height="20" style="display:block;" />

Another thing to try is to remove all unnecessary whitespace from the cells that you’re getting the problems.

---

By ‘remove unnecessary whitespace’ I mean if you have this:

<td> *here there may be several spaces and a return character*
    <img src="foo.gif" />
</td>

Replace it with this:

<td><img src="foo.gif" /></td> *no unnecessary spaces or returns*

It’s hard to diagnose the problem without seeing your html but this has fixed some of my layout errors.