Why !DOCTYPE is the Black Sheep of HTML Email Design
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 |
STRIP or IGNORE your DOCTYPE entirely |
|
Android Mail Client |
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”> |
|
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.
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.
Great stuff, then I guess what we should use is strict XHTML?
So are you recommending that self closing tags should also be used if using an XHTML doctype?
Cheers.
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.
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.
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
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 and tags, am i covered?
A very Nice and Helpful Post..Thanks for Sharing
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″ />
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.
@TestMyEmails, Try wrapping your small fonts inside a paragraph tag with an inline line-height:
text
Cool https://www.emailonacid.com. Offtopic: Who will play in the final of the Champions League Cup?
Nice Post. Very essential for me. Great thanks. Continue ….
Is this list still uptodate?
waurin,
I’m not sure how accurate this list is now. We’ll put it on our list of blogs to revisit!
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.
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
usefull reading will test it out today
thanks for the post
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!