Russ' Do It Yourself Home Workshop

There have been numerous posts about the lack of HTML and CSS standards support in Outlook 2007.  Basically, Microsoft gutted the rendering engine in Outlook 2007 and replaced it with the (very) limited rendering engine in Word.  They took a fully functional product and moved it back in time when “the only thing that existed were Troglodytes.”  And I thought we were moving out of the stone age.  Oh well…

I inherited a program that was sending out very plain emails to subscribers on an externally facing SharePoint site and thought it would be better to “spiff it up” a little when a change to the HARD-CODED EMAIL (ugh!) was requested.  So, I converted it into an HTML email.  It instantly looked better, but now I was on a quest to give it some branding to make it match the site.  Oh, the giant sucking sound I heard from the artistically limited side of my brain…

I started with a background image but, of course, background images are not supported in Outlook 2007.  So, I resorted to slicing an image.  I have an old version of Ulead PhotoImpact that makes it pretty easy to slice an image into components that can be placed in table cells using IMG tags.  I know Photo Shop and other image editing tools have this same capability.  You can see the slices I made.  I did this a couple of times and opted for this layout with the cell at the bottom in the middle because it can be pushed down using the VALIGN property.  You can see some of the shifting problems I ended up with in Outlook 2007.

On a couple of my tests I ended up with shifts in Outlook 2007, while the rendering in other fully functional clients looked fine.  The first image is a right side shift.  This was from my first slicing that was done with three rows and a center cell for the text content.  I could never seem to find the right alignment commands to reliably put it in position (for Outlook).

The second shift was from slicing job #2 (shown above).  This slicing job fixed the left and right sides so I only had to fix the bottom alignment.

To fix the bottom alignment problem, I enclosed the first (inner) table in another (outer) table.  The outer table has one cell.  The bottom cell of the inner table is VALIGNed to the bottom, thus forcing it back in to position.   The IMG is also bottom aligned for good measure.  So far, so good!

<TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0"><TR><TD width="661" height="844">
    <TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0">
    <TR>
        <TD ROWSPAN="3"><IMG SRC=Images/Left1.jpg BORDER="0"></TD>
        <TD><IMG SRC="Images/Top1.jpg" BORDER="0"></TD>
        <TD ROWSPAN="3"><IMG SRC="Images/Right1.jpg" BORDER="0"></TD>
    </TR>
    <TR>
        <TD width="661" height="422">Your text goes here!</TD>
    </TR>
    <TR>
    <TD valign="bottom"><IMG SRC="Images/Bottom1.jpg" BORDER="0" align="bottom"></TD>
</TR>
</TABLE>
</TD></TR></TABLE>

It’s amazing how much time you can waste trying to make a retro product function like it’s the 21st century!