Outlook 2007 borders and 1px padding on table cells!
April 29th, 2008Anyone creating email newsletters on a daily basis will tell you how hard it is to get them to render properly in all email clients, but getting them to work in Outlook 2007 can be maddening as any quick Google search will show.
Today I came across a bug that left me fuming. I could not figure out why every single cell in my table heavy layout had a 1px padding around it and in some cases I was even missing my table borders. For those of you working in the sane world of web design, tables are a thing of the past, but in the world of email, tables are back with a vengeance.
As I became more and more disillusioned I started trying anything and stumbled across the fix. I knew I had to share this, so if you are experiencing any of the above, here is the fix and it’s a simple one.
Here’s an example of what a two cell table with an image and text would look like before the fix. Notice the 1px white border/padding around the table.
And here is how it’s supposed to look after the fix. No white border / padding.
And the fix?
table td {
border-collapse: collapse;
}
I don’t think I’ve ever even used this css before, but once I started grasping at straws I began to fiddle around with the CSS border attributes and tried it. I’ve never seen any browser or mail client except Outlook 2007 do this to table cells.
Here’s the full HTML from the example, and thank you Microsoft, for delivering the worst email rendering experience yet, we all thought Hotmail was bad, but you really stepped up to the plate!
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Outlook 2007 Test</title>
<style media="all" type="text/css">
table td {
border-collapse: collapse;
}
</style>
</head>
<body>
<table width="200" border="0" cellspacing="0" cellpadding="0" style="border:solid 1px #48463b;">
<tr>
<td width="80"><img src="http://yourserver/graphic.gif" width="80" height="40" alt="graphic"></td>
<td width="120" style="background-color:#c1beb1; color:#ffffff; font-family:Verdana, Arial, Helvetica, sans-serif; text-align:center; font-size:11px;">Another column<br>
plain text.</td>
</tr>
</table>
</body>
</html>
You may also want to check out my other entries on this topic.
- Outlook 2007 – When is 200 pixels not 200 pixels? Spacer gifs
- Email html design and deployment quick tips
Responses
16 Comments to “ Outlook 2007 borders and 1px padding on table cells! ”
You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.Thanks for posting that! I didn’t think a css solution would help, since Outlook 2007 is so css backwards.
I love you!
Thank you! This was driving me crazy!
Very helpfull!!! It was also driving me crazy! Thank you
“There is a God and Ian be his name!”
Thank-you, thank-you, thank-you. This has just been frustrating the hell out of me. You’re a life saver!!
Nice,
although i am still left with a column width dilemma (much like http://www.campaignmonitor.com/forums/viewtopic.php?id=528). For the life of me I can;t figure out why Outlook 2007, and it alone, renders my column wider than the specified td width.
Have you guys seen this problem?
@Andras – I find I usually need to insert a blank image into all of my different columns at the exact width of what I need them to be. For some reason, that keeps Outlook from wigging out on you.
@jhoysi – thanks, i like that idea, although here, i ended up further nesting the content into tables and that seemed to resolve tne problem of having diferent number of columns spanning in subsequent rows.
What a guy – big thank you for that! Thanks for spending that time, it really is appreciated!
I totally agree with Anthony:
““There is a God and Ian be his name!”
Thank-you, thank-you, thank-you. This has just been frustrating the hell out of me. You’re a life saver!!”
I’ve to add you to my RSS-Feeds. Thanks
Thank you so much! I cannot believe what a step backwards Outlook 2007 is, but this trick is very helpful in wrangling all of its bugs!
Awesome post. I spent hours trying to figure out where my spacing was coming from. I kept turning to padding/margins. I wasn’t thinking about borders at all until 10 minutes ago.
Excellent. Like many of the commenters, I’ve been trying to design some emails that finally (after a lot of pain, thank you outlook) looked perfect except for that 1 issue. Thanks for the solution!
Excellent info! I spent awhile trying to figure this out.
You are a legend. Spent the best part of my day trying to figure this out. I still hate Outlook though
Thank you so much for this article! I’ve been slamming my head into all sorts of things for almost an entire day trying to figure this out