Issues with Images on HTML Emails

Question

Hi, I'm having difficulty with building a HTML email. I currently have converted my entire email to an 8 row table in the below order:

1. Header (image)
2. Date Field
3. Content Field
4. Content Base (rounded bottom image)
5. Footer top (rounded top image)
6. Footer
7. Footer Base (rounded bottom image)

As you can see, four of these fields have an image in them. I've been very strict with the layout of my table, making it 550px wide, the images themselves are 550px wide and I use border-collapse on the table to remove the appearence of field edges.

The problem I'm having is that all the fields without images in them stick out an extra couple of pixels, which as I'm using rounded bottoms and tops it kinda ruins the layout. I simple can't fathom why it's doing this.

The images are added as per the <img> tag and what I THINK is happening is that it's putting a spacing between the edge of the field and the image and as the rest of the table is dependent on the width of the largest one it's pushing the others out a couple of pixels. I am struggling to find a solution to this, I've tried lots of different things such as minus margins on the images and tables. Can anybody offer any solutions to this?

The image below demonstrates this "stepping" and although minor, upon exporting to outlook it appears to double. The image starts above the line "Hydref 2010" -

UPDATE: I used the cellspacing and cellpadding commands and reduced them to 0 which fixed the display in a browser, but in Outlook, it's the same

Answer 1

HTML Emails are always a bit "fuuuuuuuuuuuuuuuuuuuuuuuu", and leave me feeling deflated.

You have taken the right approach to use tables, and the problem you are having is one I have seen before, but for the life of my I can't remember how I fixed it.

Have you tried condensing your columns into one row of markup:

<td>
    <img>
</td>

into

<td><img></td>

IE and word are terrible for rending whitespace.

If that fails, you could always split your columns, so you have a spacer either side of the title and a col-span on the main images?

Answer 2

Tables are generally bad and I'm a bad boy, but this is just bad. Please post code.