HTML email horizontally extends fixed width in Microsoft Outlook -
i've got lot of time wrapped in template, it's mobile optimized , compatible dotmailer's easybuilder software noobs edit.
when email received outlook (dektop client) extends right width horizontally elements following suit. elements full width not extend (not want them extend!)
i'd appreciate guys - please find screenshots attached , code snippet below (due character limits here i'll paste in header/upper content).
<style>.readmsgbody{width:100%}.externalclass{width:100%}#outlook a{padding:0}body{width:100%!important;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;margin:0;padding:0}a img{border:0}a,a:visited,a:hover,a:active{color:inherit!important}img{outline:0;text-decoration:none;-ms-interpolation-mode:bicubic}.applelinks a{color:#333;text-decoration:none}.externalclass{width:100%!important}.externalclass,.externalclass p,.externalclass span,.externalclass font,.externalclass td,.externalclass div{line-height:100%}.externalclass img[class^=emoji]{width:10px!important;height:10px!important;display:inline!important}@media screen , (-webkit-min-device-pixel-ratio :1.5),only screen , (min-device-pixel-ratio :1.5),only screen , (max-device-width:480px){table[class~=hide],td[class~=hide],img[class~=hide],font[class~=hide]{display:none!important}td[class~=grey_border]{padding:5px!important;margin:0!important}td[class~=eem_frame]{padding:10px!important}table[class~=ee_element],table[class~=eeb_width],table[class~=eev_element]{width:100%!important}table[class~=eem_outerzone],td[class~=eem_outerzone]{max-width:640px!important;min-width:310px!important;width:100%!important}td[class~=ved-scaled-cols],table[class="ee_columns"]{display:block!important;clear:both!important;width:100%!important;margin:0!important;padding:10px!important}td[class~=ved-scaled-cols-screenshots],table[class="ee_columns_screenshots"]{display:block!important;clear:both!important;width:90%!important;padding:15px!important;margin-left:auto!important;margin-right:auto!important;align:center!important}td[class~=ved-scaled-cols-newsimages],table[class="ee_columns_newsimages"]{display:block!important;clear:both!important;width:90%!important;padding:15px!important;margin-left:auto!important;margin-right:auto!important;align:center!important}td[class~=ved-scaled-cols-button1],table[class="ee_columns_b1"]{display:block!important;clear:both!important;width:200px!important;padding-top:15px!important;padding-bottom:15px!important}td[class~=ved-scaled-cols-button2],table[class="ee_columns_button2"]{display:block!important;clear:both!important;width:100%!important;max-height:54px!important;padding:10px 20px 10px 0!important}img[class~=ee_editable]{height:auto!important;max-width:640px!important;width:100%!important}.ee_editable{width:100%!important;height:auto!important}.ee_columns>tbody>tr>td:not(.ee_dropzone),.ee_columns>tr>td:not(.ee_dropzone),.ee_columnstd:not(.ee_dropzone){display:inherit!important}.ee_columns_screenshots>tbody>tr>td:not(.ee_dropzone),.ee_columns_screenshots>tr>td:not(.ee_dropzone),.ee_columns_screenshotstd:not(.ee_dropzone){display:inherit!important}.ee_columns_newsimages>tbody>tr>td:not(.ee_dropzone),.ee_columns_newsimages>tr>td:not(.ee_dropzone),.ee_columns_newsimagestd:not(.ee_dropzone){display:inherit!important}table[class~="eem_stack320"],td[class~="eem_stack320"]{display:block!important;clear:both!important;min-width:320px!important;width:100%!important;margin:0!important;padding:0!important;alignment-adjust:central!important}.eem_stack{display:block!important;clear:both!important;width:100%!important;margin:0!important;padding:0!important}td[class~=eem_stack]{display:block!important;clear:both!important;width:100%!important;margin:0!important;padding:0}div[class~=center],div[class~=center] *{text-align:center!important;line-height:22px!important;margin-bottom:15px!important;font-size:18px!important}div[class~=left],div[class~=left] *{text-align:left!important;line-height:22px!important;margin-bottom:15px!important;font-size:18px!important}div[class~=right],div[class~=right] *{text-align:left!important;line-height:22px!important;margin-bottom:15px!important;font-size:18px!important}td[class~=eem_smallimage]{line-height:normal!important;height:auto!important}font[class~=title-text],table[class="title-text"]{line-height:22px!important;margin-bottom:15px!important;font-size:20px!important}font[class~=main-text],table[class="main-text"]{line-height:20px!important;margin-bottom:15px!important;font-size:18px!important}font[class~=section-title-text],table[class="section-title-text"]{line-height:26px!important;margin-bottom:15px!important;font-size:24px!important}font[class~=unsubscribe-text],table[class="unsubscribe-text"]{line-height:30px!important;padding-bottom:20px!important;font-size:24px!important}};.ee_editable{width:100%!important;height:auto!important}</style><style type="text/css">table{border-collapse:collapse}</style><table style="table-layout:auto"class="ee_mobiletemplate"bgcolor="#ffffff"border="0"cellpadding="0"cellspacing="0"width="100%"><tbody><tr><td><table class="eem_outerzone"style="border:1px solid rgb(153,153,153);table-layout:auto;"align="center"bgcolor="#e1e1e1"border="0"cellpadding="0"cellspacing="0"width="680"><tbody><tr><td class="grey_border"style="padding:18px;"><table style="width:640px;table-layout:auto"class="eem_outerzone" bgcolor="#e1e1e1"border="0"cellpadding="0"cellspacing="0"width="640"><tbody><tr><td style="padding:0px"class="ee_dropzone"width="640"><table style="width:640px;table-layout:auto"class="hide"bgcolor="#e1e1e1"border="0"cellpadding="0"cellspacing="0"width="640"><tbody><tr><td style="padding-right:5px;padding-bottom:5px"><table style="table-layout:auto"class="ee_customedit ee_sociallinks"data-title="social sharing"data-edit="social"border="0" cellpadding="0" cellspacing="0"width="230"><tbody><tr><td class="ee_socialcontent"><div class="eesocial"><table style="table-layout:auto"border="0" cellpadding="0" cellspacing="0"><tbody><tr><td style="text-align:left;padding-right:5px"><a href="http://$socialbookmark$?b=4"><img title="facebook"style="width:24px; height:24px;"src="https://my.dotmailer.com/cmpimg/sys/socnet/facebook.png" border="0"height="24"width="24"></a></td><td style="text-align:left;padding-right:5px"><a href="http://$socialbookmark$?b=36"><img title="googleplus"style="width:24px; height:24px;"src="https://my.dotmailer.com/cmpimg/sys/socnet/googleplus.png" border="0"height="24"width="24"></a></td><td style="text-align:left;padding-right:5px"><a href="http://$socialbookmark$?b=12"><img title="linkedin"style="width:24px; height:24px;"src="https://my.dotmailer.com/cmpimg/sys/socnet/linkedin2.png"border="0"height="24"width="24"></a></td><td style="text-align:left;padding-right:5px"><a href="http://$socialbookmark$?b=32"><img title="twitter" style="width:24px;height:24px"src="https://my.dotmailer.com/cmpimg/sys/socnet/twitter.png"border="0"height="24"width="24"></a></td><td style="text-align:left;padding-right:5px"><a href="http://$socialbookmark$?b=1"><img title="delicious"style="width:24px;height:24px;"src="https://my.dotmailer.com/cmpimg/sys/socnet/delicious.png"border="0"height="24"width="24"></a></td><td style="text-align:left;padding-right:5px"><a href="http://$socialbookmark$?b=3"><img title="reddit"style="width:24px;height:24px;"src="https://my.dotmailer.com/cmpimg/sys/socnet/reddit.png"border="0" height="24"width="24"></a></td><td style="text-align:left;padding-right:5px"><a href="http://$socialbookmark$?b=5"><img title="stumbleupon"style="width:24px;height:24px;"src="https://my.dotmailer.com/cmpimg/sys/socnet/stumbleupon.png"border="0"height="24"width="24"></a></td></tr></tbody></table></div></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table><table style="width:640px;table-layout:auto"class="eem_outerzone"bgcolor="#e1e1e1"border="0"cellpadding="0"cellspacing="0"width="640"><tbody><tr><td style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;border-left:1px solid #999;border-top:1px solid #999;border-bottom:1px solid #999;border-right:1px solid #999"class="ee_dropzone"width="640"><table style="width:640px;table-layout:auto"class="ee_element"border="0"cellpadding="0"cellspacing="0"width="100%"><tbody><tr><td class="hide"style="padding:0;width:210px"bgcolor="#000000"width="35%"><table class="ee_element"style="width:208px;table-layout:auto"border="0"cellpadding="0"cellspacing="0"width="208"><tbody><tr><td style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><img src="https://my.dotmailer.com/resources/handlers/dcimage.ashx?text=sys - header logo - corporate&id=13743"></td></tr></tbody></table></td><td style="width:390px;padding-right:20px;padding-left:20px"bgcolor="#000000"><div style="padding-top:8px;text-align:right"class="ee_editable center"><font style="mso-table-lspace:0;mso-table-rspace:0;color:#f3fff1;font-size:15px;line-height:18px;font-family:trebuchet ms,arial,helvetica,sans-serif">july 2013</font></div><div style="text-align:right"class="ee_editable hide"><img style="width:369px;height:56px"class="vedpw390"src="https://my.dotmailer.com/resources/handlers/dcimage.ashx?text=sys - header forward , view in browser&id=13746"border="0"width="369"height="56"></div></td></tr></tbody></table><table class="ee_element" style="width:640px" border="0" cellpadding="0" cellspacing="0" width="640"><tbody><tr><td class="eem_smallimage" style="padding:0;width:640px;line-height:6px" height="6"><img src="https://i.emlfiles.com/cmpimg/2011/44869/2977177_greendivider640.png" class="ee_editable vedpw640 ee_pnggif_image" style="display:block;width:640px;height:6px" border="0" width="640" height="6"></td></tr></tbody></table><table class="ee_element" style="width:640px;table-layout:auto;background-color:#fff" border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td style="padding:0px;width:640px"><a href="#"target="_blank"><img src="/img.ashx?__i__=https://i.emlfiles.com/cmpimg/9/6/8/4/4/files/3578369_main_feature_graphic_640xany.png" alt="main feature graphic"width="640"class="ee_editable vedpw640"style="display:block;width:640px;"align="middle"border="0"></a></td></tr></tbody></table><table style="width:640px;table-layout:auto"class="ee_element"border="0"cellpadding="0"cellspacing="0"width="100%"><tbody><tr><td style="padding:0;width:640px"><table class="ee_element"style="width:640px;table-layout:auto"bgcolor="#ffffff"border="0"cellpadding="0"cellspacing="0"width="100%"><tbody><tr><td style="padding:0;width:20px"rowspan="2"width="20"><img src="https://my.dotmailer.com/cmpimg/2011/44869/2876533_spacer.gif"style="display:block"height="10"width="20"></td><td style="padding:0;width:600px"width="100%"><div style="text-align:left" class="ee_editable"><font class="title-text" style="mso-table-lspace:0;mso-table-rspace:0;color:#76b900;font-size:15px;line-height:18px;font-family:trebuchet ms,arial,helvetica,sans-serif;font-weight:bold;text-decoration:none;text-transform:uppercase"><a href="#"target="_blank"style="text-decoration:none;color:#76b900"><br>main feature</a></font></div><div style="text-align:left"class="ee_editable"><font class="main-text"style="mso-table-lspace:0;mso-table-rspace:0;font-size:12px;color:#000;line-height:14px;font-family:trebuchet ms,arial,helvetica,sans-serif">integer iaculis dapibus scelerisque. quisque diam ligula, pulvinar @ quam eget, volutpat adipiscing nulla. ut et massa tempor, pharetra diam ac, eleifend quam. in rhoncus rhoncus elit auctor. aliquam erat volutpat. quisque blandit nisl eget pretium sagittis. praesent euismod urna ut commodo mollis. phasellus lacinia orci @ posuere bibendum. curabitur imperdiet odio nunc, tempus consequat mauris fermentum a.<br/><br/>morbi ac tellus felis. in libero orci, eleifend dictum tempus consequat, pellentesque nec nisi. etiam vitae nisl tincidunt, dictum nisi in, condimentum nulla. morbi euismod vestibulum urna sit amet venenatis.</font></div></td><td style="padding:0;width:20px"rowspan="2"width="20"><img src="https://my.dotmailer.com/cmpimg/2011/44869/2876533_spacer.gif"style="display:block"height="10"width="20"></td></tr><tr><td style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"class="ee_dropzone"bgcolor="#ffffff"width="100%"></td></tr></tbody></table></td></tr></tbody></table>
in first nested table using combination of percentage , pixel widths , declaring in both html , css. use width="", not css width. don't need <tbody> tags.
this should started:
<!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html4/strict.dtd"> <html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><title></title> <style type="text/css"> /* client-specific styles */ #outlook {padding:0;} body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;} /* force default font sizes */ .externalclass {width:100%;} .externalclass, .externalclass p, .externalclass span, .externalclass font, .externalclass td, .externalclass div {line-height: 100%;} /* hotmail */ a[href^="tel"], a[href^="sms"] { text-decoration: default; color: #000001 !important; pointer-events: auto; cursor: default;} table td {border-collapse: collapse;} </style> </head> <body style="margin: 0px; padding: 0px; background-color: #ffffff;" bgcolor="#ffffff"><table bgcolor="#f9f9f9" width="100%" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td><table width="600" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td valign="top" style="padding-top:30px; padding-bottom:30px;"> <table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#cccccc"> <tr> <td width="30"> </td> <td width="540" height="60" valign="bottom"> nest top table here. </td> <td width="30"> </td> </tr> <tr> <td width="30"> </td> <td width="540" height="60" bgcolor="#000000" style="color: #ffffff;"> nest table in here if needed </td> <td width="30"> </td> </tr> <tr> <td width="30"> </td> <td width="540" bgcolor="#ffffff"> <img style="margin: 0; border: 0; padding: 0; display: block;" src="" width="540" height="400" alt="main graphic"> </td> <td width="30"> </td> </tr> <tr> <td width="30"> </td> <td width="540" bgcolor="#ffffff"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="30"> </td> <td width="480" style="font-family: helvetica, arial, sans-serif; font-size: 14px; color: #000000;"> <br> <font style="font-family: helvetica, arial, sans-serif; font-size: 14px; color: #3c8a2e;">header</font> <br><br> text @ bottom <br> </td> <td width="30"> </td> </tr> </table> </td> <td width="30"> </td> </tr> <tr> <td width="30"> </td> <td width="540" height="30"> </td> <td width="30"> </td> </tr> </table> </td></tr></table></td></tr></table></body></html>
Comments
Post a Comment