I'm trying to create an email template, but it shows with black background for the whole document in Windows mail app (for desktop) and IE 10 browser, although the background is intended to be white. I've tried on two different machines.
At least Thunderbird, Outlook, gmail, outlook.com, Chrome and Firefox seem to show it correctly with white background. The document validates in w3c validator.
Here's my email:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Email</title>
<style type="text/css">
body {
padding: 0;
margin: 0;
font-family: 'Bitstream Vera Sans','DejaVu Sans', Tahoma, sans-serif;
font-size: 13px;
line-height: 1.65;
color: #222;
background-color: #fff;
}
.full-width {
width: 100%;
}
#main {
width: 580px;
}
#logo {
background-color: #fff;
}
.logo-text {
color: #332B23;
}
#left-col {
background-color: #658cab;
}
.left-col-content,
.left-col-content a {
background-color: #658cab;
color: #fff;
font-size: 12px;
}
#footer1, #footer2 {
font-size: 11px;
}
#footer1,
#footer1 a,
#footer1 td,
#footer1 p,
#footer1 div {
font-size: 11px;
color: #222;
}
#footer2,
#footer2 a,
#footer2 td,
#footer2 p,
#footer2 div {
font-size: 11px;
color: #ccc;
}
#footer1 a,
#footer2 a {
text-decoration: none;
}
td.padding0 {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
font-style: normal;
color: #332B23;
}
h1 {
margin: 0 0 21px 0;
font-size: 26px;
}
h2 {
font-size: 18px;
margin: 14px 0 0 0;
}
p {
font-size: 13px;
margin: 13px 0;
}
a {
font-size: 13px;
text-decoration: none;
color: #0B4973;
}
.logo {
}
.w5 {
width: 5px;
}
.w15 {
width: 15px;
}
.w30 {
width: 30px;
}
.w40 {
width: 40px;
}
.w128 {
width: 128px;
}
.w180 {
width: 180px;
}
.w365 {
width: 365px;
}
.vpadding110 td {
height: 110px;
}
.vpadding50 td {
height: 50px;
}
.text-center {
text-align: center;
}
</style>
</head>
<body>
<table bgcolor="#fff" class="full-width" cellspacing="0" cellpadding="0" border="0">
<tr>
<td bgcolor="#fff" align="center" width="580">
<table id="main" cellspacing="0" cellpadding="0" border="0" width="580">
<tr>
<td width="580" align="left">
<table bgcolor="#fff" cellspacing="0" cellpadding="0">
<tr>
<td id="left-col" width="180" class="w180" valign="top" bgcolor="#658cab">
<table bgcolor="#fff" cellspacing="0" cellpadding="0">
<tr>
<td class="w180">
<table cellspacing="3" cellpadding="0" border="0">
<tr class="vpadding26"><td width="180" height="26"></td></tr>
<tr>
<td id="logo" width="180" class="w180" align="center" valign="middle">
Logo
</td>
</tr>
<tr class="vpadding26"><td width="180" height="26"></td></tr>
</table>
</td>
</tr>
<tr>
<td class="left-col-content w180" width="180">
<table cellspacing="0" cellpadding="14" border="0" align="left">
<tr>
<td>
<table cellspacing="0" cellpadding="5" border="0" align="left">
<tr class="vpadding50"><td height="50"></td></tr>
<tr>
<td width="180" >
Text Text
</td>
</tr>
<tr>
<td width="180">
Text Text
</td>
</tr>
<tr>
<td width="180">
Text Text
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td class="w30" width="30"></td>
<td id="right-col" class="w365" width="365" valign="top">
<table cellspacing="0" cellpadding="0">
<tr class="vpadding110"><td height="110"></td></tr>
<tr>
<td width="365">
<h1>In porttitor urna</h1>
</td>
</tr>
<tr>
<td width="365">
<h2>Lorem ipsum</h2>
</td>
</tr>
<tr>
<td width="365">
<p>Quisque posuere est nunc, vel adipiscing orci lobortis sit amet. Fusce at facilisis arcu, vel interdum neque. Aliquam sit amet nisl nec dui elementum convallis. Phasellus commodo nunc nec ligula luctus tristique. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut pellentesque sapien tellus, vitae egestas libero vehicula et.</p>
</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0">
<tr class="vpadding110"><td height="110"></td></tr>
<tr>
<td width="365">
<h1>In porttitor urna</h1>
</td>
</tr>
<tr>
<td width="365">
<h2>Lorem ipsum</h2>
</td>
</tr>
<tr>
<td width="365">
<p>Quisque posuere est nunc, vel adipiscing orci lobortis sit amet. Fusce at facilisis arcu, vel interdum neque. Aliquam sit amet nisl nec dui elementum convallis. Phasellus commodo nunc nec ligula luctus tristique. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut pellentesque sapien tellus, vitae egestas libero vehicula et.</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr id="footer2">
<td bgcolor="#2E221E" class="" width="580" valign="top" align="left">
<table cellspacing="0" cellpadding="12" border="0">
<tr>
<td width="193" valign="top" align="left">
Address<br />
Address<br />
Address<br />
Address<br />
</td>
<td width="193" valign="top" align="left">
<div>
Address<br />
Address
</div>
</td>
</tr>
</table>
</td><!-- td.w580 -->
</tr><!-- #footer2 -->
<tr class="vpadding10"><td width="580" height="10"></td></tr>
<tr id="footer1" >
<td width="580" class="w580">
<table bgcolor="#fff" cellspacing="2" cellpadding="0" border="0" align="center">
<tr>
<td width="15" class="w15"></td>
<td width="40" class="w40">Text
</td>
<td width="5" class="w5"></td>
<td width="128" class="w128" align="left">
Text
</td>
<td width="15" class="w15"></td>
<td width="40" class="w40">
Text
</td>
<td width="5" class="w5"></td>
<td width="128" class="w128" align="left">
Text
</td>
<td width="15" class="w15"></td>
<td width="40" class="w40">
Text
</td>
<td width="5" class="w5"></td>
<td width="128" class="w128" align="left">
Text
</td>
<td width="15" class="w15"></td>
</tr>
</table>
</td><!-- td.w580 -->
</tr><!-- #footer1 -->
</table><!-- #main -->
</td>
</tr>
</table><!-- .full-width -->
</body>
</html>
Can someone figure out why it shows with black background in Windows mail app and IE 10?