Preview your email in the most popular email clients and mobile devices.    Try it for FREE!

Why !DOCTYPE is the Black Sheep of HTML Email Design

Posted November 10, 2010 by Michelle Klann

Email Testing RSS Feed Email Test on Twitter Email Preview on Digg Email CSS on Linked In Email Simulator on Stumbled Upon

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

AOL
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

ACCEPT your DOCTYPE
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! 

Comments

Evlilik Sitesi pic
Evlilik Sitesi
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.
Posted 11/30/2010

Jeremy E pic
Jeremy E
Great stuff, then I guess what we should use is strict XHTML?
Posted 03/15/2011

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

Cheers.
Posted 06/13/2011

Avatar
Michelle Klann
Yes, it's recommended that you test without a DOCTYPE in all browsers, then test using the Gmail/Hotmail DOCTYPE which is: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

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.
Posted 06/13/2011

Natalie Tuckwell pic
Natalie Tuckwell
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.
Posted 06/23/2011

constantine pic
constantine
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 <td> containing your image wink
Posted 04/05/2012

Dan pic
Dan
Thanks for the tips!

What's the fix for "There may be a difference in the way your text links appear (colored underlines)"? I usually declare the color in the <a> and <font> tags, am i covered?
Posted 06/28/2012

engn pic
engn
A very Nice and Helpful Post..Thanks for Sharing
Posted 06/29/2012

Kenneth pic
Kenneth
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" />
Posted 11/26/2012

TestMyEmails pic
TestMyEmails
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.
Posted 01/23/2013

Avatar
Michelle Klann
@TestMyEmails, Try wrapping your small fonts inside a paragraph tag with an inline line-height: text
Posted 01/23/2013

Starcissirm pic
Starcissirm
Cool http://www.emailonacid.com. Offtopic: Who will play in the final of the Champions League Cup?
Posted 04/23/2013

Al Shahriat Karim pic
Al Shahriat Karim
Nice Post. Very essential for me. Great thanks. Continue ....
Posted 08/28/2013

waurin pic
waurin
Is this list still uptodate?
Posted 05/20/2014

Avatar
Geoff Phillips
waurin,
I'm not sure how accurate this list is now. We'll put it on our list of blogs to revisit!
Posted 05/20/2014

EGauvin pic
EGauvin
Reminder: this blog post is 4 years old. HTML email is very idiosyncratic. I personally have had best success with:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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.
Posted 05/29/2014

Vic Dinovici pic
Vic Dinovici
Great article but it confuses me a bit. You first say "<!DOCTYPE html> - this doctype will cause all browsers to render your box elements consistantly." then "The new DOCTYPE for HTML 5 (<!DOCTYPE html>) causes the same image spacing issues as Hotmail!". So it's good or not to use the HTML5 doctype? Thanks, Vic
Posted 08/14/2014

Comment via our Blog

Name:
Email:
Location:
URL:

Comment:

Remember my personal information
Notify me of follow-up comments?

Please enter the word you see in the image below:

x
Sign up for our Newsletter

And get updates on the latest email tips, tricks and hacks!