Here's the HTML email code snippet.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width"/>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
@media only screen and (max-width: 740px) {
#wrapper {
width: 100% !important;
}
}
table {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
border-spacing: 0;
}
a {
font-family: Arial;
font-size: 14px;
line-height: 22px;
text-decoration: none;
color: #ff8000;
}
p {
font-family: Arial;
font-size: 14px;
line-height: 22px;
color: #797571;
}
span {
font-family: Arial;
font-size: 18px;
line-height: 18px;
color: #383635;
}
small {
color: #9f9d9d;
font-family: Arial;
font-size: 12px;
line-height: 18px;
}
img {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<table id="wrapper" align="center" width="740" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
<tr>
<td background="http://nineseven.ru/html/transsertiko/img/email-bg.png" bgcolor="#f5f5f5" width="740" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:740px;">
<v:fill type="tile" src="http://nineseven.ru/html/transsertiko/img/email-bg.png" color="#f5f5f5" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div>
<table align="left" cellpadding="0" cellspacing="0" border="0">
<tr>
<td height="55">
<div style="margin: 0; padding: 0; line-height: 0;">
<img src="http://nineseven.ru/html/transsertiko/img/indent.gif" border="0"
width="1" height="1" style="display: block" />
</div>
</td>
<td height="55">
<div style="margin: 0; padding: 0; line-height: 0;">
<img src="http://nineseven.ru/html/transsertiko/img/indent.gif" border="0"
width="1" height="1" style="display: block" />
</div>
</td>
<td height="55">
<div style="margin: 0; padding: 0; line-height: 0;">
<img src="http://nineseven.ru/html/transsertiko/img/indent.gif" border="0"
width="1" height="1" style="display: block" />
...
<p>С уважением,<br>
Холдинговая Компания<br>
ТРАНССЕРТИКО</p>
</td>
<td width="118">
<div style="margin: 0; padding: 0; line-height: 0;">
<img src="http://nineseven.ru/html/transsertiko/img/indent.gif" border="0"
width="1" height="1" style="display: block" />
</div>
</td>
</tr>
<tr style="background: #ededed;" height="100">
<td width="118" height="170">
<div style="margin: 0; padding: 0; line-height: 0;">
...
The email is rendering correctly in most browsers, except for an extra space between #container and the table at the bottom specifically in Outlook 2007. I've attempted to add
mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-size: 0em;
to that specific table but unfortunately it did not resolve the issue. I also experimented with adding vertical-align properties to containing tr and td elements without success. :( Seeking assistance!