Menu
I am working on an email newsletter. Everything else is in place and working fine, except for the body background color, or it’s the body width at 100% that is not working.
Any idea what I have done wrong here, or how can I make it work?
URL of my newsletter: https://dl.dropboxusercontent.com/u/29654441/Accessibility/New%20folder/newsletter_issue1/newsletter_inline.html
597
The body element is ignored by most mail clients. If you need a background, you'll have to make a container element and add the background to that.
148
Try using this:
<body bgcolor="#efefef" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="650" valign="top" align="center" bgcolor="#efefef">
....
</td>
</tr>
</table>
</body>
The tag is now your container wrapper for the email template. As some email clients strip the body tag, you then have a 100% table to fall back to which all clients support.
I would also suggest using the following in your <head> tag:
<style type="text/css">
body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;}
.ExternalClass {width:100%;}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}
</style>
This does the following just as a few extras:
44
Body element is not always ignored (particularly in Outlook), however you should also pair it with a full width table as a fallback. This also makes a good method to have the forwarding background color remain white, while your html area background remains something else.
Here is a basic setup with this in mind:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title>
<style type="text/css">
/* Client-specific Styles */
#outlook a {padding:0;}
body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;} /* force default font sizes */
.ExternalClass {width:100%;} .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Hotmail */
a:active, a:visited, a[href^="tel"], a[href^="sms"] { text-decoration: none; color: #000001 !important; pointer-events: auto; cursor: default;}
table td {border-collapse: collapse;}
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="margin: 0px; padding: 0px; background-color: #FFFFFF;" bgcolor="#FFFFFF"><table bgcolor="#252525" width="100%" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td><table width="600" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td valign="top" style="padding-top:30px; padding-bottom:30px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#FFFFFF" style="padding:30px;">
Content here
</td>
</tr>
</table>
</td></tr></table></td></tr></table></body></html>
On a side note, if you want a backgorund image, there are 2 methods in html email. See this answer for more details.
40
Body width should ideally be 640 as most mobiles and tablets will resize the email correctly then.
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
