Weird Outlook 2007 Image Cropping

One of my clients recently added a third image to a newsletter they send out. This image like the other two was 120 pixels wide by 600 pixels high. Everything was all fine and dandy until one of them started to have issues with it displaying correctly in Outlook 2007. After a bit they called me into look at it, it was a fun little issue and during this time I found a rendering bug that is pretty annoying in Outlook 2007. This post hopes to explain the bug so other people can realize that it exists and work around it.

Background:

For Outlook 2007 Microsoft decided to switch from using Internet Explorer to render the display of the email to Word which was being used to compose the emails. I understand why they did this: removing dependencies, less security risk, blah blah blah. So, I don't think they are stupid for doing it but this bug is kind of an annoying corner case. Anyways, throughout this article remember that Word is being used to render the damn email.

So a setup for the email:

1) It was an HTML email

2) Like most HTML emails I was using tables for the layout because email clients are pretty far behind how browsers work

3) There was one column with three images that where all 120 x 600

Below is a rough layout of the email template -

As you can it should not be too hard, right? This is how Outlook 2007 renders it:

Wait why is there that huge ass gap?! The problem lies in the fact that Outlook messes up rendering when you have a table and a total of 1800+ pixels in image height. Remember how I said Outlook was using Word for rendering? How does Word work? It uses pages right? Which is actually the problem if you took an email setup like the one described above and put your cursor a little above the third image you would be able to drag around the page divider, sigh. How it works is that if all of the images can't fit into one page it will take the next image and move it to the next "page." Which screws up the layout of the email, nice....

During this whole process I thought of a few different hacks like what would happen if I put in a really large image like 1,900 pixels high could I force Outlook to expand the page? Nope! Here is a screen cap of an email with a large image in Mac Mail and in Outlook 2007.

Outlook 2007 is on the left and Mac Mail is on the right. I could have replaced Mac Mail with Outlook 2003, Mobile Me's web renderer, gmail, etc... If you look at the large image you will notice that Outlook 2007 has eaten the first 150 pixels of the image. You can even replicate this issue by creating a two column table inserting a large image (1900 pixels high) into one of the columns.

Well hopefully this explanation will prevent some head banging for other people. Now I need to get another cup of coffee.