Background Colors in HTML Emails


17 thoughts on “Background Colors in HTML Emails”

  1. 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.

  2. 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.

  3. If you insert your body copy and images inside the , images will resize.
    If you insert your body copy and images by using a table inside the , images will not resize.

  4. 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.

  5. 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?

  6. @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

  7. 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…

  8. 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.

  9. 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

     

    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!”

  10. 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.

  11. 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

  12. 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.

  13. I tried this approach, but it breaks in AOL.

    I have

    ……..
    ……..

    However, AOL removes everything after the first tag.

    Know why it might be doing this to me?

Leave a Reply

Your email address will not be published. Required fields are marked *

Free Email Goodies