Why !DOCTYPE is the Black Sheep of HTML Email Design


Black sheep movie

As if email development wasn’t already scary enough, it seems as though we are pushed even further into the HTML and CSS dark ages when it comes to the subject of DOCTYPE. After quite a bit of testing over the past year, we’ve have come to a very clear understanding of the DOCTYPE, it’s effect on your layout and how being aware of it can save a lot of time and frustration.

First, you can’t avoid it. Many email clients strip your DOCTYPE and either impose their own or leave it out entirely. Here is a breakdown:

Email Clients DOCTYPE

Android Gmail Application
Lotus Notes 6.5, 7, 8 and 8.5
Outlook 2007 and 2010
Thunderbird 2 and 3
Yahoo New

STRIP or IGNORE your DOCTYPE entirely

Android Mail Client
Entourage 04 and 08
iPad and iPad Gmail
iPhone and iPhone Gmail
(iOS3 & iOS4)
Kindle Fire
Live Mail
Outlook 2003
Outlook Express
Thunderbird 6
Windows Mail

Gmail & Hotmail
Each will remove your DOCTYPE, and replace it with:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
Yahoo Classic
Removes your DOCTYPE, and replaces it with:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
INTERESTING SIDE NOTE: If you’ve ever struggled with box model padding issues in IE, just use any DOCTYPE other than: <!DOCTYPE html PUBLIC “-//W3C//DTD HTML 3.2 Final//EN>
For example: <!DOCTYPE html> – this doctype will cause all browsers to render your box elements consistantly.

Here are some common things that may happen to your email layout after its DOCTYPE has been stripped:

Since most email clients use a browser based rendering engine or can be viewed from within a web browser, the following list is broken down by occurrences that happen within web browsers.

  • Box model padding becomes an issue when viewing your email in IE vs Firefox
  • In IE 8, CSS padding on TABLEs are reset to “0” – for example:
    <table style=”padding:20px”>
  • Center tags with a set width will no longer be centered in all browsers except IE. For example: <center width=”500px”>
  • In IE, the minimum height on any EMPTY block element is 19px This is particularly important when using spacer divs.
    <div style=”height: 10px “></div>
  • In all browsers except for IE 6 and 7, paragraph elements have a default top and bottom margin of “0” whereas it would otherwise use a default top and bottom margin of 16px.
  • In IE 8, you might see an exaggerated left margin on OLs and ULs, you will need to define the margins with inline CSS to correct this.
  • Some special characters are not supported


Here are some common things that may happen when your email takes on the Hotmail DOCTYPE:

  • Line height for small fonts may become more prevalent in all browsers except for IE. This is only an issue when using inline elements, use paragraph elements or TDs for formatting your small fonts.
  • You might see a small space below each of your images. A common fix is to use <style=”display:block”> inside your image tag.
  • Some special characters are not supported
  • There may be a difference in the way your text links appear (colored underlines)


If you have more to add to either of these lists, please feel free to share your comments below!

So What’s the SOLUTION?

Before running an Acid Test and to save time, we recommend that you strip out your DOCTYPE and test your email layout in IE 6, 7, 8, Firefox, Chrome, Safari and Opera. Once you have it looking good in all browsers, add the Hotmail DOCTYPE and run an Acid test using Firefox or Safari.

By adding a DOCTYPE when you run your Acid Test, we will be able to validate your HTML before you get your test results. We provide code validation for many reasons, the first is to ensure that our test results are accurate. Secondly, your code will be interpreted within the UI of each of the web based email clients – if you have a stray </div>, that could have a big effect on the way your will email render.

INTERESTING SIDE NOTE: The new DOCTYPE for HTML 5 (<!DOCTYPE html>) causes the same image spacing issues as Hotmail! 
Author: Alex Ilhan

Hailing all the way from England, Alex brings his email development expertise along with an endless stream of cups of tea and British cynicism. Follow him on Twitter: @omgitsonlyalex.

Author: Alex Ilhan

Hailing all the way from England, Alex brings his email development expertise along with an endless stream of cups of tea and British cynicism. Follow him on Twitter: @omgitsonlyalex.

19 thoughts on “Why !DOCTYPE is the Black Sheep of HTML Email Design”

  1. Really liked the advises. Particularly the `<style=”display:block”>` is very interesting. I’ll test it out.

    If it comes to it, one final resort could be using different doctypes for different receivers. For self-coded/maintained projects it shouldn’t be tough to provide different doctypes per receiver’s email address domain.

  2. So are you recommending that self closing tags should also be used if using an XHTML doctype?


  3. Yes, it’s recommended that you test without a DOCTYPE in all browsers, then test using the Gmail/Hotmail DOCTYPE which is:

    And yes Mark, it’s probably best to use self closing tags. Our validation tool will pick up any issues as long as you include the strict DOCTYPE in your header when testing.

  4. Thanks guys (great memorable url by the way). Today our firm went to IE8 and quickly I have to re-code our html email template because it’s previewing wrong.

    I was looking for the recommended doctype to use so this is invaluable advice.

  5. Thx for the article!

    Another issue in Gmail is that inline images get a white border or space around them, which can greatly break your design.

    If display:block doesn’t help, you should try “line-height:0;” to the

    containing your image 😉
  6. Warning Line 70, Column 1: <style> isn’t allowed in <body> elements. Acid does not recommend any kind of fix. And the only WC3 HTML Validation error was the expected <style type=”text/css”> Blah Blah Blah!
    before </body> tag and a UTF-8 code Warning about older Browsers
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

  7. Michelle, thank you very much for the great tips. I am still having problems with the line height and small fonts. Would you please give me an example of using paragraph elements or TDs for formatting the small fonts? Thank you.

  8. @TestMyEmails, Try wrapping your small fonts inside a paragraph tag with an inline line-height:


  9. waurin,
    I’m not sure how accurate this list is now. We’ll put it on our list of blogs to revisit!

  10. Reminder: this blog post is 4 years old. HTML email is very idiosyncratic. I personally have had best success with:

    Also, I don’t get the thinking behind the process of testing with and without doctype in all those web browsers. I thought that was the point of testing in email on acid.

    Also, maybe I’m weird, but I don’t worry about validating too much, definitely not one of my main concerns. The “stray div” is a syntax error and you definitely don’t want any syntax errors.

  11. Great article but it confuses me a bit. You first say “ – this doctype will cause all browsers to render your box elements consistantly.” then “The new DOCTYPE for HTML 5 () causes the same image spacing issues as Hotmail!”. So it’s good or not to use the HTML5 doctype? Thanks, Vic

  12. Very great post. I just stumbled upon your weblog and wanted to say that I have really
    loved browsing your weblog posts. After all I will be subscribing on your
    rss feed and I am hoping you write once more very soon!

Comments are closed.