Email template that breaks in outlook

Question

I am new in this sector. I have the html code for an email template that looks good in the web browser and in gmail but it breaks down in outlook. How can I fix it? It looks good in all browsers and mailing platforms without outlook.

Where is the error? I cannot find it.

 <table class="deviceWidth" width="750" cellspacing="0" cellpadding="0" border="0" align="left"> <tbody> <tr> <td style="padding:0px 15px;" bgcolor="#FFFFFF"> <table class="deviceWidth" width="650" cellspacing="0" cellpadding="0" border="0" align="left"> <tbody> <tr> <td style=" padding:20px 0px 10px 20px;" border="0" valign="top" bgcolor="#FFFFFF" align="left"> <table class="deviceWidth" border="0" width="540" style="background-color:#000;" cellspacing="0" cellpadding="0" border="0" align="left"> <tbody> <tr> <td valign="middle" border="0" style="background-color:#000;" align="center"> <!--[if mso]> <table role="presentation" border="0" background="#606061" cellspacing="0" cellpadding="0" align="left" style="margin-top:0px;" width="540"> <tr> <td align="left" bgcolor="#000;" style="background-color:#000;" valign="middle" width="540"> <![endif]--> <table class="deviceWidth" border="0" bgcolor="#000;" style="background-color:#000;" width="55%" cellspacing="0" cellpadding="0" border="0" align="left"> <tbody> <tr> <td colspan="1" border="0" valign="middle" width="130" class="center2" align="left" style="font-family:'Montserrat', Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif;color:#000; padding:10px 5px 10px 30px; "> <a href="http://privateclientmortgagegroupmm.clixonit.com" valign="middle" style="text-decoration:none;color:#fff;font-size:14px; font-weight:bold;"> APPLY NOW </a> <!-- PUT YOUR LOGO --> </td> <td colspan="1" border="0" valign="middle" width="130" class="center2" align="center" style="font-family:'Montserrat', Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif;color:#000; padding:10px 5px 10px 5px; "> <a href="http://www.uberconference.com/privateclient" style="text-decoration:none;color:#A6A6A6;font-size:14px; font-weight:bold;"> GO TO MEETING </a> <!-- PUT YOUR LOGO --> </td> </tr> </tbody> </table> <table class="deviceWidth" border="0" bgcolor="#000;" style="background-color:#000;" width="36%" cellspacing="0" cellpadding="0" border="0" align="left"> <tbody> <tr> <td colspan="1" border="0" valign="middle" class="center2" align="center" style="font-family:'Montserrat', Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif;color:#000; padding:10px 5px 10px 20px; "> <a href="https://privateclient.acuityscheduling.com/" style="text-decoration:none;color:#A6A6A6;font-size:14px; font-weight:bold;"> SCHEDULE CALL </a> <!-- PUT YOUR LOGO --> </td> </tr> </tbody> </table> <!--[if mso]> </td> </tr> </table> <![endif]--> </td> </tr> </tbody> </table> <table class="deviceWidth" id="logo" border="0" width="100" style="margin-top:-65px;" cellspacing="0" cellpadding="0" border="0" align="right"> <tbody> <tr> <td class="center" border="0" valign="top" align="center"> <!--[if mso]> <table role="presentation" border="0" cellspacing="0" cellpadding="0" align="right" style="margin-top:0px;mar" width="100"> <tr> <td align="left" bgcolor="#FFF;" style="background-color:#fff;" valign="top" width="100"> <![endif]--> <a href="https://www.privateclient.com"> <img class="logo" src="https://s1.postimg.org/3gpcnyjmtr/logo2.png" alt="" height="96" width="100" /></a> <!-- PUT YOUR LOGO --> <!--[if mso]> </td> </tr> </table> <![endif]--> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> 

Answer 1

I don't use outlook, but by using this outlook validator , it says that outlook doesn't support margin-top. So the margin-top:-65px; that you have on the table that holds the image is the issue. Instead, you need to move the image into the same tr that the td that holds all the words are in. Add a td beside it and put the link and image inside that td. Mess around with the heights of the rows and only put the black background on the td's that directly surround each word.

Answer 2

The problem here is actually a handful of things. I am not trying to be rude, I genuinely want you to see what you are doing incorrectly here, knowing WHY this is breaking across clients and such.

First, you have repeating conditions in ALL of your tables border=0 . This causes the entire table to break on many clients.

Second, you should try with all of your might to NOT use padding CSS, especially when it comes to text. This is inconsistent across email clients.

Thirdly, you want to add some conditional rules to your header CSS that will help you deal with the dreaded Outlook 2007-2010. I have included those. You can copy/paste the entire style she if you like to use in other projects. It's my standard boiler plate of things I have come across over the years of developing emails.

Lastly, margin is NO ONE'S friend when it comes to emails. It's unpredictable and bad. Try to think like you are time-warping back to 2004 when you code emails, and use empty <td> cells to create space. This layout should look good across nearly every client and device. And if you have questions, drop me a line :)

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="format-detection" content="date=no"/> <meta name="format-detection" content="telephone=no"/> <!--[if !mso]><!-- --> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!--<![endif]--> <title>Untitled Document</title> <style type="text/css"> #outlook a{ padding:0; } .ReadMsgBody{ width:100%; } body{ width:100% !important; min-width:100%; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; -webkit-font-smoothing: antialiased; } v*{ behavior:url(#default#VML); display:inline-block; } .ExternalClass{ width:100%; } td{ border-collapse: collapse!important; } .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div{ line-height:100%; } a img{ border:none; } a { text-decoration:none !important; } img{ display:block; outline:none; text-decoration:none; border:none; -ms-interpolation-mode: bicubic; } table{ border-spacing:0; border-collapse: collapse !important; mso-table-lspace:0pt; mso-table-rspace:0pt; } table[class=full] { width: 100%; clear: both; } div { padding: 0; margin: 0; } p{ margin:0; padding:0; border:0; font-size:100%; line-height:1.4em; font-family: Helvetica, Arial, sans-serif; } h1{ margin:0; padding:0; border:0; font-size:100%; line-height:1.4em; font-family: Helvetica, Arial, sans-serif; } #wrappertable{ margin:0; padding:0; width:100% !important; line-height:100% !important; } br[class=show]{ display: none !important; max-height: 0px; font-size: 0px; overflow: hidden; mso-hide: all; } @media screen and (max-width:600px){ table{ width:100% !important; } table[class=content]{ width:95% !important; } td[class=hide]{ display: none !important; max-height: 0px !important; font-size: 0px !important; overflow: hidden !important; mso-hide: all !important; width: 0 !important; } td[class=fullwidth]{ width:100% !important; float:left !important; } /*replace image with mobile version*/ td#mobilepic img{ content:url("") !important; } /*repeat ID as necessary*/ img[class=fullwidth]{ width:100% !important; height:auto !important; } img[class=threequarters]{ float: none !important; width: 75% !important; height: auto !important; margin: auto !important; } img[class=twothirds]{ float: none !important; width: 66.6666% !important; height: auto !important; margin: auto !important; } img[class=halfwidth]{ float: none !important; width: 50% !important; height: auto !important; margin: auto !important; } img[class=halfwidthleft]{ float: none !important; width: 50% !important; height: auto !important; } img[class=onethird]{ width: 33.3333% !important; height: auto !important; margin: auto !important; padding-top: 5px !important; padding-bottom: 5px !important; } img[class=quarterwidth]{ width: 25% !important; height: auto !important; margin: auto !important; padding-top: 5px !important; padding-bottom: 5px !important; } img[class=hide]{ display: none !important; max-height: 0px !important; font-size: 0px !important; overflow: hidden !important; mso-hide: all !important; width: 0 !important; } p[class=smaller] { font-size: 36px !important; line-height: 42px !important; } div[class=fullwidth]{ max-width: 95% !important; } p,h1,h2[class=centered]{ text-align: center !important; } br[class=show]{ display: inline !important; } br[class=hide]{ display: none !important; max-height: 0px; font-size: 0px; overflow: hidden; mso-hide: all; } span[class=hide]{ display: none !important; max-height: 0px; font-size: 0px; overflow: hidden; mso-hide: all; } } </style> </head> </head> <body marginwidth="0" marginheight="0" topmargin="0" leftmargin="0" offset="0" bgcolor="#FFFFFF" style="padding: 0 !important; margin:0 !important;"> <table width="100%" style="border-collapse:collapse; table-layout:fixed;" border="0" cellspacing="0" cellpadding="0" id="wrappertable"> <tr> <td align="center"> <table cellpadding="0" cellspacing="0" border="0" width="620"> <tr> <td width="618" align="center"> <!--THIS IS THE CONTENT TABLE--> <table cellpadding="0" cellspacing="0" border="0" width="600" align="center"> <tr> <td bgcolor="#000000" style="background-color: #000000" align="center" height="50" valign="middle"> <table width="90%" cellspacing="0" cellpadding="0" border="0" class="content"> <tr> <td class="fullwidth" align="left" width="33%"> <a href="http://privateclientmortgagegroupmm.clixonit.com" valign="middle" style="text-decoration:none;color:#ffffff;font-size:14px; font-weight:bold; font-family:'Montserrat', Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif;">APPLY NOW</a> </td> <td class="fullwidth" align="center" width="34%"> <a href="http://www.uberconference.com/privateclient" valign="middle" style="text-decoration:none;color:#ffffff;font-size:14px; font-weight:bold; font-family:'Montserrat', Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif;">GO TO MEETING</a> </td> <td class="fullwidth" align="right" width="33%"> <a href="https://privateclient.acuityscheduling.com/" valign="middle" style="text-decoration:none;color:#ffffff;font-size:14px; font-weight:bold; font-family:'Montserrat', Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif;">SCHEDULE CALL</a> </td> </tr> </table> </td> </tr> <tr> <td height="15" style="line-height: 15px;"></td> </tr> <tr> <td> <a href="https://www.privateclient.com"> <img class="logo" src="https://s1.postimg.org/3gpcnyjmtr/logo2.png" alt="" height="96" width="100"/></a> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </body> </html>