In my last article I explained why the large, horizontal gap sometimes appears in Outlook 2007 and 2010. Unfortunately the only perfect fix is to stack your tables so that you never have a table that exceeds 23 inches in height.
One common strategy for setting a background color for all email clients is to create wrapper table with a width of 100%. This makes it challenging to keep your tables under 23 inches in height - especially when developing long newsletters. With that said, here's another option you might consider...
Here it is, short and sweet:
Let's Break this Down...
1.) DOCTYPE
I recommend testing in all browsers without a DOCTYPE because most email clients will strip it out. Read more on this.
2.) Embedded Body Properties
The "body" is defined here for Yahoo Beta because it does not support your body tag. Instead, it will create a wrapper div around your email and that div will inherit your embedded body styles.
The "#body_style" is defined for AOL because it does not support your embedded body definition nor your body tag, we will use that later as our wrapper.
The "min-height" attribute in this case is used for AOL so that your background doesn't get cut off if your email is short.
Random fact: If you include any single quotes in your CSS comments your entire email will appear blank in Entourage 08. This tidbit had me stumped for quite a while.
3.) Recommended Default Styles
The .ExternalClass is used for Hotmail and ensures your email will take up the entire width of its viewing pane.
The .yshortcuts {color: #F00;} is for Yahoo Classic and Yahoo New. Set this to be the color you prefer for your links.
By default, I reset the padding and margin for my email to "0". This forces me to do all of my spacing inline. This also overwrites Hotmail's default CSS: p {margin:0 0 1.35em}. Since Gmail doesn't support embedded CSS and it uses default browser margins for paragraphs, I always include a "margin=0" inline as well.
From there I do all of my paragraph spacing with padding for a few reasons:
Hotmail does not support the "margin" nor the "margin-top" properties and
Outlook 2007 and 2010 offer better support for padding in block elements
Gmail uses #2A5DB0 as its default color for anchors. This is another style I don't allow myself to change because it forces me to overwrite my link colors inline.
4.) The Body Tag
I included the style attribute for Gmail, it does not support embedded CSS and will convert this body tag to a div and maintain its inline styles. Since it gets converted to a div, the other body attributes like bgcolor are ignored.
I included body attributes (alink, link, bgcolor and text) for Lotus Notes 6.5 and 7, as these clients do not offer much support for embedded nor inline CSS.
The "min-height" attribute is set for Gmail and AOL since they will be converting your body to a div.
5.) The Span Wrapper
This span is working as a wrapper and is required for AOL. You can use any inline html element but it must be a standard element. For example, a custom tag like <aol_body></aol_body> will not work.
Since Outlook 2007 and 2010 ignore the display:block in this span, it will not create unwanted horizontal gaps (as long as you do not have a table in your email that exceeds 23 inches in height).
6.) The Table
Here's where you would stack your tables, I threw in a bgcolor and width attribute for the Android Gmail application. As I have mentioned many times prior, Gmail converts your body to a div, even on mobile apps. Since there is no width set in your body, the Android sets the width of your converted body tag to that of the device viewport. To make a long story short, your background color will get cut off unless you add it to each of your tables as well.
Random fact: At least one "<table" or "<img" text string must be in your HTML code in order for Entourage 04 and 08 to process your embedded and inline CSS. This is especially important if you rely on divs only.
I tested this in the following email clients:
Android Gmail
Android Mail
AOL
Entourage 04
Entourage 08
Gmail
Hotmail
iPad
iPad Gmail
iPhone
iPhone Gmail
Live Mail
Lotus Notes 6.5
Lotus Notes 7
Lotus Notes 8
Lotus Notes 8.5
Mac Mail
Outlook 2003
Outlook 2007
Outlook 2010
Outlook Express
Thunderbird2
Thunderbird3
Windows Mail
Yahoo Beta
Yahoo Classic
Yahoo New