Displaying a table in Gmail
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.