email - Center HTML in OUTLOOK not working -
i have spent day reviewing fixes issue. html looks great on email clients except outlook, layout not center in preview. i've tried <center> tag , fixing .externalclass nothing works. can help?
<!doctype html> <html> <head> <meta charset="utf-8"> <meta content="text/html; charset=utf-8" http-equiv="content-type"> <meta content="telephone=no" name="format-detection"> <meta content="width=mobile-width; initial-scale=1.0; maximum-scale=1.0; user- scalable=no" name="viewport"> <meta content="ie=9; ie=8; ie=7; ie=edge" http-equiv="x-ua-compatible"> <link href="https://fonts.googleapis.com/css?family=lato:400,700" rel="stylesheet" type="text/css"> <title>iaed ace website</title> <style href="">a {text-decoration: none} </style> <style type="text/css"> .mobile { max-width:700px !important; } /**this overwrite outlook.com’s embedded css************/ table { border-collapse:separate; } a, a:link, a:visited { text-decoration: none; color: #2a8acc; } a:hover { text-decoration: underline; } h2,h2 a,h2 a:visited,h3,h3 a,h3 a:visited,h4,h5,h6,.t_cht { color:#000 !important; } .externalclass p, .externalclass span, .externalclass font, .externalclass td { line-height: 100%; } /**this center email in outlook.com************/ .externalclass { width: 100%; } @media screen , (max-width: 480px) { .mobile {width: 95% !important; font-size:1.1em; border-collapse: collapse; display:block; margin:0 auto; padding-bottom:15px;} .hide {display:none;} .btn_bg { width:50%; margin: 0 auto !important; font-size:1.0em; } } @media screen , (max-width: 320px) { .mobile {width: 95% !important; font-size:1.1em; border-collapse: collapse; display:block; margin:0 auto; padding-bottom:15px;} .hide {display:none;} .btn_bg { width:50%; margin: 0 auto !important; font-size:1.0em;} } @media screen , (max-width: 667px) { .mobile {width: 95% !important; font-size:1.1em; border-collaps: collapse; display:block; margin:0 auto; padding-bottom:15px;} .hide {display:none;} .btn_bg { width:50%; margin: 0 auto !important; font-size:1.0em;} } @media screen , (max-width: 730px) { .mobile {width: 95% !important; font-size:1.1em; border-collapse: collapse; display:block; margin:0 auto; padding-bottom:15px;} .hide {display:none;} .btn_bg { width:50%; margin: 0 auto !important; font-size:1.0em; } } </style> </head> <body bgcolor="#efefef" style="margin: 0; padding: 0;"> <!-- space--> <table bgcolor="#efefef" border="0" cellpadding="0" cellspacing="0" style= "height:15px; background-color:#efefef; width:100%;" width="100%"> <tr> <td> </td> </tr> </table> <!--end of space--> <!-- hidden preheader --> <div style= "display: none; font-size: 1px; color:#333333; line-height: 1px; font-family: 'lato', sans-serif; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; mso-hide: all;"> iaed ace website </div> <!--begin outter containter--> <table bgcolor="#efefef" border="0" cellpadding="0" cellspacing="0" style= "background-color:#efefef;" width="100%"> <tr> <td> <!--begin nav--> <table align="center" bgcolor="#ffffff" border="0" cellpadding= "0" cellspacing="0" style= "background-color:#ffffff; width:700; margin:0 auto; border:thin solid #e8e8e8; color:#2a8acc;" width="700"> <tr> <td colspan="5" style="line-height:15px; height:15px;"> </td> </tr> <tr> <td width="2%"> </td> <td width="35%"> <a href="http://www.emergencydispatch.org/" style= "color:#2a8acc; text-decoration:underline;" target= "_blank"><img src= "https://www.emergencydispatch.org/vrc/iaed/2016/email/images/iaed-logo-200w.png"></a> </td> <td align="left" valign="bottom" width="23%"> <span style= "font-family: 'lato', sans-serif; color:#2a8acc; text-align:left; font-size:18px;"> <a href="http://www.emergencydispatch.org/" style= "color:#2a8acc; text-decoration:underline;" target= "_blank">about iaed</a></span> </td> <td valign="bottom" width="20%"><span style= "font-family: 'lato', sans-serif; color:#2a8acc; text-align:left; font-size:18px;"> <a href="https://accreditation.emergencydispatch.org/" style="color:#2a8acc; text-decoration:underline;" target="_blank">why ace</a></span> </td> <td valign="bottom" width="30%"> <!-- social media --> <table> <tr> <td width="30px"> <a href= "https://www.facebook.com/internationalacademiesofemergencydispatch" style= "border:none; text-decoration:none;" target="_blank"><img src= "https://www.emergencydispatch.org/vrc/iaed/2016/email/images/facebook-logo-round.png"></a> </td> <td width="30px"> <a href="https://twitter.com/theiaed" style= "border:none; text-decoration:none;" target="_blank"><img src= "https://www.emergencydispatch.org/vrc/iaed/2016/email/images/twitter-round-color.png"></a> </td> <td width="30px"> <a href= "https://www.linkedin.com/company/international-academies-of-emergency-dispatch" style= "border:none; text-decoration:none;" target="_blank"><img src= "https://www.emergencydispatch.org/vrc/iaed/2016/email/images/linkedin-round.png"></a> </td> </tr> </table> </td> </tr> <tr> <td colspan="5" style="line-height:15px; height:15px;"> </td> </tr> </table> <!--end nav--> <!--begin banner --> <table align="center" border="0" cellpadding="0" cellspacing= "0" style="background-color:#ffffff; width:700; margin:0 auto;" width="700px"> <tr> <td> <a href= "https://accreditation.emergencydispatch.org/" style="border:none;" target="_blank"><img class= "mobile" src= "https://www.emergencydispatch.org/vrc/iaed/2016/email/images/banner-iaed.png"></a> </td> </tr> </table> <!--end banner --> <!-- begin content --> <table bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" style= "background-color:#ffffff; width:700; margin:0 auto; border-bottom:thin solid #e8e8e8;" width="700px"> <tr> <td colspan="2" style="line-height:15px; height:15px;"> </td> </tr> <tr> <td align="center" colspan="3"><span style= "font-family: 'lato', sans-serif; color:#2e2e2e; text-align:left; font-size:24px; font-weight:800;"> features</span> </td> </tr> <tr> <td colspan="3" style= "line-height:15px; height:15px; border-bottom:thin solid #e8e8e8;"> </td> </tr> <tr> <td colspan="3" style="line-height:15px; height:15px;"> </td> </tr> <tr> <td align="center" width="25%"><img src= "https://www.emergencydispatch.org/vrc/iaed/2016/email/images/user-friendly.png"> </td> <td width="70%"> <span style= "font-family: 'lato', sans-serif; color:#2e2e2e; text-align:left; font-size:18px; font-weight:500;"> user-friendly</span> <ul style= "font-family: 'lato', sans-serif; color:#2e2e2e; text-align:left; font-size:14px;"> <li>simple-to-use instructions providing information , uploading documents complete 20 points requirements</li> <li>demo videos guide through various facets of application process</li> </ul> </td> <td width="3%"> </td> </tr> <tr> <td colspan="3" style="line-height:15px; height:15px;"> </td> </tr> <tr> <td align="center" width="25%"><img src= "https://www.emergencydispatch.org/vrc/iaed/2016/email/images/cloud-icon.png"> </td> <td width="70%"> <span style= "font-family: 'lato', sans-serif; color:#2e2e2e; text-align:left; font-size:18px; font-weight:500;"> upload everything—no more binders!</span> <ul style= "font-family: 'lato', sans-serif; color:#2e2e2e; text-align:left; font-size:14px;"> <li>our easy , convenient upload process means can electronically upload required application documents iaed’s secure servers 24/7</li> <li>no more shipping heavy binders</li> </ul> </td> <td width="3%"> </td> </tr> <tr> <td colspan="3" style="line-height:15px; height:15px;"> </td> </tr> <tr> <td align="center" width="25%"><img src= "https://www.emergencydispatch.org/vrc/iaed/2016/email/images/progress-icon.png"> </td> <td width="70%"> <span style= "font-family: 'lato', sans-serif; color:#2e2e2e; text-align:left; font-size:18px; font-weight:500;"> progress bars</span> <ul style= "font-family: 'lato', sans-serif; color:#2e2e2e; text-align:left; font-size:14px;"> <li>you can track ace application progress each of 20 points achieving overall progress , deadlines toward ace</li> <li>uploading documents made easy progress bar lets know when upload complete</li> </ul> </td> <td width="3%"> </td> </tr> <tr> <td colspan="3" style="line-height:15px; height:15px;"> </td> </tr> <tr> <td align="center" width="25%"><img src= "https://www.emergencydispatch.org/vrc/iaed/2016/email/images/sync-icon.png"> </td> <td width="70%"> <span style= "font-family: 'lato', sans-serif; color:#2e2e2e; text-align:left; font-size:18px; font-weight:500;"> sync information</span> <ul style= "font-family: 'lato', sans-serif; color:#2e2e2e; text-align:left; font-size:14px;"> <li>the online ace application system automatically synchronizes 20 points application tasks completed during communication center’s implementation process</li> </ul> </td> <td width="3%"> </td> </tr> <tr> <td colspan="3" style="line-height:15px; height:15px;"> </td> </tr> <tr> <td align="center" width="25%"><img src= "https://www.emergencydispatch.org/vrc/iaed/2016/email/images/credit-icon.png"> </td> <td width="70%"> <span style= "font-family: 'lato', sans-serif; color:#2e2e2e; text-align:left; font-size:18px; font-weight:500;"> re-accreditation ready</span> <ul style= "font-family: 'lato', sans-serif; color:#2e2e2e; text-align:left; font-size:14px;"> <li>you can refer online documents submitted agency ace or re-ace requirements</li> <li>re-accreditation snap online ace application process</li> </ul> </td> </tr> <tr> <td colspan="3" style="line-height:15px; height:15px;"> </td> </tr> </table> </td> </tr> </table> <!-- end of outter containter --> </body></html>
have tried using adding align="center" "outer container" <table /> , header <div />?
Comments
Post a Comment