ios - iPad email template issue -
so, have html email:
<!doctype html><html> <head> <!-- meta --> <meta charset="utf-8"> </head> <table style=" width: 100%; box-shadow: 0px 0px 5px 0px #a5a5a5;"> <tr class="header"> <td class="logo" style="padding-top: 10px; padding-left: 20px;"> <img src="header_logo.png" alt="logoimage"/> </td> </tr> </table> <table style="width: 100%; box-sizing: border-box; box-shadow: 0px 1px 5px 0px #a5a5a5;"> <tr style="width: 100%; display: block;"> <td style=""><h2>congratulations on new website!</h2></td> <td class="content" style="margin-top:20px; display: block; clear:both; min-width: 100%;"> general description here.. write whatever want. </td> </tr> <tr style="width: 100%; display: block;"> <td style="text-transform: uppercase; border-bottom: 1px dotted #cfe1ef; height: 40px; margin-bottom: 10px; width: 100%; display: block;"><h2>account information</h2></td> <td class="content" style="margin-top:20px; width:100%; display: block;"> <h3 style="margin: 0">first name:<span style="font-weight: normal; margin-left: 10px;">!!customer_first_name!!</span></h3> <h3 style="margin: 0">last name:<span style="font-weight: normal; margin-left: 10px;">!!customer_last_name!!</span></h3> <h3 style="margin: 0">email:<span style="font-weight: normal; margin-left: 10px;">!!customer_email!!</span></h3> <h3 style="margin: 0">phone:<span style="font-weight: normal; margin-left: 10px;">!!phone!!</span></h3> </td> <td style="text-transform: uppercase; border-bottom: 1px dotted #cfe1ef; height: 40px; width: 100%"><h2>property information</h2></td> <td class="content" style="margin-top:20px; width: 100%; display: block;"> <h3 style="margin: 0">listing site:<span style="font-weight: normal; margin-left: 10px;">!!property_is_listed!!</span></h3> <h3 style="margin: 0">listing number:<span style="font-weight: normal; margin-left: 10px;">!!property_id!!</span></h3> <h3 style="margin: 0">property name:<span style="font-weight: normal; margin-left: 10px;">!!property_name!!</span></h3> <h3 style="margin: 0">address:<span style="font-weight: normal; margin-left: 10px;">!!property_street_address!!</span></h3> <h3 style="margin: 0">city:<span style="font-weight: normal; margin-left: 10px;">!!property_city!!</span></h3> <h3 style="margin: 0">state:<span style="font-weight: normal; margin-left: 10px;">!!property_state!!</span></h3> <h3 style="margin: 0">country:<span style="font-weight: normal; margin-left: 10px;">!!property_state!!</span></h3> </td> </tr> <tr style="margin-top: 10px; padding-bottom:5px; width: 100%; display: block;"> <td style="text-transform: uppercase; border-bottom: 1px dotted #cfe1ef; height: 40px; margin-bottom: 10px; display: block;"><h2>your site</h2></td> <td class="content" style="margin-top:20px; display: block;"> <h3 style="margin: 0">site url:<span style="font-weight: normal; margin-left: 10px;">!!site_url!!</span></h3> <h3 style="margin: 0">design name:<span style="font-weight: normal; margin-left: 10px;">!!design_name!!</span></h3> <img style="width:100%; margin-top: 20px;" src="http://vsbtest.com/latestwizard/images/designs/design3.jpg" alt="site template preview"/> </td> </tr> </table> <table style="width: 100%; height: 55px; background: #fff; z-index:5; box-shadow: 0px 1px 5px 0px #a5a5a5;"> <tr class="copyright"> <td style="padding-top: 10px; padding-left: 20px; display: block; clear:both;">© 2013</td> </tr> </table></html>
and displays want (full width table cells) on major email clients - gmail, thunderbird, gmail app android, when using email app ipad not work ok..it not "take" 100% width , puts table cells in row. know solve adding every cell in separate row don't want unless there no other solution.
do have ideea why happening? can't figure why. should this: http://jsfiddle.net/6yqml/1/
header tags not consistently supported in html-email. instead of using <h3>
, try styling them in table cell or font tag , use double <br>
separate them.
Comments
Post a Comment