I recently exported an image from Fireworks as a table, to use in an email.  Everything looked good, until I tested in GMail.  The table cells were all over the place, and I was almost ready to go back to the drawing board. The image could have been spliced a little better - there were a bit too many splices.  It has an image of a navigation bar, with 7 links.

Nonetheless, after a bit of testing I found this CSS that solved the problem.


#header_table img {
	display: block;
	line-height:0;
	margin: 0;
	padding: 0;
}

#header_table td {
	line-height: 0;
	margin: 0;
	padding: 0;
}

I have a suspicion that the img tag CSS isn't needed, but I haven't tested it with just the table cell.  Of course, I ran the code through Premailer to convert the styles to inline CSS.

I'm sure plenty of people out there have run into rendering issues with different email clients.  Have a tip or resource you'd like to share?  Leave a comment and share it with everyone else.