Outlook 2007 borders and 1px padding on table cells!
Anyone 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
Gus October 1, 2008 at 2:58 am
Thanks for posting that! I didn’t think a css solution would help, since Outlook 2007 is so css backwards.
Mark Whale October 14, 2008 at 6:19 am
I love you!
mob October 30, 2008 at 9:27 pm
Thank you! This was driving me crazy!
Sosa December 6, 2008 at 6:56 am
Very helpfull!!! It was also driving me crazy! Thank you
Anthony December 9, 2008 at 2:22 am
“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!!
Andras January 13, 2009 at 1:02 pm
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?
jhoysi February 16, 2009 at 4:46 pm
@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.
Andras February 17, 2009 at 5:45 am
@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.
Finland Blue March 11, 2009 at 10:44 am
What a guy – big thank you for that! Thanks for spending that time, it really is appreciated!
Roman March 18, 2009 at 5:41 am
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 🙂
Lar5384 May 27, 2009 at 2:31 pm
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!
Lauren July 8, 2009 at 9:55 am
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.
Rob July 15, 2009 at 8:59 am
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!
dman August 4, 2009 at 9:16 am
Excellent info! I spent awhile trying to figure this out.
Ed January 7, 2010 at 2:39 pm
You are a legend. Spent the best part of my day trying to figure this out. I still hate Outlook though 😉
Jim February 9, 2010 at 6:21 pm
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
Jeroen March 19, 2010 at 10:28 am
It didn’t work for me but your solution gave me an idea:
table td {
border:0px;
}
That worked for me.
Kim August 25, 2011 at 7:35 am
Jeroen! Your addition works for me!
table td {
border:0px;
}
Thanks for the input everybody – was also losing the plot with Outlook 2007.
Lee June 15, 2010 at 1:52 pm
extremely helpful!!!
Gaby June 17, 2010 at 8:54 pm
I tried all these solutions but can´t fix the problem… 🙁
Ian Hoar June 17, 2010 at 11:00 pm
Hi Gaby, there are other issues that can cause space between images. display:block can fix a lot of issues, but I would need more details on your particular your issue to know.
Jonathan Keller June 22, 2010 at 10:24 am
This worked perfectly for me. Thank you so much. Marketing Manger was probably going to mame me if I didn’t get this right 😀
~J
Jonathan Keller June 22, 2010 at 12:12 pm
Scratch that… it looks like it’s working perfectly til it’s finished loading all the cells… then it starts breaking piece by piece. Damn you OutLook!!!
~J
Waldfee August 10, 2010 at 5:18 am
I Need Help! My truble is that these *** Outlook 07 do litle 1px vertical balk at the end and beginning in my text (left and right side), if i set p.ex. td#inhalt_rechts .grau {color:#FFFFFF; background-color:#999999; font-size:14px; font-weight: bold; border:solid 4px #999999;}. I Mean border: …
If it’s isn’t there, ther are nothing. But i need border, because outlook 07 don’t support padding.
Please help me. I sit 12h at the same Newsletter and gooo veeeery crazy.
Ian Hoar August 10, 2010 at 9:15 am
Hi Waldfee, if you need padding use spacer gifs for Outlook. They are more reliable than any other method. It sounds like you have an inline element and that’s why it’s not showing on the top and bottom. A display:block might fix this.
Anthony September 3, 2010 at 4:03 am
life saver!!! OMG. I thought I had tried everything.
YOU ROCK!!!
Aric September 13, 2010 at 1:09 pm
Do you find this works better as an embedded stylesheet or as inline styles?
Thanks for this.
Ian Hoar September 13, 2010 at 1:17 pm
Since this is an Outlook issue the embedded style should work fine. It will be removed from some web clients, but that shouldn’t matter.
Philip August 17, 2011 at 4:17 am
I tried it inline and when it didn’t work I gave up. Never expected applying it as a style in the head would make any difference to Outlook after the inline attempt failed. Great fix.
David February 1, 2011 at 12:17 pm
Wow. I’ve never come across this bug before but this really helped me out.
Much appreciated.
Dave March 30, 2011 at 12:03 pm
Superb – thanks! nearly had no hair left after a run in with 2007’s not so clever rendering engine! Top man! Thank you.
Rud April 12, 2011 at 11:16 am
Thanks man, God bless you! Much appreciated!
Jennifer April 12, 2011 at 2:02 pm
Thanks! Outlook 2007 is good for making me check my CSS skills haha. Keeps you on your toes, for better or worse…
Jason April 15, 2011 at 8:58 am
I’m soo glad you posted this. I was gonna jump off a bridge for a minute there!
Samwise May 4, 2011 at 11:28 am
This works for me and is a great find! Could not figure out what was going on here, thanks so much for posting.
Jason Collins May 5, 2011 at 12:01 pm
This works for me too, great tip.
qofe June 16, 2011 at 11:49 am
I know others have said this but I had to add my thanks as well. It just made no logical sense, aside from being Outlook I mean… 🙂
MImiP June 27, 2011 at 8:54 am
You just made my day!
Thank you!
Ayman September 6, 2011 at 12:58 am
Awesome work, thanks for the tip. It worked like a charm
David Weermeijer September 28, 2011 at 10:52 am
Hi all,
I recently discovered another fine bug in Outlook 2007.
Believe it or not it has problems with images that have a high height value.
I’ll specify what happened;
I tested a simple HTML newsletter with a header with some menu columns, twitter / facebook icons etc. Then a content image. Then a footer. I tried to explain to the client that putting information in images is not ideal but they wanted it like this.
When I was done I tested it with a content images that was 650px width and 760px height, it worked like a charm everybody was happy..
Then they wanted a content images that had a height of 2000px, I tried everything but it kept displaying like half of the images was loaded AND it gave me a 1px white border between the content image and the footer.
I tried every trick and combined them as well in the end;
border-collapse; border:0px; display:block; all of em.
In the end I had this one little idea; split the images up in 2 images of 650 by 1000 and it worked!! (I still had to put display:block; in the style for both hotmail and gmail for it to display properly everywhere).
So people, Outlook has a new bug… god..
David Weermeijer September 28, 2011 at 10:54 am
hmm for some reason I typed images everywhere I meant to type image…
Brad October 2, 2011 at 5:11 am
Thank you! You saved me some time.
Now if I can just work out why the ‘print preview’ loses about a quarter of the lines in a table while it renders perfectly (with your border-collapse td trick) in the actual display window itself …
Liz P December 12, 2011 at 1:30 pm
Thank you. Thank you. Thank you.
Jon January 5, 2012 at 1:39 pm
If I wasn’t a man (or if you weren’t a man), I’d kiss you on the mouth right now.
RF January 20, 2012 at 6:01 pm
I always just lived with the 1px white border like thing, now this helped me display a missing border!
As a tip I do not see shared very often, if you ever run into a situation where you cannot get the vertical spacing correct in lists (or maybe other elements) in Outlook 2007 or 2010, try wrapping a space with strong tags, and add line break (br tag) at the end of the copy. Not sure why, but it fixes a lot of things for me!
Dirk March 28, 2012 at 8:22 am
Yes yes yes!!! you have saved me sir! not only from myself but also from the police who should hunt me down for killing every M$ employee I came across
Greg May 1, 2012 at 9:25 pm
Hey, thanks so much. This wasn’t working for me until I remembered to add the border collapse to th tags as well.
Nevets June 16, 2012 at 12:44 pm
Great fix!
davidp September 25, 2012 at 2:45 am
finally, some decent solution. thanks a million!
neuroxik December 16, 2012 at 7:21 pm
Wow… you just solved a 1-hour headache in one simple declaration, thanks!
Ruben February 10, 2015 at 12:29 pm
Repeat after me: CSS is nothing more than a giant set of global variables.
If the (invisible to you) css in the email changes border settings it is very possible your signature will end up with borders. I have just verifies this with 100% surety in my own application.
LEC March 6, 2015 at 4:46 am
Brilliant fix! Thank you so much 🙂