4-ingredient recipe to remove unwanted whitespace in Outlook '07
In a recent newsletter design for St. Nersess Armenian Seminary, we ran into a snag with Outlook 2007/2010 adding extra white space between items separated by a divider. Surprising, huh? Outlook '07 rendering something differently than all the other popular email clients? Impossible!
Not impossible, expected. Unfortunately, Outlook '07 is the Dark Side of the Force when it comes to email design, and all of us designers pretty much hate it. The good news today, however, is that we've been able to address that whitespace issue with a simple fix that still holds up in other email clients.
Tables? No. Separator Image? Yes.
As you can see, all we were trying to do was add a border to the bottom container of each item listed in the cell below, to use as a dividing line. Outlook, however, wouldn't have it. We tried a separator image, but how do you account for the padding between the horizontal rule and the blocks of text? We didn't want to use a table, those can be quirky enough on their own; and this part of the template was going to resize on smaller screens, so a fixed width separator image wouldn't work either.
Recipe for Safe Outlook '07 Separator
Ingredients:
3 DIV containers
1 transparent spacer image
Directions:
Copy and paste the 3 DIV containers below where you want the separator to be, and change your background colors to reflect the background color of the parent cell.
<div style="height:8px; line-height:8px; font-size:8px; -webkit-text-size-adjust:none; overflow:hidden; width:100%; display:block; background:#dfd7ba;"> </div> <div style="height:1px; width:100%; line-height:1px; font-size:1px; -webkit-text-size-adjust:none; overflow:hidden; background:#bcb188;"><img width="1" height="1" border="0" src="/path/to/spacer.gif" alt="" /></div> <div style="height:8px; line-height:8px; font-size:8px; -webkit-text-size-adjust:none; overflow:hidden; width:100%; display:block; background:#dfd7ba;"> </div>
Then, in the middle DIV container, change the background color to the color of the separator bar. And you'll get the result below:
About the Author - Stephan Hovnanian owns Shovi Websites, a company that manages websites and email marketing campaigns for small businesses & non-profits. Connect with Stephan on Twitter, Google+ or LinkedIn.
