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

Outlook 2007 – When is 200 pixels not 200 pixels? Spacer gifs

October 20th, 2007 Comments34

A large portion of my day is spent designing and marking up solicited email newsletters. I am also a very strong advocate of W3C Web Standards. For anyone who has ever worked on email newsletter, they will know all too well that the above sentences do not mix well.

All web designer’s have faced the many hurdles of browser compatibility. Getting things to work on multiple browser versions and browser types can be a real pain, but this is child’s play compared to the ever changing world of html based email. I’m not going to talk about whether email should have ever been used as a medium to deliver rich content, there is plenty debate about that elsewhere. The fact of the matter is that html email is here, and it’s very popular.

For the past three years the number one hurdle for myself and the company I work at has been Microsoft’s web based email, Hotmail. This client ruthlessly tears apart your beautiful standards compliant html and leaves a broken mess behind. Everything from requiring inline styles everywhere to removing all your margins, this beast has not been fun. Microsoft has now released Live Mail which is replacing Hotmail and is slightly better, but it is a tiny step in the right direction. I should also add that we have very little problems with Yahoo mail, and in general very little problems with most modern stand alone mail clients now.

Recently this has all changed. There is a new big, bloated and terrible mail client in town, and of course it’s also by Microsoft, and that client is Outlook 2007. Up until now, previous versions of Outlook supported both html and Word, but with Outlook 2007 only word is supported. Microsoft says this move is to standardise on one platform or something along those lines. I always thought that we as an industry had standardized on the W3C Standards, where have I been?

How do we deal with this new client? Rewind backward ten plus years in web design and we find ourselves in 1996 with minimal CSS, hundreds of messy nested tables, and the mighty fix all spacer gif. For the most part I have managed to make my emails hold their integrity in Outlook 2007, although with much pain and suffering.

The other day I was working on an email newsletter when I found a very strange bug, or maybe it’s a feature, since every other broken or missing aspect of Outlook 2007 seems to be documented as a feature. Basically I needed 400 pixel wide rules to separate some teaser articles. In a normal world this would be done purely with CSS, but I have gotten into the habit of using spacers for everything in my newsletters now. Stretching spacer gif images with the html height and width attributes has been an old stand by for years that some of us like to call the “brute force method”. You can image my surprise when a pixel stretched to 400 pixels came out to be only 66 pixels wide. After much head scratching I decided to run some tests which I will share with you here.

Basically Outlook 2007 at the time of this writing does not stretch 1 x 1 gif images past 66 pixels. At first I thought maybe this was a blanket rule to all spacers to stop the use of large pixel spacing. Why they would do this I don’t know, but it made more sense then what my testing further showed.

I decided I would try to stretch a 2 x 2 pixel gif to 200 pixels, the result was 131 x 131 pixel sized square. Now I don’t know what kind of funky math Outlook 2007 is using, but it’s not anything I have ever seen ever seen from any browser or email client to date.

Next I decided to try a 10 x 10 pixel stretched to 200 x 200. This resulted in the correct size. Below are two screenshots, one of the html in Firefox, and one in Outlook 2007.

Firefox Browser screenshot
Everything looks as one would expect it to look. It should look like this in every browser and mail client ever to support inline images.

Outlook 2007 screenshot

My advice to anyone coding email newsletters with Outlook 2007, is to use larger sized spacer gifs, 10 x 10 px should probably do the trick. You can also squash these down to 1 x 1 px images in the html without problems. Happy coding.

Comments feed | Posted in: bugs, Code, Email, Frustration, Microsoft, tips

34 Comments to “Outlook 2007 – When is 200 pixels not 200 pixels? Spacer gifs”

  • Thame February 18, 2008 at 12:34 pm

    This was driving me nuts, thank you!

    The things Microsoft does to us…

  • Ivar Larsson October 30, 2008 at 4:22 am

    Incredible…. Thanks for this find!

    I hate word and it’s silly excuse for a css/html renderer.

  • Pedro Escudero February 27, 2009 at 8:43 pm

    Thanks!! this is so great, for those trying to use photoshop slices, should solve many issues.

    I sent a mail some hours ago and some clients complained about bad look on outlook 2007, now i just changed the 1px x 1px spacer for the 10×10 images and bu a la!! its solved! on line!!

    thanks!

  • Al Stevens March 17, 2009 at 6:00 am

    Thank you, thank you – this was driving me to despair. No other resources out there seem to have picked this up, and it is at the heart of using ‘spacer gif’ layouts.

  • Noel May 4, 2009 at 6:21 pm

    A colleague of mine was having no end of trouble with this problem – and I couldn’t find anything wrong with her code (because there WAS nothing wrong with it). Solved. Thanks Ian!

  • James A June 29, 2009 at 10:15 am

    How the hello can microsoft shaft us like this? – MS word to render emails? – Don’t make me laugh.

    Do you think that MS will ever admit defeat and go back to more sensible rendering as seen in firefox or even IE7?

  • Doug June 30, 2009 at 12:42 pm

    Wow, Thanks. This is a BIG life saver for my customers and me.

  • Mr C July 16, 2009 at 8:09 am

    Thanks for this awesome tip!

    I always used to think that they reverted to Word because of the security hole ridden IE6, but the answer is much simpler:

    The reason why Microsoft reverted to the Word HTML rendering engine is because without it, Outlook would not be able to display fancy Word-style formatting like SmartArt, Charts and WordArt.

    But what is the point of using those functions unless the recipient also uses Outlook 2007?

    The monopoly strikes again.

  • Amir December 18, 2009 at 6:02 pm

    Thank you so much! I spent 2 hours rebuilding my template over and over not understanding what was wrong, 10px by 10px did the trick! This seems to effect aol users as well. Not sure who’s still using aol but anyway…

  • Esteban January 6, 2010 at 11:26 am

    Thank you so much for this post, it helped me figure why in the world outlook 07 wasn’t displaying my spacers correctly (such a pain!) again thank you!

  • zack February 25, 2010 at 2:39 pm

    anyone tried to reverse engineer word’s image rendering? how does this possibly happen? thanks for the save!

  • Daniel March 17, 2010 at 7:06 am

    Hi!

    Many-many thanks, I didn’t find any solution in the last 3 weeks and now I have the perfect one.

    Thanks again!

    BR
    Daniel

  • Dan March 19, 2010 at 10:32 am

    Ian

    Been coding html emails for 3 years now, your list is right on when it comes to coding. you describe everything that is needed to have it render properly.

    i do have a question, sometimes in Photoshop, it creates a spacer.gif. The only issue comes in Outlook 2007 and the rendering of the wrong spacer.gif. i ususally don’t worry about it cause our client base does not use outlook 2007.

    based on the pixel issue above, how would i override outlook’s use of it’s own spacer.gif?

    thanks in advance….

  • James May 25, 2010 at 5:18 am

    Thanks, really useful info.

    Why doesn’t word use explorers html renderer? This was displaying my html fine while word/outlook 2007 would not!

  • Richard May 28, 2010 at 9:33 am

    Thanks very much for this – in an effort to catch people googling the same problem I encountered (and resolved thanks to this blog):

    If you use Photoshop to slice a large image for e-mailing (and linking) purposes, Outlook will mangle the layout (despite other clients and systems rendering the damn thing perfectly). The solution is to replace Photoshop’s 1×1 spacer.gif with a 10×10 spacer.gif of your own. This instantly solved the problem for me. Thanks Ian!

  • Larry McFarlane October 29, 2010 at 1:07 pm

    Dude, you rock! Changed my spacer to 10X10 and BAM!

  • Code in the Machine November 30, 2010 at 12:15 pm

    Thanks for this. A true life saver. After seeing nothing wrong with my code, I was about to move onto suicide. No more. I’m here for a little bit longer thanks to this solution.

    🙂

  • Wes January 11, 2011 at 6:54 pm

    I noticed that Outlook 2007 ignores the style=”display:block” attribute that places on a second line
    Does anybody know why?

  • kyle April 6, 2011 at 1:05 pm

    Here’s a twist. Add the attribute align=”left” into the image and Outlook will display the image to the specified size without restriction. Note: when rendering an html email in IE you may see alignment issues but in my testing the display is fine in all major email clients, web or desktop.

  • Michael June 17, 2011 at 12:12 pm

    Ok so I have this one thing that has been bugging me. In Outlook it will collapse table widths, but not for everybody. Typical, the Outlook that our companies CEO is on does this table collapsing, but nobody else.

    For example, say you have one row (width 100px) with three columns, left column 10px image, middle column 80px copy, right column 10px image. When it goes to our CEO’s Outlook (mind you it doesn’t need to be the company e-mail, it also happens to gmail when he checks it via Outlook) it will make the middle column loose it’s 80px width.

    Copy

    I have since came out with a rock solid solution to fix this problem. What I’m trying to figure out, is what setting in Outlook does this? I want to have this setting on my computer so that I do not need to bug our CEO for an eblast test. If anybody knows this setting please let me know. It happened on Outlook 2007 and 2010.

  • Mark September 2, 2011 at 7:40 am

    4 years late to the party, but I think you mean “hurdle,” not “hurtle.” 🙂

  • Devin October 10, 2011 at 10:53 am

    Thanks for your expertise and your willingness to share it!

  • Anthony December 28, 2011 at 5:57 am

    I think I’ve found a start of solution, on outlook 2007 for an image, width=”600px” it’s like width=”600pt” and 1pt it’s approximately 35% bigger than a pixel, that’s why when you test a mail rending on outlook 2007, the image of the mail are bigger.

    I’ve found that with a mail who was good on 2010 but not on 2007, I’ve transferred the mail from 2010 to 2007 and, it was good !!! when i saw the source code, i saw than all the px was convert in pt, except for my images…

    sorry for my poor English, i’am french ! :p

  • Mark September 10, 2012 at 6:52 am

    My hat off to you sir, that’s been causing me problems all morning

  • Alan September 19, 2012 at 6:39 am

    Many thanks for this, I’ve tried quite a few things and the increase in pixel size worked.

  • Jeroen October 26, 2012 at 7:45 am

    Sometimes I almost cry but you have made me laugh again.

  • Carlos December 5, 2012 at 1:28 pm

    This answer feels like a perfect back massage!! You are too smart

  • Lise Dykes November 19, 2013 at 10:29 pm

    Thank you! Now I can go to bed and stop running Outlook tests. What a stupid, stupid thing.

Responses: