Outlook 2007 – When is 200 pixels not 200 pixels? Spacer gifs
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 hurtles 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 hurtle 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.
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!