0
Items falling out side the 600px in outlook clients
Hi,
When viewing the emailer in outlook clients I am finding some of the graphics are not following the 600px wide frame. So the icons are filling the width of the window.
Any help appreciated.
Code below
<!DOCTYPE html>
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="format-detection" content="telephone=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>A.T. CROSS FREE OFFERS</title>
<style type="text/css">
* {mso-line-height-rule: exactly;}
* {-webkit-text-size-adjust: none;-ms-text-size-adjust: none;}
table td {border-collapse: collapse;}
html, body, p, div {margin: 0;padding: 0;}
.ExternalClass {width: 100%;}
.ExternalClass * {line-height: 110%}
img {-ms-interpolation-mode: bicubic;border: 0;display:block;}
body {margin:0!important; padding:0!important; width: 100%!important;}
</style>
<style type="text/css">
a[x-apple-data-detectors] {color: inherit!important;text-decoration: none!important;font-size: inherit!important;font-family: inherit!important;font-weight: inherit!important;line-height: inherit!important;}
div[style*="margin: 16px 0"] {margin: 0!important;}
</style>
<style>
@media screen and (max-width:600px){
.hide{display:none!important;}
.resize{width:100%!important;height:auto!important;}
.stackup{display:table-header-group;}
.stackdown{display:table-footer-group;}
.text-center{text-align:center;}
.padding10{padding:10px!important}
.font12{font-size:20px!important;}
.font16{font-size:16px!important;}
.font14{font-size:14px!important;}
.font10{font-size:10px!important;}
.stack{display:block!important;width:auto}
.alignsmall{align-center:!important;}
}
</style>
<!--[if gte mso 9]>
<style>
.outlookbutton{padding:10px;}
</style>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
</head>
<body style="margin:0!important; padding:0!important; width: 100%!important;" bgcolor="#e7e7e8">
<table role="presentation" style="max-width: 600px" width="100%" cellpadding="0" cellspacing="0" align="center" border="0" bgcolor="#ffffff">
<tr>
<td colspan="3" cellpadding="0" cellspacing="0" align="center" border="0"><img src="http://s7d5.scene7.com/is/image/ATCross/17-107-EMEA-Summer-Sizzler-EBLAST_01?scl=1&f" width="100%" alt=""/></td>
</tr>
<tr>
<td colspan="3"><img src="http://s7d5.scene7.com/is/image/ATCross/3ffmainimage3?scl=1&f" width="100%" height="" alt=""/></td>
</tr>
</table>
<!--1 column module header-->
<table role="presentation" style="max-width: 600px" width="100%" cellpadding="0" cellspacing="10" align="center" border="0" bgcolor="#e7e7e8">
<tr>
<td colspan="0" Style="font-family: arial;" cellpadding="0px" cellspacing="0" align="center" border="" bgcolor="#e7e7e8" width="25%"><img src="http://s7d5.scene7.com/is/image/ATCross/ORIGINATION?scl=1&f" width="100%" height="" alt=""/>
<p> </p>
<p><span style="font-size:18px;" class="font16"><strong>FREE ORIGINATION</strong></span></p>
<p> </p>
</td>
<td colspan="0" Style="font-family: arial;" cellpadding="0px" cellspacing="0" align="center" border="" bgcolor="#e7e7e8" width="25%"><img src="http://s7d5.scene7.com/is/image/ATCross/ENGRAVE?scl=1&f" width="100%" height="" alt=""/>
<p> </p>
<p><span style="font-size:18px;" class="font16"><strong>FREE DECORATION</strong></span></p>
<p> </p>
</td>
<td colspan="0" Style="font-family: arial;" cellpadding="0px" cellspacing="0" align="center" border="" bgcolor="#e7e7e8" width="25%"><img src="http://s7d5.scene7.com/is/image/ATCross/carriage?scl=1&f" width="100%" height="" alt=""/>
<p> </p>
<p><span style="font-size:18px;" class="font16"><strong>FREE </strong></span></p>
<p><span style="font-size:18px;" class="font16"><strong>CARRIAGE</strong></span></p>
<p> </p>
</td>
<td colspan="0" Style="font-family: arial;" cellpadding="0px" cellspacing="0" align="center" border="" bgcolor="#e7e7e8" width="25%"><a href="http://s7d5.scene7.com/is/content/ATCross/Roger/HTML%20Eblasts/BG%20Christmas%20Offers/Euro%20D/Christmas%20Gift%20guide%202017%20A4%20Euro%20D.pdf"><img src="http://s7d5.scene7.com/is/image/ATCross/DOWNLOAD?scl=1&f" width="100%" height="" alt=""/></a>
<p> </p>
<p><a href="http://s7d5.scene7.com/is/content/ATCross/Roger/HTML%20Eblasts/BG%20Christmas%20Offers/Euro%20D/Christmas%20Gift%20guide%202017%20A4%20Euro%20D.pdf" style="color:black; text-decoration:none"><span style="font-size:18px;" class="font16"><strong>DOWNLOAD OFFERS</strong></span></a></p>
<p> </p>
</td>
</tr>
</table>
<table style="max-width: 600px" width="100%" align="center" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="center" align="center" style="color:#ffffff;font-family:Arial,sans-serif;font-size:14px;line-height:20px;padding:0;" bgcolor="black">
<p> </p>
<p><span style="font-size:30px;" class="font12" ><strong>CONTACT KIRA HENRY</strong> <br>
</span> </p>
<p> <span style="letter-spacing: 0px; line-height: 35px; valign: center;" > <font face="arial" color="#ebaa00" size="5">
<a href="mailto:khenry@cross.com" style="color: #ebab21;text-decoration:none" class="font12">khenry@cross.com</a> </font></span></p>
<p> <span style="letter-spacing: 0px; line-height: 35px; valign: center;"> <font face="arial" color="white" size="5" class="font12"> or call 01582 422 793</font></span></p></td>
</tr>
</table>
<!--2 column module-->
<table style="max-width: 600px" width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td valign="center" align="center" style="color:#black;font-family:Arial,sans-serif;padding:20px;" bgcolor="e7e7e8">
<p> <span style="font-size:12px;" class="font10" ><strong>*OFFER VALID ON ORDERS OF 50 UNITS OR MORE INVOICED BEFORE 31/12/17. CARRIAGE DOES NOT INCLUDE EXPRESS WHICH WOULD BE CHARGED AT STANDARD RATES.</strong><br> </span> </p>
</td>
</tr>
</table>
</body>
</html>
THE CODE BELOW IS THE OFFENDING TABLE.