html - Why is my nested table rendering outside the table in DOM? -
i creating email, , have main table , nested tables inside of it. 1 of tables displaying outside table on dom , cannot figure out why.
<!doctype html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta http-equiv="x-ua-compatible" content="ie=edge" /> <title> *|subject|*</title> <style> .bodycontent{ color:#505050; font-family:helvetica; font-size:16px; line-height:150%; padding-top:20px; padding-right:20px; padding-bottom:20px; padding-left:20px; text-align:left; } .bodycontent a:link, .bodycontent a:visited, /* yahoo! mail override */ .bodycontent .yshortcuts /* yahoo! mail override */{ color:#45b5dd; font-weight:normal; text-decoration:underline; } .bodycontent img{ display:inline; height:auto; max-width:560px; } .header { max-height: 125px; } .mso-width{ width: 100%; } a[href^=tel]{ color:#ffffff; text-decoration:none; } @media screen , (max-width: 480px){ .ds-logo{ display: block; float: none; margin: 0 auto; } .header { padding: 10px 0; } .width-container { width: 100% !important; } .phone-number{ width: 120px; margin: 0 auto; } } </style> </head> <body style="-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0; background-color:#f4f4f4; height:100% !important; width:100% !important; "> <!-- wrapper --> <!--[if mso]> <style> .width-container { display: inline; width: 600px !important; } </style> <![endif]--> <table style="text-size-adjust: 100%; margin: 0px; background-color: #ffffff; border-collapse: collapse !important; max-width: 600px; margin: 0 auto;" border="0" cellspacing="0" cellpadding="0" align="center"> <tr> <td> <table style="text-size-adjust: 100%; margin: 0px; background-color: #f4f4f4; border-collapse: collapse !important; height: 100% !important; max-width: 600px; margin: 0 auto;" border="0" cellspacing="0" cellpadding="0" align="center"> <!-- header --> <td class="header mso-width" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; margin: 0; border-top: 0px solid #bbbbbb; max-width: 600px; width: 100% !important;" align="center" bgcolor="#000000" valign="top"> <table class="width-container" align="left" border="0" cellspacing="0" cellpadding="0" style="padding-left: 20px; padding-top: 10px; padding-bottom: 10px; width: 300px;"> <tr> <td style="background-color: #000000; width: 100%"> <img class="ds-logo" src="http://example.com/emails/ds_white_medium.png" /> </td> </tr> </table> <table class="width-container" align="left" bgcolor="#000000" border="0" cellspacing="0" cellpadding="0" style="width: 300px;"> <tr> <td style="background-color: #000000; color: #ffffff!important; font-family: helvetica; font-size: 18px; height: 100%; line-height: 125%; text-align: right; letter-spacing: .0em; padding-right: 20px; padding-top: 20px; text-decoration: none" width="100%"> <div class="phone-number"> 866.111.1111 </div> </td> </tr> </table> </td> <!-- end header --> </table> <!-- hero image --> <table style="text-size-adjust: 100%; margin: 0px; background-color: #f4f4f4; border-collapse: collapse !important; height: 100% !important; max-width: 600px; margin: 0 auto;" border="0" cellspacing="0" cellpadding="0" align="center"> <tr> <td style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; margin: 0; border-top: 0px solid #bbbbbb; height: 100% !important; width: 100% !important;" align="center" valign="top"> <img alt="" src="http://example.com/emails/independent/11082016/hero.jpg" style="max-width: 600px" width="100%"/> </td> </tr> </table> <!-- end hero --> <!-- content --> <table class="width-container" style="text-size-adjust: 100%; margin: 0px; background-color: #ffffff; border-collapse: collapse !important; height: 100% !important; max-width: 600px; margin: 0 auto;" border="0" cellspacing="0" cellpadding="0" align="center"> <tr> <td class="bodycontent" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: helvetica; font-size: 16px; line-height: 150%; padding-top: 40px; padding-right: 30px; padding-bottom: 40px; padding-left: 30px; text-align: left;" valign="top">{{lead.first name:default=friend}}, lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td> </tr> </table> <!-- end content --> <!-- icon points --> <table class="width-container" style="text-size-adjust: 100%; margin: 0px; background-color: #ffffff; border-collapse: collapse !important; height: 100% !important; max-width: 600px; margin: 0 auto;" border="0" cellspacing="0" cellpadding="0" align="center"> <tr> <table align="left" class="width-container" style="text-size-adjust: 100%; margin: 0px; background-color: #ffffff; border-collapse: collapse !important; height: 100% !important; max-width: 600px; margin: 0 auto;" border="0" cellspacing="0" cellpadding="0" width="300"> <tr> <td style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: helvetica; font-size: 16px; line-height: 150%; padding-top: 20px; padding-right: 30px; padding-bottom: 20px; padding-left: 30px; text-align: center;" valign="top"> <img src="http://example.com/emails/independent/11082016/icon-1.png" alt="" /><br /> </td> </tr> <tr> <td style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: helvetica; font-size: 14px; line-height: 150%; padding-top: 20px; padding-right: 30px; padding-bottom: 20px; padding-left: 30px; text-align: center;" valign="top"> mobile optimization , web-based platform enables cross-browser, cross-platform functionality </td> </tr> </table> <table align="left" class="width-container" style="text-size-adjust: 100%; margin: 0px; background-color: #ffffff; border-collapse: collapse !important; height: 100% !important; max-width: 600px; margin: 0 auto;" border="0" cellspacing="0" cellpadding="0" width="300"> <tr> <td style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: helvetica; font-size: 14px; line-height: 150%; padding-top: 20px; padding-right: 30px; padding-bottom: 20px; padding-left: 30px; text-align: center;" valign="top"> <img src="http://example.com/emails/independent/11082016/icon-2.png" alt="" /> </td> </tr> <tr> <td style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: helvetica; font-size: 14px; line-height: 150%; padding-top: 20px; padding-right: 30px; padding-bottom: 20px; padding-left: 30px; text-align: center;" valign="top"> custom queues provide structured, user-tailored workflow processes </td> </tr> </table> </tr> </table> <table class="width-container" style="text-size-adjust: 100%; margin: 0px; background-color: #ffffff; border-collapse: collapse !important; height: 100% !important; max-width: 600px; margin: 0 auto;" border="0" cellspacing="0" cellpadding="0" align="center"> <tr> <table align="left" class="width-container" style="text-size-adjust: 100%; margin: 0px; background-color: #ffffff; border-collapse: collapse !important; height: 100% !important; max-width: 600px; margin: 0 auto;" border="0" cellspacing="0" cellpadding="0" width="300"> <tr> <td style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: helvetica; font-size: 16px; line-height: 150%; padding-top: 20px; padding-right: 30px; padding-bottom: 20px; padding-left: 30px; text-align: center;" valign="top"> <img src="http://example.com/emails/independent/11082016/icon-1.png" alt="" /><br /> </td> </tr> <tr> <td style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: helvetica; font-size: 14px; line-height: 150%; padding-top: 20px; padding-right: 30px; padding-bottom: 20px; padding-left: 30px; text-align: center;" valign="top"> mobile optimization , web-based platform enables cross-browser, cross-platform functionality </td> </tr> </table> <table align="left" class="width-container" style="text-size-adjust: 100%; margin: 0px; background-color: #ffffff; border-collapse: collapse !important; height: 100% !important; max-width: 600px; margin: 0 auto;" border="0" cellspacing="0" cellpadding="0" width="300"> <tr> <td style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: helvetica; font-size: 14px; line-height: 150%; padding-top: 20px; padding-right: 30px; padding-bottom: 20px; padding-left: 30px; text-align: center;" valign="top"> <img src="http://example.com/emails/independent/11082016/icon-2.png" alt="" /> </td> </tr> <tr> <td style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: helvetica; font-size: 14px; line-height: 150%; padding-top: 20px; padding-right: 30px; padding-bottom: 20px; padding-left: 30px; text-align: center;" valign="top"> custom queues provide structured, user-tailored workflow processes </td> </tr> </table> </tr> </table> <!-- end icon points --> </td> </tr> </table> <!-- end wrapper --> </body> </html> here jsfiddle
you have missed td tag around offending tables.
line 122 , 147 (the 'icon points' module) need <td> , </td>.
you have <tr> tag missing in header module
Comments
Post a Comment