Email Campaign Problems and Testing Outlook 2007 -2010 -
i trying make email campaign display correctly in email clients. have tried many fixes , ways email display write. got work reasonably on email clients , have tested on emails on acid , campaign monitor don't tell wrong code show me picture not helpful.
i believe 1 of main issues email expands full width in outlook 2007 , reason , cant use max-width attribute need help.
i wondered if out , see in code noticeably wrong , needs fixed.
<!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html4/strict.dtd"> <html> <head> <meta content="text/html; charset=utf-8" http-equiv="content-type" /> <title>go city - email</title> <style type="text/css"> .readmsgbody {width: 100%;} .externalclass {width: 100%;} table {border-collapse: collapse;} a:hover {text-decoration: none !important;} {color: #fff !important;text-decoration: none !important;} p {font-size: 14px;line-height: 24px;font-family: arial, 'veranda', san-serif !important;color: #333333 !important;margin: 0px;} span.yshortcuts {color: #000;background-color: none;border: none;} span.yshortcuts:hover, span.yshortcuts:active, span.yshortcuts:focus {color: #000;background-color: none;border: none;} img {border: none !important;display:block;} .book {background: white;} .body {max-width: 300px;} </style> </head> <body marginheight="0" topmargin="0" marginwidth="0" style="background-repeat:no-repeat;position:static;height:100%;width:100%;background-image:url('background-new.jpg');background-color:#000000;margin-top:0px;max-width: 630px !important;margin: auto;" bgcolor="#000000" leftmargin="0"> <!-- outlook bacground image --> <div style="background-color:#000000; max-width:630px !important;"> <!--[if gte mso 9]> <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t"> <v:fill type="tile" src="url('background-new.jpg')" color="#000000"/> </v:background> <![endif]--> <table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0"> <tr> <td valign="top" align="left" background="#fff"><!-- outlook bacground image end --> <!--100% body table--> <table cellspacing="0" align="center" border="0" cellpadding="15" width="600" bgcolor="#000000" style="margin:auto;" > <tr> <td align="center"><!--top links--> <table width="100%" border="0" cellspacing="0" cellpadding="0" style="margin-bottom:20px;"> <tr height="100"> <td valign="middle" align="left" width="40%"><a href="https://gocityhotels.com/" style="text-decoration:none !important;color:#fff !important;" ><img src="go-city-hotels-logo.jpg" style="display:block;" vspace="0" hspace="0" alt="go city hotels logo" /></a></td> <td valign="middle" align="right" width="60%" style="text-align:center;"><p style="margin:0px;color:#ffffff !important;font-family:arial, 'veranda', san-serif;line-height:24px;font-size:14px;" > better viewing results <webversion style="text-decoration:none;color:#10aeea !important;">please view online</webversion><br /> <forwardtoafriend style="text-decoration:none;color:#ffffff;" href="#">forward</forwardtoafriend> | <unsubscribe style="text-decoration:none;color:#ffffff;" href="#">unsubscribe</unsubscribe> </p></td> </tr> </table> <!--email container--> <table bgcolor="#000000" cellspacing="0" border="0" align="center" cellpadding="30" width="600"> <tr> <td style="padding:0px;"><!--email content--> <table cellspacing="0" border="0" id="email-content" cellpadding="0" width="100%"> <tr> <td><repeater> <!--section 1--> <layout label="full width image"> <table cellspacing="0" border="0" cellpadding="0" width="100%"> <tr> <td valign="top" align="center"><img editable src="" style="margin-top:10px !important;margin-bottom:10px !important;" vspace="0" hspace="0" alt="image 3" width="100%" label="full width image" /></td> </tr> </table> </layout> <!--/section 1--> <!--section 2--> <layout label="colour title"> <table cellspacing="0" border="0" cellpadding="0" width="100%"> <tr> <td valign="top" align="center"><h1 style="font-weight:bold;mso-line-height-rule:exactly;line-height:40px;margin-bottom:10px;margin-top:0px;font-family:arial, 'veranda', san-serif;color:#ffffff;font-size:25px;background-color:#10aeea;"> <singleline label="title">lorem ipsum</singleline> </h1></td> </tr> </table> </layout> <!--/section 2--><!--section 3--> <layout label="body text"> <table cellspacing="0" border="0" cellpadding="0" width="100%"> <tr> <td valign="top" align="center"><p style="margin:0px;color:#ffffff !important;font-family:arial, 'veranda', san-serif !important;mso-line-height-rule:exactly;line-height:22px;font-size:16px;" > <multiline label="main body text">consectetur adipiscing elit. ipsum risus volutpat placerat in nec mauris. fusce sit amet enim erat, in sagittis arcu. semper id tempor et, varius pulvinar tellus. maurtis commodo urna @ dui bibendum quis euismod velit egestas. vestibulum ante ipsum primis in faucibus orci luctus et.</multiline> </p></td> </tr> </table> </layout> <!--/section 3--> <!--section 2--><layout label="3 hotel booking"> <table cellspacing="0" border="0" cellpadding="0" width="100%"> <tr> <td> <table cellspacing="0" border="0" cellpadding="8" width="100%" style="margin-top: 10px;"> <tr> <td bgcolor="#ffffff" valign="top" style="border-radius: 5px;width: 30%;max-width: 30%;"><p style="margin:0px;font-size:14px;text-align:center;" ><img editable src="" style="margin-top:10px !important;margin-bottom:10px !important;" vspace="0" hspace="0" alt="image 3" width="100%" label="image left" /></p> <p style="color:#333333 !important; font-family:arial, 'veranda', san-serif; text-align:left;" > <multiline style="color:#333333 !important;" label="main body text">consectetur adipiscing elit. phasellus ipsum risus volutpat placerat in nec mauris. fusce sit</multiline></p> <p style="margin:0px;line-height:24px;font-size:14px;font-family:arial, 'veranda', san-serif;margin-top:20px;padding:5px;text-align:center;border-radius:5px;border:1px solid #0d8cbc;background-color:#10aeea;color:#ffffff !important;text-decoration:none !important;" > <singleline style="color:#ffffff !important;" label="book now" >book now</singleline> </p> </td> <!-- table padding --><td valign="top" background="#000000"></td><!-- table padding end --> <td bgcolor="#ffffff" valign="top" style="border-radius: 5px;width: 30%;max-width: 30%;"><p style="margin:0px;font-size:14px;text-align:center;" ><img editable src="" style="margin-top:10px !important;margin-bottom:10px !important;" vspace="0" hspace="0" alt="image 3" width="100%" label="image left" /></p> <p style="color:#333333 !important; font-family:arial, 'veranda', san-serif; text-align:left;" > <multiline style="color:#333333 !important;" label="main body text">consectetur adipiscing elit. phasellus ipsum risus volutpat placerat in nec mauris. fusce sit</multiline></p> <p style="margin:0px;line-height:24px;font-size:14px;font-family:arial, 'veranda', san-serif;margin-top:20px;padding:5px;text-align:center;border-radius:5px;border:1px solid #0d8cbc;background-color:#10aeea;color:#ffffff !important;text-decoration:none !important;" > <singleline style="color:#ffffff !important;" label="book now" >book now</singleline> </p> </td> <!-- table padding --><td valign="top" background="#000000"></td><!-- table padding end --> <td bgcolor="#ffffff" valign="top" style="border-radius: 5px;width: 30%;max-width: 30%;"><p style="margin:0px;font-size:14px;text-align:center;" ><img editable src="" style="margin-top:10px !important;margin-bottom:10px !important;" vspace="0" hspace="0" alt="image 3" width="100%" label="image left" /></p> <p style="color:#333333 !important; font-family:arial, 'veranda', san-serif; text-align:left;" > <multiline style="color:#333333 !important;" label="main body text">consectetur adipiscing elit. phasellus ipsum risus volutpat placerat in nec mauris. fusce sit</multiline></p> <p style="margin:0px;line-height:24px;font-size:14px;font-family:arial, 'veranda', san-serif;margin-top:20px;padding:5px;text-align:center;border-radius:5px;border:1px solid #0d8cbc;background-color:#10aeea;color:#ffffff !important;text-decoration:none !important;" > <singleline style="color:#ffffff !important;" label="book now" >book now</singleline> </p> </td> </tr> </table> </td> </tr> </table></layout><!--/section 2--> <!--section 1--> <layout label="plain title"> <table cellspacing="0" border="0" cellpadding="0" width="100%"> <tr> <td valign="top" align="left"><h1 style="font-weight:bold;mso-line-height-rule:exactly;line-height:2;margin-bottom:10px;margin-top:0px;font-family:arial, 'veranda', san-serif;color:#ffffff;font-size:25px;"> <singleline label="title">lorem ipsum</singleline> </h1></td> </tr> </table> </layout> <!--/section 1--><!--section 5--> <layout label="image right"> <table cellspacing="0" border="0" cellpadding="0" width="100%" style="margin:10px 0px;"> <tr> <td><table cellspacing="0" border="0" cellpadding="0" width="100%"> <tr> <td valign="top" width="50%"><p style="text-align:right;margin:0px;color:#ffffff !important;mso-line-height-rule:exactly;line-height:22px;font-size:16px;font-family:arial, 'veranda', san-serif;" > <multiline label="main body text">consectetur adipiscing elit. phasellus ipsum risus volutpat placerat in nec mauris. fusce sit amet enim erat, in sagittis arcu. aliquam dolor dolor, semper id tempor et, varius pulvinar tellus. maurtis commodo urna @ dui bibendum quis euismod velit egestas. vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere</multiline> </p></td> <td valign="top" width="50%" style="padding-left:10px;"><img editable src="" vspace="0" hspace="0" style="display:block;" alt="image 4" width="100%" label="image right" /></td> </tr> </table></td> </tr> </table> </layout> <!--/section 5--><!--section 3--> <layout label="image left"> <table cellspacing="0" border="0" cellpadding="0" width="100%" style="margin:10px 0px;"> <tr> <td><table cellspacing="0" border="0" cellpadding="0" width="100%"> <tr> <td valign="top" width="50%" style="padding-right:10px;"><img editable src="" vspace="0" hspace="0" style="display:block;" alt="image 5" width="100%" label="image left" /></td> <td valign="top" width="50%"><p style="text-align:left;margin:0px;color:#ffffff !important;mso-line-height-rule:exactly;line-height:22px;font-size:16px;font-family:arial, 'veranda', san-serif;" > <multiline label="main body text">consectetur adipiscing elit. phasellus ipsum risus volutpat placerat in nec mauris. fusce sit amet enim erat, in sagittis arcu. aliquam dolor dolor, semper id tempor et, varius pulvinar tellus. maurtis commodo urna @ dui bibendum quis euismod velit egestas. vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere</multiline> </p></td> </tr> </table></td> </tr> </table> </layout> <!--/section 3--></repeater></td> </tr> </table> <!--/email content--></td> </tr> </table> <!--/email container--><!--footer--> <table width="600" border="0" align="center" cellpadding="30" cellspacing="0"> <tr> <tr style="margin-top:20px;"> <hr style="margin-top:30px;border:1px solid #353535 !important;" /> </tr> <td valign="top"><p style="margin:0px;color:#353535 !important;font-family:arial, 'veranda', san-serif;line-height:24px;font-size:14px;" > you’re receiving newsletter because you’ve subscribed our newsletter<br /> not interested anymore?<br /> <unsubscribe style="text-decoration:none;color:#10aeea !important;" href="#" >unsubscribe instantly.</unsubscribe> </p></td> <td valign="top" ><a style="text-decoration:none !important;color:#fff !important;margin:5px;position:relative;float:right;display:block;height:43px;width:42px;" href="https://www.facebook.com/pages/gocityhotelscom/343073452495484"> <img style="display:block;" alt="facebook image" vspace="0" hspace="0" src="facebook-mini-icon.jpg" /></a> <a style="text-decoration:none !important;color:#fff !important;margin:5px;position:relative;float:right;display:block;height:42px;width:42px;" href="https://twitter.com/gocityhotels"> <img style="display:block;" vspace="0" hspace="0" alt="twitter image" src="twitter-mini-icon.jpg" /></a></td> </tr> </table> <!--/footer--></td> </tr> </table> <!--/100% body table--></td> </tr> </table> </div> <style type="text/css"> .readmsgbody {width: 100%;} .externalclass {width: 100%;} a:hover {text-decoration: none !important;} { color:#fff !important; text-decoration: none !important;} p {font-size: 14px; line-height: 24px; font-family: arial, 'veranda', san-serif !important; color: #ffffff !important; margin: 0px;} span.yshortcuts { color:#000; background-color:none; border:none;} span.yshortcuts:hover, span.yshortcuts:active, span.yshortcuts:focus {color:#000; background-color:none; border:none;} </style> </body> </html> also can recommend service let inspect code or root problem rather making random fixes.
outlook 2007 same '10 , '13, i'm betting having same issues in three.
take @ this link - there few examples of fluid templates max width applied , working in major email clients.
just rip out body , wrapper tables , should go.
Comments
Post a Comment