Click to Sign Up for a 7 Day Free Trial!

Email Development

Background Colors in HTML Emails

Email On Acid

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:

<html>
<head>
    <style type="text/CSS">
        body, #body_style {
            background:#000; 
            min-height:1000px; 
            color:#fff; 
            font-family:Arial, Helvetica, sans-serif; 
            font-size:12px;} 
         
        .ExternalClass {width:100%;}
        .yshortcuts {color: #F00;}
        p {margin:0; padding:0; margin-bottom:0;} /*optional*/
        a, a:link, a:visited {color:#2A5DB0;} /*optional*/
    </style>
</head>

<body style="background:#000; min-height:1000px; color:#fff;font-family:Arial, Helvetica, sans-serif; 
   font-size:12px" alink="#FF0000" link="#FF0000" bgcolor="#000000" text="#FFFFFF"> 

	<span id="body_style" style="padding:15px; display:block"> 
    
		Insert your body copy and nested tables here. <br />
        <a href="http://www.emailonacid.com" style="color:#F00">www.emailonacid.com</a> 
        
            <table bgcolor="#000000" width="600">
              <tr>
                <td>Content</td>
              </tr>
            </table>
          
    </span>

</body>
</html>

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

<style type="text/CSS">
	body, #body_style {
        background:#000; 
        min-height:1000px; 
        color:#fff; 
        font-family:Arial, Helvetica, sans-serif; 
        font-size:12px;}  
</style>

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

<style type="text/CSS">
	.ExternalClass {width:100%;} 
	.yshortcuts {color: #F00;}
	p {margin:0; padding:0; margin-bottom:0;} /*optional*/
	a, a:link, a:visited {color:#2A5DB0;} /*optional*/
</style>

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:

  1. Hotmail does not support the "margin" nor the "margin-top" properties and
  2. 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

<body 
style="background:#000; min-height:1000px; color:#fff;font-family:Arial, Helvetica, sans-serif; font-size:12px" 
alink="#FF0000" 
link="#FF0000" 
bgcolor="#000000" 
text="#FFFFFF"> 

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

<span id="body_style" style="padding:15px; display:block"> 

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

<table bgcolor="#000000" width="600">
  <tr>
    <td>Content</td>
  </tr>
</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

Join the Discussion

Great article Michelle. Most of my emails don't get too long so I find that the wrapper table works pretty well. This solution is much cleaner however.
jeffthechef
Thanks a ton. Who had the "wise" idea at Microsoft to screw up people's HTML signature anyway??

This code got me almost where I need to be:
<BODY style="MARGIN-top: 0px; top:0px; margin-bottom:0px">
<style type="text/CSS">
body, #body_style {margin:0px}
</style>

I still have to hit backspace each time to remove the break it inserts...ARGG!!!...but I can live with it now.
John
If you insert your body copy and images inside the <span id="body_style">, images will resize.
If you insert your body copy and images by using a table inside the <span id="body_style">, images will not resize.
Kathy
Kathy,

Which email client resizes images if they are not within a table?

In my experience, Outlook 07 does not support the width/height attributes within images - instead it reads the actual dimensions of image itself, no matter what the container is. But I'd be happy to test your theory.
Michelle Klann
I tested your code above and it seemed to work in all clients apart from GMail
Serif
Serif, I just tested it once again in Gmail and everything looks a ok, can you let me know which browser/OS you are using so I can try to re-create the issue on my end?
Michelle Klann
I was under the impression one should not put block elements (table) into inline elements (span).
paul
@paul,

You are right, though it is not technically correct to put block elements within inline elements, our goal was to overcome the Outlook spacing issues. You can use a DIV instead of a SPAN and fall back on the SPAN option in the event that you run into large horizontal gaps in Outlook.

Here's more on that: Spacing Issues in Outlook 2007 and 2010
Michelle Klann
I am having an issue where the background color of the email is picking up in the reply. The color is black and when a client hits reply, the email is going black (on some clients, I can't replicate it with any of my devices). Any idea why this is happening? I don't want to not use black...
Brad
Very good article on this problem - however no matter what fixes you apply once you mix images tables with text tables - whether nested or stacked, large or small Outlook will add a left margin to the text table.

I have used your CSS code above and tried all the known fixes from margin-left, to border-left, and display:block; (which is essential for every image to align properly in hotmail), and yes you can fix it in Outlook but it will be off everywhere else. It seems to me that a logical fix would be like the old IE hacks where you could add an "if" "else" section that applies to the Microsoft - something along the lines of
IF [if gte mso 10] - is this possible? I don't speak any Micrsoft code.
Charles Iscove
Regarding putting in margin or padding inline for paragraphs: does Lotus Notes finally behave? I haven't had a chance to test on Notes in a while, but I found forsaking p tags and doing something like this gave me the best results:

blah, blah, blah
<div style="font-size: 6px; line-height: 9px"> </div>
blah, blah, blah

It is a sin, semantically, but Lotus Notes, at least as far as html email display goes, is way worse than a sin, just flat out evil. If you listen closely when Lotus Notes opens an html email, you can hear the bwaa-haa-haaa sound it makes. I like to imagine what goes on whenever they approve the latest version, "Well, it still breaks html emails 25 different ways - good enough, let's ship it! Heck, we're just a big company with major corporate clients, why bother getting html display right?" It's going to become a tag line they're proud of, "Lotus Notes, torturing, bewildering and vexing html email creators for 20 years!"
Mike
Fantastic work! Solved almost all of my issues.

Now I don't suppose you know how to make Outlook obey either 100% height tables or repeat-y background images?

I've taken to using 10 x 100% height, 1px width table cells that each have a progressively lighter grey in order to fill in the vertical portion of a drop shadow. Works everywhere but Outlook 2010 (PC). Even works fine on Outlook 2011:Mac.

Cheers,
Pt.
Peter
Greetings,

I am using Outlook 2010 and trying to create signatures for my emails. While I have been able to create very basic versions it seems that the signatures contain unwanted line breaks following the last item. A review of the line breaks also shows that they are in a different font than set-up in the signature.

My ultimate goal is to create an email template which will use the signature.

Any help is greatly appreciated!

Thanks,

Kevin
Kevin Holsopple
Is there an updated version of this that also covers Outlook.com?
Serif
Thanks! it works but you have to insert the <style> content before some <meta> or <title> tag in the head, otherwise it will not work in outlook.
giovanni
This didn't work for me (Outlook 2007).
Jeff
I tried this approach, but it breaks in AOL.

I have

<span style="display:block;">

<table>
........
</table>
<table>
........
</table>
...

</span>

However, AOL removes everything after the first </table> tag.

Know why it might be doing this to me?
AHFXStudios

Leave a Comment