Saya mencoba membuat templat email, tetapi templat tersebut ditampilkan dengan latar belakang hitam untuk seluruh dokumen di aplikasi email Windows (untuk desktop) dan browser IE 10, meskipun latar belakangnya dimaksudkan berwarna putih. Saya sudah mencoba pada dua mesin yang berbeda.
Setidaknya Thunderbird, Outlook, gmail, Outlook.com, Chrome dan Firefox tampaknya menampilkannya dengan benar dengan latar belakang putih. Dokumen divalidasi di validator w3c.
Ini email saya:
<!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>
Adakah yang bisa mengetahui mengapa ini muncul dengan latar belakang hitam di aplikasi email Windows dan IE 10?
