Ian Hoar – Passion for Technology – Geeking Out - Technology, Web, Toys, Games, Design, Entertainment, Gadgets, & Geeking Out

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.

52 Comments to “Outlook 2007 borders and 1px padding on table cells!”

  • Gus

    Thanks for posting that! I didn’t think a css solution would help, since Outlook 2007 is so css backwards.

  • mob

    Thank you! This was driving me crazy!

  • Sosa

    Very helpfull!!! It was also driving me crazy! Thank you

  • 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!!

  • Andras

    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

    @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

    @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

    What a guy – big thank you for that! Thanks for spending that time, it really is appreciated!

  • Roman

    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

    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

    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

    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

    Excellent info! I spent awhile trying to figure this out.

  • Ed

    You are a legend. Spent the best part of my day trying to figure this out. I still hate Outlook though 😉

  • Jim

    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

    It didn’t work for me but your solution gave me an idea:

    table td {
    border:0px;
    }

    That worked for me.

    • Kim

      Jeroen! Your addition works for me!

      table td {
      border:0px;
      }

      Thanks for the input everybody – was also losing the plot with Outlook 2007.

  • Lee

    extremely helpful!!!

  • Gaby

    I tried all these solutions but can´t fix the problem… 🙁

  • Ian Hoar

    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

    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

    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

    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

      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

    life saver!!! OMG. I thought I had tried everything.

    YOU ROCK!!!

  • Aric

    Do you find this works better as an embedded stylesheet or as inline styles?

    Thanks for this.

    • Ian Hoar

      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

      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

    Wow. I’ve never come across this bug before but this really helped me out.

    Much appreciated.

  • Dave

    Superb – thanks! nearly had no hair left after a run in with 2007’s not so clever rendering engine! Top man! Thank you.

  • Rud

    Thanks man, God bless you! Much appreciated!

  • Jennifer

    Thanks! Outlook 2007 is good for making me check my CSS skills haha. Keeps you on your toes, for better or worse…

  • Jason

    I’m soo glad you posted this. I was gonna jump off a bridge for a minute there!

  • Samwise

    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

    This works for me too, great tip.

  • qofe

    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

    You just made my day!
    Thank you!

  • Ayman

    Awesome work, thanks for the tip. It worked like a charm

  • David Weermeijer

    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..

  • Brad

    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

    Thank you. Thank you. Thank you.

  • Jon

    If I wasn’t a man (or if you weren’t a man), I’d kiss you on the mouth right now.

  • RF

    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

    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

    Hey, thanks so much. This wasn’t working for me until I remembered to add the border collapse to th tags as well.

  • davidp

    finally, some decent solution. thanks a million!

  • neuroxik

    Wow… you just solved a 1-hour headache in one simple declaration, thanks!

  • Ruben

    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

    Brilliant fix! Thank you so much 🙂

Responses: