GM0
Rendering Issues in Windows 7 & 8
Hi All,
I am pulling my hair out with trying to get an email to behave consistently across platforms. It would be awesome if i could get some advice. If anyone has time could they review this code and tell me what is causing the problem. I am having background image rendering issues, and scaling issues.
<!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>
<title>LatticeStrategies_email</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0 ">
<style type="text/css">
*{
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:none;
-webkit-text-resize:100%;
text-resize:100%;
}
a{
outline:none;
}
a:hover{
text-decoration:none !important;
}
.active:hover{
opacity:0.8;
}
.active{
-webkit-transition:all 0.3s ease;
-moz-transition:all 0.3s ease;
-ms-transition:all 0.3s ease;
transition:all 0.3s ease;
}
.tpl-content{
padding:0 !important;
}
.cke_show_borders{
background:#e4e4e4;
color:#000;
}
.cke_show_borders a{
color:#000 !important;
}
.ExternalClass,.ExternalClass a,.ExternalClass span,.ExternalClass b,.ExternalClass br,.ExternalClass p,.ExternalClass div{
line-height:inherit;
}
table td{
border-collapse:collapse !important;
}
@media only screen and (max-width:500px){
table[class=wrapper]{
min-width:320px !important;
}
} @media only screen and (max-width:500px){
table[class=flexible]{
width:100% !important;
}
} @media only screen and (max-width:500px){
td[class=hide],td[class=fix-gmail]{
display:none !important;
width:0 !important;
height:0 !important;
padding:0 !important;
font-size:0 !important;
line-height:0 !important;
}
} @media only screen and (max-width:500px){
td[class=img-flex] img{
width:100% !important;
height:auto !important;
}
} @media only screen and (max-width:500px){
td[class=aligncenter]{
text-align:center !important;
}
} @media only screen and (max-width:500px){
td[class=header]{
padding:20px 10px !important;
background:linear-gradient(to bottom, #dfdfdf 0%, #f6f6f6 30%, #fdfdfd 50%, #fff 100%);
}
} @media only screen and (max-width:500px){
td[class=indent-01]{
padding:20px 10px !important;
}
} @media only screen and (max-width:500px){
td[class=socialnetworks-block]{
padding:20px 10px !important;
background:linear-gradient(to bottom, #dadada 0%, #eeeeee 100%);
}
} @media only screen and (max-width:500px){
td[class=banner]{
padding:20px;
height:auto !important;
}
} @media only screen and (max-width:500px){
td[class=banner] *{
text-align:center !important;
text-shadow:0 0 5px rgba(0,0,0,1);
}
} @media only screen and (max-width:500px){
td[class=image-m]{
padding:20px 0 !important;
display:table-cell !important;
}
} @media only screen and (max-width:500px){
td[class=image-m] img{
margin:0 auto !important;
display:block !important;
width:177px !important;
height:auto !important;
}
} @media only screen and (max-width:500px){
table[class=center]{
margin:0 auto !important;
float:none !important;
}
} @media only screen and (max-width:500px){
tr[class=table-holder] th{
width:100% !important;
display:block !important;
}
}</style></head>
<body style="margin:0; padding:0;" bgcolor="#ffffff" link="#666666">
<table class="wrapper" width="100%" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<tr>
<td>
<table class="flexible" align="center" width="700" cellpadding="0" cellspacing="0" style="margin:0 auto;">
<tr>
<td class="fix-gmail">
<table width="700" cellpadding="0" cellspacing="0" style="width:700px !important;">
<tr>
<td style="min-width:700px; font-size:0; line-height:0;"> </td>
</tr>
</table>
</td>
</tr>
<!-- header -->
<tr>
<td class="header" bgcolor="#dfdfdf" background="http://s3.postimg.org/90vwgkc9v/bg_header.jpg" style="padding:1px 35px 3px 46px;">
<table class="flexible" width="139" align="left" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tr>
<td mc:edit="block01" class="aligncenter"><a href="http://www.latticestrategies.com" target="_blank"><img alt="Lattice strategies" border="0" height="56" src="https://gallery.mailchimp.com/196f893f3d24f9cbb94a40805/images/c6ff3e65-1218-4d0b-9091-d33edba3e5b5.png" style="width:139px; vertical-align:top;" width="139"></a></td>
</tr>
</table>
<table class="flexible" width="450" align="right" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tr>
<td mc:edit="block02" class="aligncenter" align="right" style="padding:18px 0 0; font:19px/21px Arial, Helvetica, sans-serif; color:#000;">TAKE BETTER RISK</td>
</tr>
</table>
</td>
</tr>
<!-- content -->
<tr>
<td class="banner" bgcolor="#a7a7a7" height="334" valign="top" background="http://s12.postimg.org/5z1hodylp/image.jpg" style="background-position:50% 0;">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:700px; height:334px;">
<v:fill type="tile" src="http://s12.postimg.org/5z1hodylp/image.jpg" color="#a7a7a7" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td class="hide" width="47"></td>
<td valign="top">
<table width="100%" cellpadding="0" cellspacing="0">
<tr><td class="hide" height="43"></td></tr>
<tr>
<td mc:edit="block03" style="padding:0 0 9px; font:bold 33px/30px Arial, Helvetica, sans-serif; color:#fff; text-transform:uppercase;">
Systematic strategies to take better risk.
</td>
</tr>
<tr>
<td mc:edit="block04" height="96" valign="top" style="font:15px/15px Arial, Helvetica, sans-serif; color:#fff; text-transform:uppercase;"><strong><span style="font-size:11px">Deliver the outperformance potential of active management with the transparency and cost-efficiency OF an ETF.</span></strong><br>
<br>
</td>
</tr>
<tr>
<td mc:edit="block05" align="right" style="padding:10px 0 0;"><a href="http://www.latticeetfs.com" target="_blank"><img alt="Learn more" border="0" height="50" src="https://gallery.mailchimp.com/196f893f3d24f9cbb94a40805/images/98b8e7dc-fc81-4a06-a8b2-363f29b7317a.png" style="vertical-align:top;" width="185"></a></td>
</tr>
</table>
</td>
<td class="hide" width="315"></td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
<tr>
<td class="indent-01" style="padding:34px 45px 27px;">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td mc:edit="block06" align="center" style="padding:0 0 20px; font:16px/22px Arial, Helvetica, sans-serif; color:#585858;">At Lattice Strategies, we understand and share your focus on managing risk and growing capital. We have learned through years of risk-focused research and experience that the deliberate and systematic reallocation of risk is a primary driver of long-term capital growth. Advisors have always had the ability to do this across asset classes; now it can be achieved within them.</td>
</tr>
<tr>
<td mc:edit="block07" align="center" style="padding:0 0 14px; font:bold 24px/27px Arial, Helvetica, sans-serif; color:#058ea6;">FOUR NEW RISK-FIRST ETFs</td>
</tr>
<tr>
<td mc:edit="block08" align="center" style="font:16px/22px Arial, Helvetica, sans-serif; color:#585858;">We’re proud to announce our new suite of paradigm-shifting ETFs. These innovative new tools, designed for leading advisors, provide core exposure to major equity asset classes from an entirely new perspective.</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="indent-01" bgcolor="#f0eeee" style="padding:28px 15px 5px 30px;">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>
<table width="100%" cellpadding="0" cellspacing="0">
<tr class="table-holder">
<th width="324" align="left" style="vertical-align:top; padding:0;">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>
<table class="center" cellpadding="0" cellspacing="0">
<tr>
<td class="aligncenter" mc:edit="block09" style="padding:4px 0 13px; font:bold 20px/20px Arial, Helvetica, sans-serif; color:#058ea6;">FIND OUT ABOUT OUR <br>FOUR NEW RISK-FIRST ETFs</td>
</tr>
<tr>
<td style="padding:0 0 2px;">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="48">
<table cellpadding="0" cellspacing="0">
<tr>
<td align="center" mc:edit="block10" width="46" bgcolor="#058ea6" style="padding:2px; font:bold 14px/16px Arial, Helvetica, sans-serif; color:#fff;"><a href="http://www.latticeetfs.com/our-etfs/all-etfs.php" target="_blank" style="text-decoration:none; color:#fff;">ROAM</a></td>
</tr>
</table>
</td>
<td width="5"></td>
<td mc:edit="block11" style="font:13px/16px Arial, Helvetica, sans-serif; color:#727070;"><a href="#" target="_blank" style="text-decoration:none; color:#727070;">Lattice Emerging Markets Strategy ETF</a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding:0 0 2px;">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="48">
<table cellpadding="0" cellspacing="0">
<tr>
<td align="center" mc:edit="block12" width="46" bgcolor="#058ea6" style="padding:2px; font:bold 14px/16px Arial, Helvetica, sans-serif; color:#fff;"><a href="http://www.latticeetfs.com/our-etfs/all-etfs.php" target="_blank" style="text-decoration:none; color:#fff;">RODM</a></td>
</tr>
</table>
</td>
<td width="5"></td>
<td mc:edit="block13" style="font:13px/16px Arial, Helvetica, sans-serif; color:#727070;"><a href="#" target="_blank" style="text-decoration:none; color:#727070;">Lattice Developed Markets Strategy ETF</a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding:0 0 2px;">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="48">
<table cellpadding="0" cellspacing="0">
<tr>
<td mc:edit="block14" align="center" width="46" bgcolor="#058ea6" style="padding:2px; font:bold 14px/16px Arial, Helvetica, sans-serif; color:#fff;"><a href="http://www.latticeetfs.com/our-etfs/all-etfs.php" target="_blank" style="text-decoration:none; color:#fff;">ROUS</a></td>
</tr>
</table>
</td>
<td width="5"></td>
<td mc:edit="block15" style="font:13px/16px Arial, Helvetica, sans-serif; color:#727070;"><a href="#" target="_blank" style="text-decoration:none; color:#727070;"> Lattice US Equity Strategy ETF</a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding:0 0 2px;">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="48">
<table cellpadding="0" cellspacing="0">
<tr>
<td mc:edit="block16" align="center" width="46" bgcolor="#058ea6" style="padding:2px; font:bold 14px/16px Arial, Helvetica, sans-serif; color:#fff;"><a href="http://www.latticeetfs.com/our-etfs/all-etfs.php" target="_blank" style="text-decoration:none; color:#fff;">ROGS</a></td>
</tr>
</table>
</td>
<td width="5"></td>
<td mc:edit="block24" style="font:13px/16px Arial, Helvetica, sans-serif; color:#727070;"><a href="#" target="_blank" style="text-decoration:none; color:#727070;">Lattice Global Small Cap Strategy ETF</a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="image-m" style="line-height:0; font-size:0; display:none;"><img src="https://gallery.mailchimp.com/196f893f3d24f9cbb94a40805/images/bddf5c21-f6ad-4cca-a365-5c7818a2d7f5.jpg" width="0" height="0" alt=""></td>
</tr>
</table>
</td>
</tr>
</table>
</th>
<th align="left" style="vertical-align:top; padding:0;">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td class="hide" width="13" valign="top"><img src="https://gallery.mailchimp.com/196f893f3d24f9cbb94a40805/images/bab07ac9-97ad-4e55-8084-ae621d0a2fd7.jpg" style="vertical-align:top;" width="2" height="177" alt=""></td>
<td valign="top">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td mc:edit="block17" class="aligncenter" style="padding:4px 0 0;"><a href="http://www.latticeetfs.com/what-we-think/research-insights.php" target="_blank"><img src="https://gallery.mailchimp.com/196f893f3d24f9cbb94a40805/images/93550249-6da7-47af-8a29-d5d2a2b706e1.png" border="0" style="vertical-align:top;" width="305" height="167" alt="Discover how taking better risk may lead to improved returns in your portfolios. Learn More"></a></td>
</tr>
</table>
</td>
</tr>
</table>
</th>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="socialnetworks-block" bgcolor="#dadada" background="http://s7.postimg.org/mrx9j7aej/bg_block.jpg" style="padding:11px 16px 1px 13px;">
<table class="flexible" width="298" align="left" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tr>
<td mc:edit="block18" class="aligncenter" style="padding:3px 0 13px; font:9px/11px Arial, Helvetica, sans-serif; color:#000;">Copyright © Lattice Strategies, Inc.</td>
</tr>
</table>
<table class="flexible" width="200" align="right" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tr>
<td>
<table class="center" align="right" cellpadding="0" cellspacing="0">
<tr>
<td mc:edit="block19"><a href="https://www.linkedin.com/company/lattice-strategies-llc" target="_blank"><img align="none" height="11" src="https://gallery.mailchimp.com/196f893f3d24f9cbb94a40805/images/5aee60ef-3863-4c91-ba18-3bb6ec69445e.png" style="width: 50px; height: 11px; margin: 0px;" width="50"></a></td>
<td width="2"></td>
<td mc:edit="block20"></td>
<td width="2"></td>
<td mc:edit="block21"></td>
<td width="2"></td>
<td mc:edit="block22"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- footer -->
<tr>
<td mc:edit="block23" class="indent-01" bgcolor="#787878" style="padding:7px 13px; font:16px/16px Arial, Helvetica, sans-serif; color:#fff;">
<b>Investors are reminded that all investing involves risk, including possible loss of principal. Consider the Funds’ investment objectives, risks, charges, and expenses carefully before investing. A prospectus with this and other information about the Funds may be obtained by visiting <a href="http://www.latticeetfs.com/" target="_blank" style="text-decoration:none; color:#fff;">www.latticeetfs.com</a> or by calling <a href="tel:4153156700" target="_blank" style="text-decoration:none; color:#fff;">415-315-6700</a>. Read the prospectus carefully before investing.</b> The Funds are new and have limited operating history. Lattice Funds are distributed by ALPS Distributors, Inc. For Institutional Communication Only.
</td>
</tr>
<tr>
<td><div style="display:none; white-space:nowrap; font:15px courier; color:#fff;">- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -</div></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Taking only a quick look at this code, these are my comments:
Stay far far away from shorthand css and don't rely on padding. There's not much support for background images across major clients but if you are fine with using it with expectation that solid bg color will show up then this is fine.