Recently, when creating an Email Template for Designer Pages, I killed a few perfectly good moments banging my head against the wall trying to figure out what i was doing wrong.
The Scenario:
Using litmusapp to test a centered HTML email template, some clients (Outlook, Lotus Notes, and Me.com's mail viewer) were failing to center because I had a text-align: left; as part of my reset AND I was not expressly declaring table attributes like width="100%".
The winning solution looks something roughly like this
<html>
<body>
<style>
<!-- inline email styles go inside the body -->
</style>
<table id="outer" cellspacing="0" border="0" cellpadding="0" width="100%">
<tr>
<td width="100%">
<table id="inner" cellspacing="0" border="0" cellpadding="0" width="600px">
<tr>
<td>
stuff goes here
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>Note that for many clients to render this consistently, you will need to expressly define your table attributes via HTML, not just CSS. It's redundant and ugly, but necessary until email clients catch up and offer better CSS support
the styles inside the inline <style> tags look something like this
body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
font-weight: inherit;
font-style: inherit;
line-height: 1;
font-family: inherit;
vertical-align: baseline;
}
body {
line-height: 1;
font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}
ins {
}
del {
text-decoration: line-through;
}
a, a:visited {
color:#0c3265;
text-decoration: none;
font-weight:bold;
display: inline;
}
a:hover {
text-decoration:underline;
}
a, :focus {
outline: none;
}
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
select::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
border: none;
}
select, input, button, textarea, button {
font-family: Helvetica, Arial, sans-serif;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
table td {
vertical-align: top;
}
table#outer,
table#outer td{
text-align:center;
width:100%;
}
table#inner{
width:600px;
margin:0 auto;
}
table#inner td{
text-align: left;
}Then sew it all up by inlining the styles via TAMTAM and you have a sucessfully centered "shell" for your email
**Recommended reading
- Mail Chimp's email Marketing Guide
- Campaign Monitor's guide to CSS support
- Nettuts State of CSS 3 in email Templates
- An excellent guide to inlining your styles via the Ruby gem TAMTAM and TextMate
A quick summary, of the above articles (and many others on the web, that you'll encounter on this very subject) is.
- Use tables for layouts
- Make sure your styles are inlined
- Be aware that the background-image property is not widely supported
- Make sure you have a text only counterpart (most Email Campaign Managers will have an easy setting for this, otherwise, you should do some research on multi-part emails
