We've been using mailchimp for creating simple email templates then exporting the code and using it in other clients to send those ones out. The problem im having are these random lines under certain tables and between others. I've tried adding a blank <td> with black background colour and specific width and heights but that doesn't seem to get rid of the white lines. Here is what the part at the bottom looks like in office 2016:
Ignore the yellow highlight text
This is what it looks like on other email clients and browsers:
Apologies for the poor quality but as you can see there are white lines under the text tables and between the text and buttons. Here is my code:
<!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><!--[if gte mso 15]> <xml> <o:OfficeDocumentSettings> <o:AllowPNG/> <o:PixelsPerInch>96</o:PixelsPerInch> </o:OfficeDocumentSettings> </xml><![endif]--><!--[if gt mso 15]> <style type="text/css" media="all"> /* Outlook 2016 Height Fix */ table, tr, td{border-collapse: collapse;}tr{font-size:0px; line-height:0px; border-collapse: collapse;}</style><![endif]--> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>An Athena for Every Situation</title> <style type="text/css"> p{margin:10px 0; padding:0;}table{border-collapse:collapse;}h1,h2,h3,h4,h5,h6{display:block; margin:0; padding:0;}img,a img{border:0; height:auto; outline:none; text-decoration:none;}body,#bodyTable,#bodyCell{height:100%; margin:0; padding:0; width:100%;}.mcnPreviewText{display:none !important;}#outlook a{padding:0;}img{-ms-interpolation-mode:bicubic;}table{mso-table-lspace:0; mso-table-rspace:0;}.ReadMsgBody{width:100%;}.ExternalClass{width:100%;}p,a,li,td,blockquote{mso-line-height-rule:exactly;}a[href^=tel],a[href^=sms]{color:inherit; cursor:default; text-decoration:none;}p,a,li,td,body,table,blockquote{-ms-text-size-adjust:100%; -webkit-text-size-adjust:100%;}.ExternalClass,.ExternalClass p,.ExternalClass td,.ExternalClass div,.ExternalClass span,.ExternalClass font{line-height:100%;}a[x-apple-data-detectors]{color:inherit !important; text-decoration:none !important; font-size:inherit !important; font-family:inherit !important; font-weight:inherit !important; line-height:inherit !important;}#bodyCell{padding:10px;}.templateContainer{max-width:600px !important;}a.mcnButton{display:block;}.mcnImage{vertical-align:bottom;}.mcnTextContent{word-break:break-word;}.mcnTextContent img{height:auto !important;}.mcnDividerBlock{table-layout:fixed !important;}body,#bodyTable{background-color:#ffffff;}#bodyCell{border-top:0;}.templateContainer{border:0;}h1{color:#202020; font-family:Helvetica; font-size:26px; font-style:normal; font-weight:bold; line-height:125%; letter-spacing:normal; text-align:left;}h2{color:#202020; font-family:Helvetica; font-size:22px; font-style:normal; font-weight:bold; line-height:125%; letter-spacing:normal; text-align:left;}h3{color:#202020; font-family:Helvetica; font-size:20px; font-style:normal; font-weight:bold; line-height:125%; letter-spacing:normal; text-align:left;}h4{color:#202020; font-family:Helvetica; font-size:18px; font-style:normal; font-weight:bold; line-height:125%; letter-spacing:normal; text-align:left;}#templatePreheader{background-color:#ffffff; background-image:none; background-repeat:no-repeat; background-position:center; background-size:cover; border-top:0; border-bottom:0; padding-top:9px; padding-bottom:9px;}#templatePreheader .mcnTextContent,#templatePreheader .mcnTextContent p{color:#656565; font-family:Helvetica; font-size:12px; line-height:150%; text-align:left;}#templatePreheader .mcnTextContent a,#templatePreheader .mcnTextContent p a{color:#656565; font-weight:normal; text-decoration:underline;}#templateHeader{background-color:#ffffff; background-image:none; background-repeat:no-repeat; background-position:center; background-size:cover; border-top:0; border-bottom:0; padding-bottom:0;}#templateHeader .mcnTextContent,#templateHeader .mcnTextContent p{color:#000000; font-family:Helvetica; font-size:16px; line-height:150%; text-align:left;}#templateHeader .mcnTextContent a,#templateHeader .mcnTextContent p a{color:#2BAADF; font-weight:normal; text-decoration:underline;}#templateBody{background-color:#000000; background-image:none; background-repeat:no-repeat; background-position:center; background-size:cover; border-top:0; border-bottom:0; padding-top:0; padding-bottom:0;}#templateBody .mcnTextContent,#templateBody .mcnTextContent p{color:#202020; font-family:Helvetica; font-size:16px; line-height:150%; text-align:left;}#templateBody .mcnTextContent a,#templateBody .mcnTextContent p a{color:#2BAADF; font-weight:normal; text-decoration:underline;}#templateColumns{background-color:#000000; background-image:none; background-repeat:no-repeat; background-position:center; background-size:cover; border-top:0; border-bottom:2px solid #EAEAEA; padding-top:0; padding-bottom:9px;}#templateColumns .columnContainer .mcnTextContent,#templateColumns .columnContainer .mcnTextContent p{color:#FFF; font-family:Helvetica; font-size:12px; line-height:150%; text-align:left;}#templateColumns .columnContainer .mcnTextContent a,#templateColumns .columnContainer .mcnTextContent p a{color:#2BAADF; font-weight:normal; text-decoration:underline;}#templateFooter{background-color:#000000; background-image:none; background-repeat:no-repeat; background-position:center; background-size:cover; border-top:0; border-bottom:0; padding-top:9px; padding-bottom:9px;}#templateFooter .mcnTextContent,#templateFooter .mcnTextContent p{color:#656565; font-family:Helvetica; font-size:12px; line-height:150%; text-align:center;}#templateFooterSage .mcnTextContent a,#templateFooter .mcnTextContent p a{color:#656565; font-weight:normal; text-decoration:underline;}#templateFooterSage .mcnTextContent,#templateFooter .mcnTextContent p{color:#656565; font-family:Helvetica; font-size:12px; line-height:150%; text-align:center;}#templateFooter .mcnTextContent a,#templateFooter .mcnTextContent p a{color:#656565; font-weight:normal; text-decoration:underline;}</style></head> <body> <span class="mcnPreviewText" style="display:none; font-size:0px; line-height:0px; max-height:0px; max-width:0px; opacity:0; overflow:hidden; visibility:hidden; mso-hide:all;">An Athena for Every Situation</span> <center> <table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable"> <tr> <td align="center" valign="top" id="bodyCell"><!--[if gte mso 9]> <table align="center" border="0" cellspacing="0" cellpadding="0" width="600" style="width:600px;"> <tr> <td align="center" valign="top" width="600" style="width:600px;"><![endif]--> <table border="0" cellpadding="0" cellspacing="0" width="100%" class="templateContainer"> <tr> <td valign="top" id="templatePreheader"><table class="mcnTextBlock" style="min-width:100%;" width="100%" cellspacing="0" cellpadding="0" border="0"> <tbody class="mcnTextBlockOuter"> <tr> <td class="mcnTextBlockInner" style="padding-top:9px;" valign="top"><!--[if mso]> <table align="left" border="0" cellspacing="0" cellpadding="0" width="100%" style="width:100%;"> <tr><![endif]--><!--[if mso]> <td valign="top" width="210" style="width:210px;"><![endif]--> <table style="max-width:210px;" class="mcnTextContentContainer" width="100%" cellspacing="0" cellpadding="0" border="0" align="left" > <tbody><tr> <td class="mcnTextContent" style="padding-top:0; padding-left:18px; padding-bottom:9px; padding-right:18px;" valign="top"> </td></tr></tbody></table><!--[if mso]> </td><![endif]--><!--[if mso]> <td valign="top" width="390" style="width:390px;"><![endif]--> <table style="max-width:390px;" class="mcnTextContentContainer" width="100%" cellspacing="0" cellpadding="0" border="0" align="left"> <tbody><tr> <td class="mcnTextContent" style="padding-top:0; padding-left:18px; padding-bottom:9px; padding-right:18px;" valign="top"> View this email in your browser </td></tr></tbody></table><!--[if mso]> </td><![endif]--><!--[if mso]> </tr></table><![endif]--> </td></tr></tbody> </table></td></tr><tr> <td valign="top" id="templateHeader"><table class="mcnImageBlock" style="min-width:100%;" width="100%" cellspacing="0" cellpadding="0" border="0"> <tbody class="mcnImageBlockOuter"> <tr> <td style="padding:0px" class="mcnImageBlockInner" valign="top"> <table class="mcnImageContentContainer" style="min-width:100%; border-collapse: collapse;" width="100%" cellspacing="0" cellpadding="0" border="0" align="left"> <tbody><tr> <td class="mcnImageContent" style="padding-right: 0px; padding-left: 0px; padding-top: 0; padding-bottom: 0; text-align:center;" valign="top"> <img alt="" src="https://gallery.mailchimp.com/ea957616d7790e5fcf5872a25/images/2dc82f25-c77f-4372-a010-f0788c2f0d37.jpg" style="max-width:900px; padding-bottom: 0; display: inline !important; vertical-align: bottom;" class="mcnImage" width="600" align="middle"> </td></tr></tbody></table> </td></tr></tbody> </table></td></tr><tr> <td valign="top" id="templateBody"><table class="mcnBoxedTextBlock" style="min-width:100%;" width="100%" cellspacing="0" cellpadding="0" border="0"><!--[if gte mso 9]> <table align="center" border="0" cellspacing="0" cellpadding="0" width="100%"><![endif]--> <tbody class="mcnBoxedTextBlockOuter"> <tr> <td class="mcnBoxedTextBlockInner" valign="top"><!--[if gte mso 9]> <td align="center" valign="top" "><![endif]--> <table style="min-width:100%; border-collapse: collapse;" class="mcnBoxedTextContentContainer" width="100%" cellspacing="0" cellpadding="0" border="0" align="left"> <tbody><tr> <td style="padding-top:9px; padding-left:18px; padding-bottom:9px; padding-right:18px;"> <table class="mcnTextContentContainer" style="min-width: 100% !important;background-color: #000000;border: 20px none;" width="100%" cellspacing="0" cellpadding="18" border="0"> <tbody><tr> <td class="mcnTextContent" style="color: #F2F2F2;font-family: Helvetica;font-size: 14px;font-weight: normal;line-height: 100%;text-align: center;" valign="top"> <span style="font-size:27px"><span style="color: #FFFFFF;"><span style="font-family:merriweather sans,helvetica neue,helvetica,arial,sans-serif">An Athena for <strong>EVERY</strong> situation</span></span></span> </td></tr></tbody></table> </td></tr></tbody></table><!--[if gte mso 9]> </td><![endif]--><!--[if gte mso 9]> </tr></table><![endif]--> </td></tr></tbody> </table><table class="mcnTextBlock" style="min-width:100%; border-collapse: collapse;" width="100%" cellspacing="0" cellpadding="0" border="0"> <tbody class="mcnTextBlockOuter"> <tr> <td class="mcnTextBlockInner" style="padding-top:9px;" valign="top"><!--[if mso]> <table align="left" border="0" cellspacing="0" cellpadding="0" width="100%" style="width:100%;"> <tr><![endif]--><!--[if mso]> <td valign="top" width="600" style="width:600px;"><![endif]--> <table style="max-width:100%; min-width:100%;" class="mcnTextContentContainer" width="100%" cellspacing="0" cellpadding="0" border="0" align="left"> <tbody><tr> <td class="mcnTextContent" style="padding-top:0; padding-right:18px; padding-bottom:9px; padding-left:18px;" valign="top"> <div style="text-align: center;"><span style="color:#FFFFFF">NEW RELEASES OUT NOW</span></div></td></tr></tbody></table><!--[if mso]> </td><![endif]--><!--[if mso]> </tr></table><![endif]--> </td></tr></tbody> </table><table class="mcnImageBlock" style="min-width:100%; border-collapse: collapse;" width="100%" cellspacing="0" cellpadding="0" border="0"> <tbody class="mcnImageBlockOuter"> <tr> <td style="padding:9px" class="mcnImageBlockInner" valign="top"> <table class="mcnImageContentContainer" style="min-width:100%;" width="100%" cellspacing="0" cellpadding="0" border="0" align="left"> <tbody><tr> <td class="mcnImageContent" style="padding-right: 9px; padding-left: 9px; padding-top: 0; padding-bottom: 0; text-align:center;" valign="top"> <img alt="" src="https://gallery.mailchimp.com/ea957616d7790e5fcf5872a25/images/c0528a15-f340-4211-bb27-530086ff99ca.png" style="max-width:1087px; padding-bottom: 0; display: inline !important; vertical-align: bottom;" class="mcnImage" width="564" align="middle"> </td></tr></tbody></table> </td></tr></tbody> </table></td></tr><tr> <td valign="top" id="templateColumns"><!--[if gte mso 9]> <table align="center" border="0" cellspacing="0" cellpadding="0" width="600" style="width:600px;"> <tr> <td align="center" valign="top" width="200" height="95" style="width:200px; height:95px;"><![endif]--> <table align="left" border="0" cellpadding="0" cellspacing="0" width="200" height="95" class="columnWrapper"> <tr> <td valign="top" class="columnContainer"><table class="mcnCaptionBlock" width="100%" cellspacing="0" cellpadding="0" border="0"> <tbody class="mcnCaptionBlockOuter"> <tr> <td class="mcnCaptionBlockInner" style="padding:9px;" valign="top"> <table class="mcnCaptionBottomContent" style="border-collapse: collapse;" width="false" cellspacing="0" cellpadding="0" border="0" align="left"> <tbody><tr> <td class="mcnCaptionBottomImageContent" style="padding:0 9px 9px 9px;" valign="top" align="center"> <img alt="" src="https://gallery.mailchimp.com/ea957616d7790e5fcf5872a25/images/1810cbf7-1d5c-4fbb-901c-ba3394c2bad0.jpg" style="max-width:106px;" class="mcnImage" width="106"> </td></tr><tr> <td class="mcnTextContent" style="padding:0 9px 0 9px; height:95px;" width="164" height="95" valign="top"> <span style="font-family:helvetica neue,helvetica,arial,verdana,sans-serif"><span style="color:#cc0033"><strong>Athena™ 850</strong></span><br><span style="color:#FFFFFF"><span style="font-size:12px">- Travels while raised<br>- Transportable by trailer<br>- Non marking tracks as standard</span></span></span><br></td></tr><tr><td></td></tr></tbody></table> </td></tr></tbody> </table></td></tr></table><!--[if gte mso 9]> </td><td align="center" valign="top" width="200" style="width:200px;"><![endif]--> <table align="left" border="0" cellpadding="0" cellspacing="0" width="200" class="columnWrapper"> <tr> <td valign="top" class="columnContainer"><table class="mcnCaptionBlock" width="100%" cellspacing="0" cellpadding="0" border="0"> <tbody class="mcnCaptionBlockOuter"> <tr> <td class="mcnCaptionBlockInner" style="padding:9px;" valign="top"> <table class="mcnCaptionBottomContent" style="border-collapse: collapse;" width="false" cellspacing="0" cellpadding="0" border="0" align="left"> <tbody><tr> <td class="mcnCaptionBottomImageContent" style="padding:0 9px 9px 9px;" valign="top" align="center"> <img alt="" src="https://gallery.mailchimp.com/ea957616d7790e5fcf5872a25/images/1810cbf7-1d5c-4fbb-901c-ba3394c2bad0.jpg" style="max-width:106px;" class="mcnImage" width="106"> </td></tr><tr> <td class="mcnTextContent" style="padding:0 9px 0 9px;" width="164" valign="top"> <span style="font-family:helvetica neue,helvetica,arial,verdana,sans-serif"><span style="color:#cc0033"><strong>Athena™ HE- New release</strong></span><br><span style="color:#FFFFFF"><span style="font-size:12px">- Fits through a door<br>- Indoor and outdoor use<br>- Self-levels on up to 20 degrees<br>- Transportable by trailer</span></span></span><br> </td></tr></tbody></table> </td></tr></tbody> </table></td></tr></table><!--[if gte mso 9]> </td><td align="center" valign="top" width="200" style="width:200px;"><![endif]--> <table align="left" border="0" cellpadding="0" cellspacing="0" width="200" class="columnWrapper"> <tr> <td valign="top" class="columnContainer"><table class="mcnCaptionBlock" width="100%" cellspacing="0" cellpadding="0" border="0"> <tbody class="mcnCaptionBlockOuter"> <tr> <td class="mcnCaptionBlockInner" style="padding:9px;" valign="top"> <table class="mcnCaptionBottomContent" style="border-collapse: collapse;" width="false" cellspacing="0" cellpadding="0" border="0" align="left"> <tbody><tr> <td class="mcnCaptionBottomImageContent" style="padding:0 9px 9px 9px;" valign="top" align="center"> <img alt="" src="https://gallery.mailchimp.com/ea957616d7790e5fcf5872a25/images/1810cbf7-1d5c-4fbb-901c-ba3394c2bad0.jpg" style="max-width:106px;" class="mcnImage" width="106"> </td></tr><tr> <td class="mcnTextContent" style="padding:0 9px 0 9px;" width="164" valign="top"> <span style="font-family:helvetica neue,helvetica,arial,verdana,sans-serif"><span style="color:#cc0033"><strong>Athena™ EVO 10.90 - New release</strong></span><br><span style="color:#FFFFFF"><span style="font-size:12px">- New 10 metre working height<br>- Dynamic and Proactive Levelling capabilities<br>- Drives and self levels while in the air<br>- New larger basket design</span></span></span> </td></tr></tbody></table> </td></tr></tbody> </table></td></tr></table><!--[if gte mso 9]> </td></tr></table><![endif]--> </td></tr><tr> <td valign="top" id="templateFooter"><table class="mcnBoxedTextBlock" style="min-width:100%;" width="100%" cellspacing="0" cellpadding="0" border="0"><!--[if gte mso 9]> <table align="center" border="0" cellspacing="0" cellpadding="0" width="100%"><![endif]--> <tbody class="mcnBoxedTextBlockOuter"> <tr> <td class="mcnBoxedTextBlockInner" valign="top"><!--[if gte mso 9]> <td align="center" valign="top" "><![endif]--> <table style="min-width:100%; border-collapse: collapse;" class="mcnBoxedTextContentContainer" width="100%" cellspacing="0" cellpadding="0" border="0" align="left"> <tbody><tr> <td style="padding-top:9px; padding-left:18px; padding-bottom:9px; padding-right:18px;"> <table class="mcnTextContentContainer" style="min-width: 100% !important;background-color: #000000;" width="100%" cellspacing="0" cellpadding="18" border="0"> <tbody><tr> <td class="mcnTextContent" style="color: #F2F2F2;font-family: Helvetica;font-size: 14px;font-weight: normal;text-align: center;" valign="top"> <span style="font-size:16px"><strong><span style="color: #CC0033;"><span style="font-family:helvetica neue,helvetica,arial,verdana,sans-serif">CLICK THROUGH TO DOWNLOAD A SPEC SHEET OR TO WATCH THE ATHENA™ IN ACTION</span></span></strong></span> </td></tr></tbody></table> </td></tr></tbody></table><!--[if gte mso 9]> </td><![endif]--><!--[if gte mso 9]> </tr></table><![endif]--> </td></tr></tbody> </table><table class="mcnCaptionBlock" width="100%" cellspacing="0" cellpadding="0" border="0"> <tbody class="mcnCaptionBlockOuter"> <tr> <td class="mcnCaptionBlockInner" style="padding:9px;" valign="top"> <table class="mcnCaptionLeftContentOuter" width="100%" cellspacing="0" cellpadding="0" border="0"> <tbody><tr> <td class="mcnCaptionLeftContentInner" style="padding:0 9px ;" valign="top"> <table class="mcnCaptionLeftImageContentContainer" cellspacing="0" cellpadding="0" border="0" align="right"> <tbody><tr> <td class="mcnCaptionLeftImageContent" valign="top"> <img alt="" src="athena.jpg" style="max-width:709px;" class="mcnImage" width="264"> </td></tr></tbody></table> <table class="mcnCaptionLeftTextContentContainer" width="264" cellspacing="0" cellpadding="0" border="0" align="left"> <tbody><tr> <td class="mcnTextContent" valign="top"> <div style="text-align: center;"><span style="font-size:14px"><span style="font-family:helvetica neue,helvetica,arial,verdana,sans-serif"><span style="color: #FFFFFF;">For a full range of ASPAC Specialist Access equipment</span></span></span></div></td></tr></tbody></table> </td></tr></tbody></table> </td></tr></tbody> </table><table class="mcnDividerBlock" style="min-width:100%;" width="100%" cellspacing="0" cellpadding="0" border="0"> <tbody class="mcnDividerBlockOuter"> <tr> <td class="mcnDividerBlockInner" style="min-width:100%; padding:18px;"> <table class="mcnDividerContent" style="min-width: 100%;border-top: 2px solid #FFFFFF;" width="100%" cellspacing="0" cellpadding="0" border="0"> <tbody><tr> <td> <span></span> </td></tr></tbody></table> </td></tr></tbody> </table><table class="mcnCaptionBlock" width="100%" cellspacing="0" cellpadding="0" border="0"> <tbody class="mcnCaptionBlockOuter"> <tr> <td class="mcnCaptionBlockInner" style="padding:9px;" valign="top"> <table class="mcnCaptionLeftContentOuter" width="100%" cellspacing="0" cellpadding="0" border="0"> <tbody><tr> <td class="mcnCaptionLeftContentInner" style="padding:0 9px ;" valign="top"> <table class="mcnCaptionLeftImageContentContainer" cellspacing="0" cellpadding="0" border="0" align="right"> <tbody><tr> <td class="mcnCaptionLeftImageContent" valign="top"> <img alt="" src="https://gallery.mailchimp.com/ea957616d7790e5fcf5872a25/images/d733278d-2c92-4a9f-9be1-4f0c6b5266a8.jpg" style="max-width:709px;" class="mcnImage" width="264"> </td></tr></tbody></table> <table class="mcnCaptionLeftTextContentContainer" width="264" cellspacing="0" cellpadding="0" border="0" align="left"> <tbody><tr> <td class="mcnTextContent" valign="top"> <div style="text-align: center;"><span style="font-size:14px"><span style="font-family:helvetica neue,helvetica,arial,verdana,sans-serif"><span style="color: #FFFFFF;">For a full range of ASPAC Specialist Access equipment</span></span></span></div></td></tr></tbody></table> </td></tr></tbody></table> </td></tr></tbody> </table><table class="mcnBoxedTextBlock" style="min-width:100%;" width="100%" cellspacing="0" cellpadding="0" border="0"><!--[if gte mso 9]> <table align="center" border="0" cellspacing="0" cellpadding="0" width="100%"><![endif]--> <tbody class="mcnBoxedTextBlockOuter"> <tr> <td class="mcnBoxedTextBlockInner" valign="top"><!--[if gte mso 9]> <td align="center" valign="top" "><![endif]--> <table style="min-width:100%;" class="mcnBoxedTextContentContainer" width="100%" cellspacing="0" cellpadding="0" border="0" align="left"> <tbody><tr> <td style="padding-top:9px; padding-left:18px; padding-bottom:9px; padding-right:18px;"> <table class="mcnTextContentContainer" style="min-width: 100% !important;background-color: #DA2127;" width="100%" cellspacing="0" cellpadding="18" border="0"> <tbody><tr> <td class="mcnTextContent" style="color: #F2F2F2;font-family: "Helvetica Neue",Helvetica,Arial,Verdana,sans-serif;font-size: 14px;font-weight: normal;text-align: center;" valign="top"> <div style="text-align: center;"><span style="color:#FFFFFF"><span style="font-family:helvetica neue,helvetica,arial,verdana,sans-serif"><strong>After Sales Service: </strong></span></span></div><span style="color:#FFFFFF"><span style="font-family:helvetica neue,helvetica,arial,verdana,sans-serif">Maintenance agreements available 24 hour phone support</span></span> </td></tr></tbody></table> </td></tr></tbody></table><!--[if gte mso 9]> </td><![endif]--><!--[if gte mso 9]> </tr></table><![endif]--> </td></tr></tbody> </table></td></tr><tr> <td valign="top" id="templateFooterSage"> <table class="mcnDividerBlock" style="min-width:100%;" width="100%" cellspacing="0" cellpadding="0" border="0"> <tbody class="mcnDividerBlockOuter"> <tr> <td class="mcnDividerBlockInner" style="min-width:100%;padding:18px;"> <table class="mcnDividerContent" style="min-width:100%;border-top:2px solid #EAEAEA;" width="100%" cellspacing="0" cellpadding="0" border="0"> <tbody> <tr> <td> <span></span> </td></tr></tbody> </table> </td></tr></tbody> </table> <table class="mcnCaptionBlock" width="100%" cellspacing="0" cellpadding="0" border="0"> <tbody class="mcnCaptionBlockOuter"> <tr> <td class="mcnCaptionBlockInner" style="padding:9px;" valign="top"> <table class="mcnCaptionRightContentOuter" width="100%" cellspacing="0" cellpadding="0" border="0"> <tbody> <tr> <td class="mcnCaptionRightContentInner" style="padding:0 9px;" valign="top"> <table class="mcnCaptionRightImageContentContainer" cellspacing="0" cellpadding="0" border="0" align="left"> <tbody> <tr> <td class="mcnCaptionRightImageContent" valign="top"> <img alt="" src="https://gallery.mailchimp.com/ea957616d7790e5fcf5872a25/images/0d9da147-38d0-4b35-b132-9798550e40f9.jpg" style="max-width:60px;" class="mcnImage" width="60"> </td></tr></tbody> </table> <table class="mcnCaptionRightTextContentContainer" width="396" cellspacing="0" cellpadding="0" border="0" align="right"> <tbody> <tr> <td class="mcnTextContent" valign="top"> <br>info#sagemedia.com.au +61 8 6336 6430 www.sagemedia.com.au <tr> <td style="width:100px; height:20px;"></td></tr><tr class="unsub"> <td valign="top" align="center">click here to unsubscribe</td></tr></tr></td></tr></tbody> </table> </td></tr></tbody> </table> </td></tr></tbody> </table> </td></tr></table><!--[if gte mso 9]> </td></tr></table><![endif]--> </td></tr></table> </center> </body> </html>
Here is a JSFiddle with formatted html: https://jsfiddle.net/025ox8tp/1/
Thanks for the help. PS I had to minify the code in order to fit everything in.
Problem Solved!!! It turns out it was just one computer that had an issue with this email. Other computers using outlook didnt seem to have the problem and after re-installing outlook on his computer. Problem solved
This is only a workaround that works if it fits your template layout but I thought it would worth sharing.
I find out that the lines appearing are the same color as the background. Therefore setting the background color on the body would hide those imperfections ...
<style>
body { background: #000000; }
</style>
Related
Running into my regular struggles with email template designs, in particular that Gmail removes classes and thus I can't center a td via any means. Is there any way at all to change the "align" from left to center on the td with the image? Maybe I can comment in additional TDs on sides to center it, if Gmail permits it. I'm at a loss.
Template is mildly frankensteined from a template block editor.
<table class="row" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" width="280" cellspacing="0" cellpadding="0" align="left">
<tbody><tr>
<td align="left">
<table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" cellspacing="0" cellpadding="0" align="left">
<tbody><tr>
<td align="left">
<table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; width:auto !important;" cellspacing="0" cellpadding="0" align="left">
<tbody><tr>
<td class="img-responsive" width="280" align="left">
<img alt="280x200x1" src="#" style="width:100%; height:auto;" width="280" height="200">
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td align="center">
<table data-primary-order="1" data-primary-type="bgcolor" data-bgcolor="Columns" width="100%" cellspacing="0" cellpadding="0" bgcolor="#f6f6f6" align="center">
<tbody><tr>
<td align="center">
<table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; max-width:90%; width:90%;" width="90%" cellspacing="0" cellpadding="0" align="center">
<tbody><tr>
<td style="mso-line-height-rule: exactly; line-height:15px; font-size:0;" height="15"> </td>
</tr>
<tr>
<td>
<table style="width:auto !important;" cellspacing="0" cellpadding="0" align="left">
<tbody><tr>
<td data-color="Titles" data-size="Titles" data-min="14" data-max="46" style="color: #333333; font-family: 'roboto', Arial, Helvetica, sans-serif; font-weight: 400; font-size: 13px; line-height: 22.1px;" align="left">text text<br>text text</td></tr>
</tbody></table>
</td>
</tr>
<tr>
<td style="mso-line-height-rule: exactly; line-height:15px; font-size:0;" height="15"> </td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
I believe the following code should resolve your issue. When viewing the code you will see there is an element with an id of "I CHANGED FROM LEFT TO CENTER". This seemed to cause the issue, hopefully it works for you too!
<!DOCTYPE html>
<html>
<body>
<table class="row" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" width="280" cellspacing="0" cellpadding="0" align="left">
<tbody><tr>
<td align="left">
<table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" cellspacing="0" cellpadding="0" align="left">
<tbody><tr>
<td align="left">
<table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; width:auto !important;" cellspacing="0" cellpadding="0" align="left">
<tbody><tr>
<td class="img-responsive" width="280" align="left">
<img alt="280x200x1" src="#" style="width:100%; height:auto;" width="280" height="200">
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td align="center">
<table data-primary-order="1" data-primary-type="bgcolor" data-bgcolor="Columns" width="100%" cellspacing="0" cellpadding="0" bgcolor="#f6f6f6" align="center">
<tbody><tr>
<td align="center">
<table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; max-width:90%; width:90%;" width="90%" cellspacing="0" cellpadding="0" align="center">
<tbody><tr>
<td style="mso-line-height-rule: exactly; line-height:15px; font-size:0;" height="15"> </td>
</tr>
<tr>
<td>
<table style="width:auto !important;" cellspacing="0" cellpadding="0" align="center" id="I CHANGED FROM LEFT TO CENTER">
<tbody><tr>
<td data-color="Titles" data-size="Titles" data-min="14" data-max="46" style="color: #333333; font-family: 'roboto', Arial, Helvetica, sans-serif; font-weight: 400; font-size: 13px; line-height: 22.1px;" style="text-align: right;">text text<br>text text</td></tr>
</tbody></table>
</td>
</tr>
<tr>
<td style="mso-line-height-rule: exactly; line-height:15px; font-size:0;" height="15"> </td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</body>
</html>
hello longtime lurker first time asker - im having an issue with outlook 14 on iOS. I send a test send and it begins to render the mobile view as it should look then it gets to a point and sizes everything down as if its desktop. coupla code blocks for reference:
<table align="center" border="0" cellpadding="0" cellspacing="0" class="wrapper" style="width:600px;" width="600">
<tr>
<td align="center" bgcolor="#EAE6DD" height="auto" style="background-size:cover;height:auto; background-position:center;" valign="middle">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<!-- IMAGES AND TEXT SIT WITHIN THIS AREA -->
<tr>
<td align="center" class="hide" style="width:600px;" valign="top" width="600">
<img alt="Hey! you've earned this - enjoy a burg on us!" border="0" src="https://image.email.grilld.com.au/lib/fe3915707564067c721778/m/1/Taken_GIF_v2.gif" style="display:block;font-family:Arial, sans-serif;color:#ffffff;font-weight:bold;font-size:24px;max-width:600px;" width="600"></td><!--[if !mso 9]><!--><td align="center" valign="top">
<div class="mobile_show" style="display:none;width:0;overflow:hidden;max-height:0!important">
<table align="center" border="0" cellpadding="0" cellspacing="0" class="wrapper" width="100%">
<tr>
<td align="center" style="width:600px;" valign="top" width="600">
<img alt="Hey! you've earned this - enjoy a burg on us!" border="0" height="auto" src="https://image.email.grilld.com.au/lib/fe3915707564067c721778/m/1/Taken_GIF_mobile_v2.gif" style="display:block;font-family:Arial, sans-serif;color:#ffffff;font-weight:bold;font-size:24px;max-width:600px;" width="100%"></td></tr></table></div></td><!--<![endif]--></tr><!-- IMAGES AND TEXT SIT WITHIN THIS AREA --></table></td></tr></table><!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]--></td></tr></table>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="wrapper" style="width: 600px;" width="600">
<tr>
<td align="center" bgcolor="#EAE6DD" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="width: 30px;" width="30">
</td><td align="center" valign="top">
<table align="center" border="0" cellpadding="0" cellspacing="0" class="intro_width_mobile">
<tr>
<td height="20" style="height:20px; line-height:1px; font-size:1px;">
</td></tr><tr>
<td align="center" class="black" style="color:#000000; font-family:'Custom Font 1','Helvetica Neue',Helvetica, Arial, sans-serif; font-size:16px; line-height:21px; width:100%; max-width:464px; margin:0 auto; Margin:0 auto" valign="top" width="100%">
There's more where that came from, so stop by again soon.<br>
<br>
Burg apetit!<br>
</td></tr><tr>
<td height="20" style="height:20px; line-height:1px; font-size:1px;">
</td></tr></table></td><td style="width:30px;" width="30">
</td></tr></table></td></tr></table>
TIA for your help
Outlook apps try and 'fix' your large images by adding a max-width:100% to their CSS. But if you use e.g. max-width:600px as you are, it will be overridden. You can overwrite this by using max-width:600px!important inline (or an id on your body, e.g. #body .myimage {max-width:600px!important}).
Alternatively, you could rely on width:100%, which you don't have on your first image.
That's probably the trigger (big images or tables which it can't resize properly). Let us know if that doesn't solve it.
So, I'm working on developing a newsletter using the MJML framework (which is pretty great by the way), which I'd ideally like to distribute using our company Mailchimp account. I'm by no means married to using MC but our infrastructure uses their forms and for any number of other reasons we'd rather keep MC than switch.
The issue I'm beginning to run into is that the different email platforms seem to be processing the HTML output by the MJML in different ways. Putsmail seems to render closest to my expectations, but Mailchimp and inexplicably Mailjet each have their own separate rendering issues.
With Mailchimp, the main issue I have is that my hero section is rendered incorrectly in Outlook 365, with the image incorrectly placed. I am sure this is a Mailchimp issue as Outlook renders the Putsmail and Mailjet sections correctly. So, what I am wondering is what is making MC choke on my HTML and how can I compensate for this?
EDIT:
Trimmed HTML of the Relevant Section:
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title>
</title>
<!--[if !mso]><!-- -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
#outlook a { padding:0; }
body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-
size-adjust:100%; }
table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }
img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }
p { display:block;margin:13px 0; }
</style>
<!--[if mso]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<!--[if lte mso 11]>
<style type="text/css">
.outlook-group-fix { width:100% !important; }
</style>
<![endif]-->
<!--[if !mso]><!-->
<link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">
<style type="text/css">
#import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);
</style>
<!--<![endif]-->
<style type="text/css">
#media only screen and (min-width:480px) {
.mj-column-per-66 { width:66.66666666666666% !important; max-width: 66.66666666666666%; }
.mj-column-per-33 { width:33.33333333333333% !important; max-width:
33.33333333333333%; }
.mj-column-per-100 { width:100% !important; max-width: 100%; }
.mj-column-per-25 { width:25% !important; max-width: 25%; }
.mj-column-per-75 { width:75% !important; max-width: 75%; }
}
</style>
<style type="text/css">
#media only screen and (max-width:480px) {
table.full-width-mobile { width: 100% !important; }
td.full-width-mobile { width: auto !important; }
}
</style>
</head>
<body style="background-color:#d7dde5;">
<div
style="background-color:#d7dde5;"
>
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"
>
<tbody>
<tr>
<td>
<!--[if mso | IE]>
<table
align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600"
>
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"
>
<tbody>
<tr>
<td
style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"
>
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td
class="" style="vertical-align:top;width:399.99999999999994px;"
>
<![endif]-->
<div
class="mj-column-per-66 outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
>
<tr>
<td
align="left" style="font-size:0px;padding:10px 25px;padding-top:0;padding-bottom:0px;word-break:break-word;"
>
<div
style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:11px;line-height:1;text-align:left;color:#000000;"
><span style="font-size: 11px">[[HEADLINE]]</span></div>
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
<td
class="" style="vertical-align:top;width:199.99999999999997px;"
>
<![endif]-->
<div
class="mj-column-per-33 outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
>
<tr>
<td
align="right" style="font-size:0px;padding:10px 25px;padding-top:0;padding-bottom:0px;word-break:break-word;"
>
<div
style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:11px;line-height:1;text-align:right;color:#000000;"
><span style="font-size: 11px">[[PERMALINK_LABEL]]</span></div>
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;"
>
<tbody>
<tr>
<td>
<!--[if mso | IE]>
<table
align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600"
>
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"
>
<tbody>
<tr>
<td
style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"
>
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td
class="" style="vertical-align:top;width:199.99999999999997px;"
>
<![endif]-->
<div
class="mj-column-per-33 outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
>
<tr>
<td
align="center" style="font-size:0px;padding:10px 25px;padding-top:10px;padding-bottom:0px;word-break:break-word;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;"
>
<tbody>
<tr>
<td style="width:125px;">
<img
alt="GreenTec Capital Logo" height="auto" src="https://drive.google.com/uc?id=1oACJyNhnHMAqDTNlQCne1-Y4feLhCwZi" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="125"
/>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
<td
class="" style="vertical-align:top;width:399.99999999999994px;"
>
<![endif]-->
<div
class="mj-column-per-66 outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
>
<tr>
<td
align="center" style="font-size:0px;padding:10px 25px;padding-top:10px;padding-bottom:0px;word-break:break-word;"
>
<div
style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;"
>Portfolio UpdatesInvestment Opportunities</div></td></tr></table></div><!--[if mso | IE]></td></tr></table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
<!--[if mso | IE]>
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:600px;" width="600"
>
<tr>
<td style="line-height:0;font-size:0;mso-line-height-rule:exactly;">
<v:image
style="border:0;height:300px;mso-position-horizontal:center;position:absolute;top:0;width:600px;z-index:-3;" src="https://drive.google.com/uc?id=1aQ2X43Qm0RqYJMGQfpOgUKXYGcIEe8pu" xmlns:v="urn:schemas-microsoft-com:vml"
/>
<![endif]-->
<div
style="margin:0 auto;max-width:600px;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"
>
<tr
style="vertical-align:top;"
>
<td
background="https://drive.google.com/uc?id=1aQ2X43Qm0RqYJMGQfpOgUKXYGcIEe8pu" style="background:#ffffff url(https://drive.google.com/uc?id=1aQ2X43Qm0RqYJMGQfpOgUKXYGcIEe8pu) no-repeat center center / cover;background-position:center center;background-repeat:no-repeat;padding:0px;vertical-align:top;" height="300"
>
<!--[if mso | IE]>
<table
border="0" cellpadding="0" cellspacing="0" style="width:600px;" width="600"
>
<tr>
<td style="">
<![endif]-->
<div
class="mj-hero-content" style="margin:0px auto;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;margin:0px;"
>
<tr>
<td style="" >
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;margin:0px;"
>
<tr>
<td
align="center" style="font-size:0px;padding:10px 25px;padding-top:125px;padding-bottom:10px;word-break:break-word;"
>
<div
style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:14px;line-height:1;text-align:center;color:#ffffff;"
><span style="font-size: 30px; line-height: 30px;">GreenTec Capital Partners</span><br/><br/>Investor Newsletter</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"
>
<tbody>
<tr>
<td>
<!--[if mso | IE]>
<table
align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600"
>
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"
>
<tbody>
<tr>
<td
style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"
>
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td
class="" style="vertical-align:top;width:600px;"
>
<![endif]-->
Garbled Mailchimp HTML for the Same Section:
<!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><title></title><!--[if !mso]><meta http-equiv="x-ua-compatible" content="IE=edge">
<!--
<![endif]--><meta http-equiv="content-type" content="text/html; charset=UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><!--[if mso]><xml><o:OfficeDocumentSettings><o:AllowPNG /><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]--><!--[if lte mso 11]><style>.outlook-group-fix {
width:100% !important;
}
</style>
<![endif]-->
<!--[if !mso]>
<link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">
<!--
<style>
</style>
<![endif]-->
<style type="text/css">
#outlook a{
padding:0;}
body{margin:0;
padding:0;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
}table,td{
border-collapse:collapse;
mso-table-lspace:0;
mso-table-rspace:0;
}img{border:0;
height:auto;
line-height:100%;
outline:none;
text-decoration:none;
-ms-interpolation-mode:bicubic;
}p{display:block;
margin:13px 0;
}#outlook a{padding:0;
}body{
margin:0;
padding:0;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
}table,td{
border-collapse:collapse;
mso-table-lspace:0;
mso-table-rspace:0;
}img{
border:0;
height:auto;
line-height:100%;
outline:none;
text-decoration:none;
-ms-interpolation-mode:bicubic;
}p{display:block;margin:13px 0;
}#media only screen and (min-width:480px){
.mj-column-per-66{width:66.666666666667% !important;
max-width:66.666666666667%;
}} #media only screen and (min-width:480px){
.mj-column-per-33{
width:33.333333333333% !important;
max-width:33.333333333333%;
}} #media only screen and (min-width:480px){
.mj-column-per-100{
width:100% !important;
max-width:100%;
}} #media only screen and (min-width:480px){
.mj-column-per-25{
width:25% !important;
max-width:25%;}
} #media only screen and (min-width:480px){
.mj-column-per-75{
width:75% !important;
max-width:75%;
}} #outlook a{
padding:0;
}
body{
margin:0;
padding:0;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
}table,td{
border-collapse:collapse;
mso-table-lspace:0;
mso-table-rspace:0;
}img{
border:0;
height:auto;
line-height:100%;
outline:none;
text-decoration:none;
-ms-interpolation-mode:bicubic;}
p{display:block;
margin:13px 0;}
#media only screen and (min-width:480px){
.mj-column-per-66{
width:66.666666666667% !important;
max-width:66.666666666667%;
}} #media only screen and (min-width:480px){
.mj-column-per-33{
width:33.333333333333% !important;
max-width:33.333333333333%;
}} #media only screen and (min-width:480px){
.mj-column-per-100{
width:100% !important;
max-width:100%;
}} #media only screen and (min-width:480px){
.mj-column-per-25{
width:25% !important;
max-width:25%;
}} #media only screen and (min-width:480px){
.mj-column-per-75{
width:75% !important;
max-width:75%;
}} #media only screen and (max-width:480px){
table.full-width-mobile{
width:100% !important;
}} #media only screen and (max-width:480px){
td.full-width-mobile{
width:auto !important;
}}</style></head>
<body style="background-color: #d7dde5;margin: 0;padding: 0;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;"><div style="background-color:#d7dde5;"> <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width: 100%;border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;"><tbody><tr><td style="border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;">
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;" width="600"><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width: 100%;border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;">
<tbody>
<tr>
<td style="direction: ltr;font-size: 0px;padding: 20px 0;text-align: center;border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;"><!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:top;width:399.99999999999994px;"><![endif]--><div class="mj-column-per-66 outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align: top;border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;" width="100%"><tr><td align="left" style="font-size: 0px;padding: 10px 25px;padding-top: 0;padding-bottom: 0px;border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;"><div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:11px;line-height:1;text-align:left;color:#000000;"><span style="font-size: 11px">[[HEADLINE]]</span>
</div></td></tr></table></div><!--[if mso | IE]></td><td style="vertical-align:top;width:199.99999999999997px;"><![endif]--><div class="mj-column-per-33 outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align: top;border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;" width="100%">
<tr>
<td align="right" style="font-size: 0px;padding: 10px 25px;padding-top: 0;padding-bottom: 0px;border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;"> <div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:11px;line-height:1;text-align:right;color:#000000;"><span style="font-size: 11px">[[PERMALINK_LABEL]]</span>
</div>
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background: #ffffff;background-color: #ffffff;width: 100%;border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;">
<tbody>
<tr>
<td style="border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;">
<!--[if mso | IE]>
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;" width="600">
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]--> <div style="margin:0px auto;max-width:600px;"><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width: 100%;border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;"><tbody><tr><td style="direction: ltr;font-size: 0px;padding: 20px 0;text-align: center;border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;"><!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:top;width:199.99999999999997px;"><![endif]--><div class="mj-column-per-33 outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"><table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align: top;border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;" width="100%"><tr><td align="center" style="font-size: 0px;padding: 10px 25px;padding-top: 10px;padding-bottom: 0px;border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;"><table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse: collapse;border-spacing: 0px;mso-table-lspace: 0;mso-table-rspace: 0;"><tbody><tr><td style="width: 125px;border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;"><img alt="GreenTec Capital Logo" src="https://drive.google.com/uc?id=1oACJyNhnHMAqDTNlQCne1-Y4feLhCwZi" style="border: 0;display: block;outline: none;text-decoration: none;height: auto;width: 100%;font-size: 13px;line-height: 100%;-ms-interpolation-mode: bicubic;" width="125"></td></tr></tbody></table></td>
</tr></table></div><!--[if mso | IE]></td><td style="vertical-align:top;width:399.99999999999994px;"><![endif]--><div class="mj-column-per-66 outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align: top;border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;" width="100%"><tr><td align="center" style="font-size: 0px;padding: 10px 25px;padding-top: 10px;padding-bottom: 0px;border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;"><div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">Portfolio UpdatesInvestment Opportunities</div></td></tr></table></div><!--[if mso | IE]></td></tr></table>
<![endif]--></td></tr></tbody></table></div>
<!--[if mso | IE]></td></tr></table><![endif]--></td>
</tr>
</tbody>
</table>
<!--[if mso | IE]>
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:600px;" width="600">
<tr>
<td style="line-height:0;font-size:0;mso-line-height-rule:exactly;">
<v:image style="border:0;height:300px;mso-position-horizontal:center;position:absolute;top:0;width:600px;z-index:;" src="https://drive.google.com/uc?id=1aQ2X43Qm0RqYJMGQfpOgUKXYGcIEe8pu" xmlns:v="urn:schemas-microsoft-com:vml" />
<![endif]-->
<div style="margin:0 auto;max-width:600px;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width: 100%;border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;">
<tr style="vertical-align:top;">
<td background="https://drive.google.com/uc?id=1aQ2X43Qm0RqYJMGQfpOgUKXYGcIEe8pu" style="background: #ffffff url('https://drive.google.com/uc?id=1aQ2X43Qm0RqYJMGQfpOgUKXYGcIEe8pu') no-repeat center;background-position: center;background-repeat: no-repeat;padding: 0px;vertical-align: top;border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;" height="300">
<!--[if mso | IE]>
<table border="0" cellpadding="0" cellspacing="0" style="width:600px;" width="600"><tr><td><![endif]--><div class="mj-hero-content" style="margin:0px auto;"><table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width: 100%;margin: 0px;border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;"><tr><td style="border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;"><table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width: 100%;margin: 0px;border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;"><tr><td align="center" style="font-size: 0px;padding: 10px 25px;padding-top: 125px;padding-bottom: 10px;border-collapse: collapse;mso-table-lspace: 0;mso-table-rspace: 0;"><div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:14px;line-height:1;text-align:center;color:#ffffff;"><span style="font-size: 30px; line-height: 30px;">GreenTec Capital Partners</span><br><br>Investor Newsletter</div></td></tr></table></td></tr></table></div><!--[if mso | IE]></td></tr></table><![endif]--></td></tr></table></div><!--[if mso | IE]></td></tr> </table><![endif]-->
I created an email template, where I kept my layout width at 600px.
There are four columns of 150px width each.
It is working fine on all clients except with Outlook, where the layout breaks because of an unwanted column spacing.
I didn't use any explicit padding though.
Here is how it look-like in Outlook:
Any kind of help would be very appreciated.
<tr>
<td align="left" style="-moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; border-collapse: collapse; color: #4e5054; font-family: 'Verdana', 'Arial', 'Helvetica', sans-serif; font-size: 12px; font-smoothing: antialiased; font-weight: normal; line-height: 18px; margin: 0; padding: 0; vertical-align: top; padding-bottom:0;">
<!-- stat -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#e5e5e5">
<tr>
<td align="center" style="padding-top:20px; padding-bottom:20px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="display:block; max-width:600px;" class="wrapto680px">
<tr>
<td width="100%" valign="top" align="center" style="text-align:center; font-size:0px;">
<!--[if (gte mso 9)|(IE)]><table width="600" border="0" cellspacing="0" cellpadding="0"><tr><td valign="top" width="600"><![endif]-->
<div style="display:inline-block;" class="ecxmarginhack">
<table width="600" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td width="100%" valign="top">
<table width="150" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td style="font-size:0px;"><img style="display:block;" border="0" src="http://www.stevensegallery.com/200/200" width="150" height="150" alt=""/></td>
</tr>
</table>
<table width="150" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td style="font-size:0px;"><img style="display:block;" border="0" src="http://www.stevensegallery.com/200/200" width="150" height="150" alt=""/></td>
</tr>
</table>
<table width="150" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td style="font-size:0px;"><img style="display:block;" border="0" src="http://www.stevensegallery.com/200/200" width="150" height="150" alt=""/></td>
</tr>
</table>
<table width="150" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td style="font-size:0px;"><img style="display:block;" border="0" src="http://www.stevensegallery.com/200/200" width="150" height="150" alt=""/></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
</td>
</tr>
</table>
<!-- end 4 col --></td>
</tr>
</table>
<!-- End -->
</td>
</tr>
Coding tables as columns gets a little fiddly when it comes to outlook. By default when two tables are placed right beside each other, outlook adds space on the right. Here you have two options: 1. Go with ghost columns (personal favorite) or 2. Reduce table widths (and image widths) by a few pixels and add a style to tables (style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;").
Option 1: Ghost Columns
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" style="-moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; border-collapse: collapse; color: #4e5054; font-family: 'Verdana', 'Arial', 'Helvetica', sans-serif; font-size: 12px; font-smoothing: antialiased; font-weight: normal; line-height: 18px; margin: 0; padding: 0; vertical-align: top; padding-bottom:0;"><!-- stat -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#e5e5e5">
<tr>
<td align="center" style="padding-top:20px; padding-bottom:20px;"><table width="100%" border="0" cellspacing="0" cellpadding="0" style="display:block; max-width:600px;" class="wrapto680px">
<tr>
<td width="100%" valign="top" align="center" style="text-align:center; font-size:0px;"><!--[if (gte mso 9)|(IE)]><table width="600" border="0" cellspacing="0" cellpadding="0"><tr><td valign="top" width="600"><![endif]-->
<div style="display:inline-block;" class="ecxmarginhack">
<table width="600" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td width="100%" valign="top"><table width="150" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td style="font-size:0px;"><img style="display:block;" border="0" src="http://www.stevensegallery.com/200/200" width="150" height="150" alt=""/></td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]></td><td><![endif]-->
<table width="150" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td style="font-size:0px;"><img style="display:block;" border="0" src="http://www.stevensegallery.com/200/200" width="150" height="150" alt=""/></td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]></td><td><![endif]-->
<table width="150" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td style="font-size:0px;"><img style="display:block;" border="0" src="http://www.stevensegallery.com/200/200" width="150" height="150" alt=""/></td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]></td><td><![endif]-->
<table width="150" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td style="font-size:0px;"><img style="display:block;" border="0" src="http://www.stevensegallery.com/200/200" width="150" height="150" alt=""/></td>
</tr>
</table></td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td>
</tr>
</table>
<!-- end 4 col --></td>
</tr>
</table>
<!-- End --></td>
</tr>
</tbody>
</table>
Option 2: Style on tables
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" style="-moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; border-collapse: collapse; color: #4e5054; font-family: 'Verdana', 'Arial', 'Helvetica', sans-serif; font-size: 12px; font-smoothing: antialiased; font-weight: normal; line-height: 18px; margin: 0; padding: 0; vertical-align: top; padding-bottom:0;"><!-- stat -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#e5e5e5">
<tr>
<td align="center" style="padding-top:20px; padding-bottom:20px;"><table width="100%" border="0" cellspacing="0" cellpadding="0" style="display:block; max-width:600px;" class="wrapto680px">
<tr>
<td width="100%" valign="top" align="center" style="text-align:center; font-size:0px;"><!--[if (gte mso 9)|(IE)]><table width="600" border="0" cellspacing="0" cellpadding="0"><tr><td valign="top" width="600"><![endif]-->
<div style="display:inline-block;" class="ecxmarginhack">
<table width="600" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td width="100%" valign="top"><table width="150" border="0" cellspacing="0" cellpadding="0" align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tr>
<td style="font-size:0px;"><img style="display:block;" border="0" src="http://www.stevensegallery.com/200/200" width="150" height="150" alt=""/></td>
</tr>
</table>
<table width="150" border="0" cellspacing="0" cellpadding="0" align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tr>
<td style="font-size:0px;"><img style="display:block;" border="0" src="http://www.stevensegallery.com/200/200" width="150" height="150" alt=""/></td>
</tr>
</table>
<table width="150" border="0" cellspacing="0" cellpadding="0" align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tr>
<td style="font-size:0px;"><img style="display:block;" border="0" src="http://www.stevensegallery.com/200/200" width="150" height="150" alt=""/></td>
</tr>
</table>
<table width="150" border="0" cellspacing="0" cellpadding="0" align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tr>
<td style="font-size:0px;"><img style="display:block;" border="0" src="http://www.stevensegallery.com/200/200" width="150" height="150" alt=""/></td>
</tr>
</table></td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td>
</tr>
</table>
<!-- end 4 col --></td>
</tr>
</table>
<!-- End --></td>
</tr>
</tbody>
</table>
Hope this is the answer you were after.
Seems like a lot of unnecessary code. I would suggest using a much simpler code:
<div style="width: 600px; display: flex;">
<img style="border:0; width: 150px; height: 150px;" src="http://www.stevensegallery.com/200/200" alt=""/>
<img style="border:0; width: 150px; height: 150px;" src="http://www.stevensegallery.com/200/200" alt=""/>
<img style="border:0; width: 150px; height: 150px;" src="http://www.stevensegallery.com/200/200" alt=""/>
<img style="border:0; width: 150px; height: 150px;" src="http://www.stevensegallery.com/200/200" alt=""/>
</div>
Another option without using flex
<div style="width: 600px;">
<img style="border:0; width: 150px; height: 150px; float: left;" src="http://www.stevensegallery.com/200/200" alt=""/>
<img style="border:0; width: 150px; height: 150px; float: left;" src="http://www.stevensegallery.com/200/200" alt=""/>
<img style="border:0; width: 150px; height: 150px; float: left;" src="http://www.stevensegallery.com/200/200" alt=""/>
<img style="border:0; width: 150px; height: 150px; float: left;" src="http://www.stevensegallery.com/200/200" alt=""/>
</div>
I am creating a webpage and I have 99% of the page done. For some reason, I can't figure out the HTML/CSS part of one minor feature. My design looks like this right now(attachment titled before picture):
before picture
I want it to look like this (attachment titled after picture). after picture
As you can see, I have almost everything done, I just need to add a small grey box that says "Feature Presenter 1" and so forth above the picture but I can not figure out what the HTML/CSS should be. Can someone please modify my HTML/CSS code below so that it matches the after picture? Please someone help me, I am so close to completing the project. Thank you so much
The HTML is below:
<tr>
<td align="center" valign="top" bgcolor="#ffffff" style="background-color:#ffffff;"><table width="700" border="0" cellspacing="0" cellpadding="0" align="center" style="width:700px;" class="em_wrapper">
<tr>
<td width="18" style="width:18px;" class="em_side10"> </td>
<td align="center" valign="top"><table width="668" border="0" cellspacing="0" cellpadding="0" align="center" style="width:668px;" class="em_wrapper">
<tr>
<td align="center" valign="top"><table width="328" border="0" cellspacing="0" cellpadding="0" align="left" style="width:328px;" class="em_wrapper">
<tr>
<td align="center" valign="top"><table width="328" border="0" cellspacing="0" cellpadding="0" align="center" style="width:328px;" class="em_w300">
<tr>
<td align="center" valign="top"><table width="157" border="0" cellspacing="0" cellpadding="0" align="left" style="width:157px;" class="em_wrapper">
<tr>
<td align="center" valign="top" height="189" style="height:189px;border: solid 2px #4d4d4d; display:block; border-top-left-radius:5px; border-top-right-radius:5px;"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" class="em_wrapper" >
<tr>
<td height="189" align="center" valign="bottom" style="height:189px;"><img src="https://tieitapp-cdn1.s3.amazonaws.com/home/tieit/domains/app.tieit.io/public_html/assets/img/email/026696a00d07148ec092a60c0cd8b8d3.png" width="145" alt="" height="163" style="display:block; font-family:Arial, sans-serif; font-size:20px; line-height:30px; color:#000000; max-width:145px; height:163px;" class="em_g_img" border="0" /></td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="top" bgcolor="#4d4d4d" style="background-color:#4d4d4d; border-bottom-left-radius:5px; border-bottom-right-radius:5px;"><table width="157" border="0" cellspacing="0" cellpadding="0" align="center" style="width:157px;" class="em_wrapper">
<tr>
<td align="center" valign="top" style="padding:0px 10px;"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td class="em_white" align="center" valign="top" style="font-family: 'Roboto', Arial, sans-serif; font-size:14px; line-height:17px; color:#ffffff;padding:8px 0px; "><span style="font-weight:bold;"><Name></span> <br />
<Institution></td>
</tr>
<tr>
<td align="center" valign="top" style="padding-bottom:11px;"><table width="125" border="0" cellspacing="0" cellpadding="0" align="center" style="width:125px;">
<tr>
<td align="center" valign="top" bgcolor="#007f3d" style="border-radius:5px;"><table width="125" border="0" cellspacing="0" cellpadding="0" align="center" style="width:125px;">
<tr>
<td class="em_white" align="center" valign="middle" height="56" style="height:56px; font-family: 'Roboto', Arial, sans-serif; font-size:13px; color:#ffffff; font-weight:bold; "><a href="#" target="_blank" style="text-decoration:none; color:#ffffff; display:block; line-height:16px; ">View Participation<br />
Options</a></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
<td width="12" style="width:12px;" > </td>
<td align="center" valign="top"><table width="157" border="0" cellspacing="0" cellpadding="0" align="left" style="width:157px;" class="em_wrapper">
<tr>
<td align="center" valign="top" style="border: solid 2px #4d4d4d; display:block; border-top-left-radius:5px; border-top-right-radius:5px;"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" class="em_wrapper" >
<tr>
<td height="189" style="height:189px;" align="center" valign="bottom"><img src="https://tieitapp-cdn1.s3.amazonaws.com/home/tieit/domains/app.tieit.io/public_html/assets/img/email/787e8651d36187721fdec8615b8e4463.png" width="145" alt="" height="159" style="display:block; font-family:Arial, sans-serif; font-size:20px; line-height:30px; color:#000000; max-width:145px; height:159px;" class="em_g_img" border="0" /></td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="top" bgcolor="#4d4d4d" style="background-color:#4d4d4d; border-bottom-left-radius:5px; border-bottom-right-radius:5px;"><table width="157" border="0" cellspacing="0" cellpadding="0" align="center" style="width:157px;" class="em_wrapper">
<tr>
<td align="center" valign="top" style="padding:0px 10px;"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td class="em_white" align="center" valign="top" style="font-family: 'Roboto', Arial, sans-serif; font-size:14px; line-height:17px; color:#ffffff;padding:8px 0px; "><span style="font-weight:bold;"><Name></span> <br />
<Institution></td>
</tr>
<tr>
<td align="center" valign="top" style="padding-bottom:11px;"><table width="125" border="0" cellspacing="0" cellpadding="0" align="center" style="width:125px;">
<tr>
<td align="center" valign="top" bgcolor="#007f3d" style="border-radius:5px;"><table width="125" border="0" cellspacing="0" cellpadding="0" align="center" style="width:125px;">
<tr>
<td class="em_white" align="center" valign="middle" height="56" style="height:56px; font-family: 'Roboto', Arial, sans-serif; font-size:13px; color:#ffffff; font-weight:bold; "><a href="#" target="_blank" style="text-decoration:none; color:#ffffff; display:block; line-height:16px; ">View Participation<br />
Options</a></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
<table width="328" border="0" cellspacing="0" cellpadding="0" align="right" style="width:328px;" class="em_wrapper">
<tr>
<td align="center" valign="top" class="em_ptop"><table width="328" border="0" cellspacing="0" cellpadding="0" align="center" style="width:328px;" class="em_w300">
<tr>
<td align="center" valign="top"><table width="157" border="0" cellspacing="0" cellpadding="0" align="left" style="width:157px;" class="em_wrapper">
<tr>
<td align="center" valign="top" height="189" style="height:189px;border: solid 2px #4d4d4d; display:block; border-top-left-radius:5px; border-top-right-radius:5px;"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" class="em_wrapper" >
<tr>
<td height="189" style="height:189px;" align="center" valign="bottom"><img src="https://tieitapp-cdn1.s3.amazonaws.com/home/tieit/domains/app.tieit.io/public_html/assets/img/email/1c43c6297227649ba26e611381191ef9.png" width="145" alt="" height="153" style="display:block; font-family:Arial, sans-serif; font-size:20px; line-height:30px; color:#000000; max-width:145px; height:153px;" class="em_g_img" border="0" /></td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="top" bgcolor="#4d4d4d" style="background-color:#4d4d4d; border-bottom-left-radius:5px; border-bottom-right-radius:5px;"><table width="157" border="0" cellspacing="0" cellpadding="0" align="center" style="width:157px;" class="em_wrapper">
<tr>
<td align="center" valign="top" style="padding:0px 10px;"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td class="em_white" align="center" valign="top" style="font-family: 'Roboto', Arial, sans-serif; font-size:14px; line-height:17px; color:#ffffff;padding:8px 0px; "><span style="font-weight:bold;"><Name></span> <br />
<Institution></td>
</tr>
<tr>
<td align="center" valign="top" style="padding-bottom:11px;"><table width="125" border="0" cellspacing="0" cellpadding="0" align="center" style="width:125px;">
<tr>
<td align="center" valign="top" bgcolor="#007f3d" style="border-radius:5px;"><table width="125" border="0" cellspacing="0" cellpadding="0" align="center" style="width:125px;">
<tr>
<td class="em_white" align="center" valign="middle" height="56" style="height:56px; font-family: 'Roboto', Arial, sans-serif; font-size:13px; color:#ffffff; font-weight:bold; "><a href="#" target="_blank" style="text-decoration:none; color:#ffffff; display:block; line-height:16px; ">View Participation<br />
Options</a></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
<td width="12" style="width:12px;" > </td>
<td align="center" valign="top"><table width="157" border="0" cellspacing="0" cellpadding="0" align="left" style="width:157px;" class="em_wrapper">
<tr>
<td align="center" valign="top" height="189" style="height:189px;border: solid 2px #4d4d4d; display:block; border-top-left-radius:5px; border-top-right-radius:5px;"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" class="em_wrapper" >
<tr>
<td height="189" style="height:189px;" align="center" valign="bottom"><img src="https://tieitapp-cdn1.s3.amazonaws.com/home/tieit/domains/app.tieit.io/public_html/assets/img/email/887a206a411d8ffd17674ffda4b9a939.png" width="145" alt="" height="157" style="display:block; font-family:Arial, sans-serif; font-size:20px; line-height:30px; color:#000000; max-width:145px; height:157px;" class="em_g_img" border="0" /></td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="top" bgcolor="#4d4d4d" style="background-color:#4d4d4d; border-bottom-left-radius:5px; border-bottom-right-radius:5px;"><table width="157" border="0" cellspacing="0" cellpadding="0" align="center" style="width:157px;" class="em_wrapper">
<tr>
<td align="center" valign="top" style="padding:0px 10px;"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td class="em_white" align="center" valign="top" style="font-family: 'Roboto', Arial, sans-serif; font-size:14px; line-height:17px; color:#ffffff;padding:8px 0px; "><span style="font-weight:bold;"><Name></span> <br />
<Institution></td>
</tr>
<tr>
<td align="center" valign="top" style="padding-bottom:11px;"><table width="125" border="0" cellspacing="0" cellpadding="0" align="center" style="width:125px;">
<tr>
<td align="center" valign="top" bgcolor="#007f3d" style="border-radius:5px;"><table width="125" border="0" cellspacing="0" cellpadding="0" align="center" style="width:125px;">
<tr>
<td class="em_white" align="center" valign="middle" height="56" style="height:56px; font-family: 'Roboto', Arial, sans-serif; font-size:13px; color:#ffffff; font-weight:bold; "><a href="#" target="_blank" style="text-decoration:none; color:#ffffff; display:block; line-height:16px; ">View Participation<br />
Options</a></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
<td width="14" style="width:14px;" class="em_side10"> </td>
</tr>
</table></td>
</tr>
<!-- //four column section -->
THE CSS is below:
<style type="text/css">
body { margin: 0; padding: 0; -webkit-text-size-adjust: 100% !important; -ms-text-size-adjust: 100% !important; -webkit-font-smoothing: antialiased !important; }
img { border: 0 !important; outline: none !important; }
td, a, span { border-collapse: collapse; mso-line-height-rule: exactly; }
.ExternalClass * { line-height: 100%; }
.em_defaultlink a { color: inherit !important; text-decoration: none !important; }
.em_black a { text-decoration: none; color: #000000; }
.em_white a { text-decoration: none; color: #ffffff; }
.em_blue a { text-decoration: none; color: #0a75b1; }
.em_grey a { text-decoration: none; color: #4d4d4d; }
.em_g_img + div { display: none; }
#media only screen and (min-width:481px) and (max-width:667px) {
.em_main_table { width: 100% !important; }
.em_wrapper { width: 100% !important; }
.em_hide { display: none !important; }
.em_full_img { width: 100% !important; height: auto !important; }
.em_full_img img { width: 100% !important; height: auto !important; }
.em_side10 { width: 10px !important; }
.em_ptop { padding-top: 20px !important; } /* Padding Left Right Bottom */
.em_h20 { height: 20px !important; font-size: 1px!important; line-height: 1px!important; }
.em_w300 { width: 320px !important; }
.em_w280 { width: 320px !important; }
.em_font_18 { font-size: 27px !important; line-height: 31px !important; }
}
#media screen and (max-width: 480px) {
.em_main_table { width: 100% !important; }
.em_wrapper { width: 100% !important; }
.em_hide { display: none !important; }
.em_full_img { width: 100% !important; height: auto !important; }
.em_full_img img { width: 100% !important; height: auto !important; }
.em_side10 { width: 10px !important; }
.em_side_10 { width: 10px !important; }
.em_ptop { padding-top: 20px !important; } /* Padding Left Right Bottom */
.em_h20 { height: 20px !important; font-size: 1px!important; line-height: 1px!important; }
.em_font_18 { font-size: 18px !important; line-height: 23px !important; }
.em_w300 { width: 300px !important; } /* update the N number as per width */
.em_w280 { width: 300px !important; }
.em_w146 { width: 146px !important; }
.em_aside25 { padding: 0px 25px !important; }
u + .em_body .em_full_wrap { width: 100% !important; width: 100vw !important; }
}
</style>
I don't know what are you trying to do there. I can tell you it is not the right way to do it. Please try to implement Bootstrap. Right now I'm giving you the code you need for the sack of your question.
<tr>
<td align="center" valign="top" bgcolor="#ffffff" style="background-color:#ffffff;"><table width="700" border="0" cellspacing="0" cellpadding="0" align="center" style="width:700px;" class="em_wrapper">
<tr>
<td width="18" style="width:18px;" class="em_side10"> </td>
<td align="center" valign="top"><table width="668" border="0" cellspacing="0" cellpadding="0" align="center" style="width:668px;" class="em_wrapper">
<tr>
<td align="center" valign="top"><table width="328" border="0" cellspacing="0" cellpadding="0" align="left" style="width:328px;" class="em_wrapper">
<tr>
<td align="center" valign="top"><table width="328" border="0" cellspacing="0" cellpadding="0" align="center" style="width:328px;" class="em_w300">
<tr>
<td align="center" valign="top"><table width="157" border="0" cellspacing="0" cellpadding="0" align="left" style="width:157px;" class="em_wrapper">
<tr>
<td align="center" valign="top" style="border: solid 2px #9e9f9f; display:block; "><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" class="em_wrapper" >
<tr><td align="center" valign="top" bgcolor="#9e9f9f" style="background-color:#9e9f9f; color:#fff;">Feature Presenter 1<table width="157" border="0" cellspacing="0" cellpadding="0" align="center" style="width:157px;" class="em_wrapper"></table></td></tr>
<tr>
<td height="189" align="center" valign="bottom" style="height:189px;"><img src="https://tieitapp-cdn1.s3.amazonaws.com/home/tieit/domains/app.tieit.io/public_html/assets/img/email/026696a00d07148ec092a60c0cd8b8d3.png" width="145" alt="" height="163" style="display:block; font-family:Arial, sans-serif; font-size:20px; line-height:30px; color:#000000; max-width:145px; height:163px;" class="em_g_img" border="0" /></td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="top" bgcolor="#4d4d4d" style="background-color:#4d4d4d; border-bottom-left-radius:5px; border-bottom-right-radius:5px;"><table width="157" border="0" cellspacing="0" cellpadding="0" align="center" style="width:157px;" class="em_wrapper">
<tr>
<td align="center" valign="top" style="padding:0px 10px;"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td class="em_white" align="center" valign="top" style="font-family: 'Roboto', Arial, sans-serif; font-size:14px; line-height:17px; color:#ffffff;padding:8px 0px; "><span style="font-weight:bold;"><Name></span> <br />
<Institution></td>
</tr>
<tr>
<td align="center" valign="top" style="padding-bottom:11px;"><table width="125" border="0" cellspacing="0" cellpadding="0" align="center" style="width:125px;">
<tr>
<td align="center" valign="top" bgcolor="#007f3d" style="border-radius:5px;"><table width="125" border="0" cellspacing="0" cellpadding="0" align="center" style="width:125px;">
<tr>
<td class="em_white" align="center" valign="middle" height="56" style="height:56px; font-family: 'Roboto', Arial, sans-serif; font-size:13px; color:#ffffff; font-weight:bold; "><a href="#" target="_blank" style="text-decoration:none; color:#ffffff; display:block; line-height:16px; ">View Participation<br />
Options</a></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
<td width="12" style="width:12px;" > </td>
<td align="center" valign="top"><table width="157" border="0" cellspacing="0" cellpadding="0" align="left" style="width:157px;" class="em_wrapper">
<tr>
<td align="center" valign="top" style="border: solid 2px #9e9f9f; display:block; "><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" class="em_wrapper" >
<tr><td align="center" valign="top" bgcolor="#9e9f9f" style="background-color:#9e9f9f; color:#fff;">Feature Presenter 2<table width="157" border="0" cellspacing="0" cellpadding="0" align="center" style="width:157px;" class="em_wrapper"></table></td></tr>
<tr>
<td height="189" align="center" valign="bottom" style="height:189px;"><img src="https://tieitapp-cdn1.s3.amazonaws.com/home/tieit/domains/app.tieit.io/public_html/assets/img/email/787e8651d36187721fdec8615b8e4463.png" width="145" alt="" height="159" style="display:block; font-family:Arial, sans-serif; font-size:20px; line-height:30px; color:#000000; max-width:145px; height:159px;" class="em_g_img" border="0" /></td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="top" bgcolor="#4d4d4d" style="background-color:#4d4d4d; border-bottom-left-radius:5px; border-bottom-right-radius:5px;"><table width="157" border="0" cellspacing="0" cellpadding="0" align="center" style="width:157px;" class="em_wrapper">
<tr>
<td align="center" valign="top" style="padding:0px 10px;"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td class="em_white" align="center" valign="top" style="font-family: 'Roboto', Arial, sans-serif; font-size:14px; line-height:17px; color:#ffffff;padding:8px 0px; "><span style="font-weight:bold;"><Name></span> <br />
<Institution></td>
</tr>
<tr>
<td align="center" valign="top" style="padding-bottom:11px;"><table width="125" border="0" cellspacing="0" cellpadding="0" align="center" style="width:125px;">
<tr>
<td align="center" valign="top" bgcolor="#007f3d" style="border-radius:5px;"><table width="125" border="0" cellspacing="0" cellpadding="0" align="center" style="width:125px;">
<tr>
<td class="em_white" align="center" valign="middle" height="56" style="height:56px; font-family: 'Roboto', Arial, sans-serif; font-size:13px; color:#ffffff; font-weight:bold; "><a href="#" target="_blank" style="text-decoration:none; color:#ffffff; display:block; line-height:16px; ">View Participation<br />
Options</a></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
<table width="328" border="0" cellspacing="0" cellpadding="0" align="right" style="width:328px;" class="em_wrapper">
<tr>
<td align="center" valign="top" class="em_ptop"><table width="328" border="0" cellspacing="0" cellpadding="0" align="center" style="width:328px;" class="em_w300">
<tr>
<td align="center" valign="top"><table width="157" border="0" cellspacing="0" cellpadding="0" align="left" style="width:157px;" class="em_wrapper">
<tr>
<td align="center" valign="top" style="border: solid 2px #9e9f9f; "><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" class="em_wrapper" >
<tr><td align="center" valign="top" bgcolor="#9e9f9f" style="background-color:#9e9f9f; color:#fff;">Feature Presenter 3<table width="157" border="0" cellspacing="0" cellpadding="0" align="center" style="width:157px;" class="em_wrapper"></table></td></tr>
<tr>
<td height="189" align="center" valign="bottom" style="height:189px;"><img src="https://tieitapp-cdn1.s3.amazonaws.com/home/tieit/domains/app.tieit.io/public_html/assets/img/email/1c43c6297227649ba26e611381191ef9.png" width="145" alt="" height="153" style="display:block; font-family:Arial, sans-serif; font-size:20px; line-height:30px; color:#000000; max-width:145px; height:153px;" class="em_g_img" border="0" /></td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="top" bgcolor="#4d4d4d" style="background-color:#4d4d4d; border-bottom-left-radius:5px; border-bottom-right-radius:5px;"><table width="157" border="0" cellspacing="0" cellpadding="0" align="center" style="width:157px;" class="em_wrapper">
<tr>
<td align="center" valign="top" style="padding:0px 10px;"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td class="em_white" align="center" valign="top" style="font-family: 'Roboto', Arial, sans-serif; font-size:14px; line-height:17px; color:#ffffff;padding:8px 0px; "><span style="font-weight:bold;"><Name></span> <br />
<Institution></td>
</tr>
<tr>
<td align="center" valign="top" style="padding-bottom:11px;"><table width="125" border="0" cellspacing="0" cellpadding="0" align="center" style="width:125px;">
<tr>
<td align="center" valign="top" bgcolor="#007f3d" style="border-radius:5px;"><table width="125" border="0" cellspacing="0" cellpadding="0" align="center" style="width:125px;">
<tr>
<td class="em_white" align="center" valign="middle" height="56" style="height:56px; font-family: 'Roboto', Arial, sans-serif; font-size:13px; color:#ffffff; font-weight:bold; "><a href="#" target="_blank" style="text-decoration:none; color:#ffffff; display:block; line-height:16px; ">View Participation<br />
Options</a></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
<td width="12" style="width:12px;" > </td>
<td align="center" valign="top"><table width="157" border="0" cellspacing="0" cellpadding="0" align="left" style="width:157px;" class="em_wrapper">
<tr>
<td align="center" valign="top" style="border: solid 2px #9e9f9f; "><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" class="em_wrapper" >
<tr><td align="center" valign="top" bgcolor="#4d4d4d" style="background-color:#9e9f9f; color:#fff;">Feature Presenter 4<table width="157" border="0" cellspacing="0" cellpadding="0" align="center" style="width:157px;" class="em_wrapper"></table></td></tr>
<tr>
<td height="189" align="center" valign="bottom" style="height:189px;"><img src="https://tieitapp-cdn1.s3.amazonaws.com/home/tieit/domains/app.tieit.io/public_html/assets/img/email/887a206a411d8ffd17674ffda4b9a939.png" width="145" alt="" height="157" style="display:block; font-family:Arial, sans-serif; font-size:20px; line-height:30px; color:#000000; max-width:145px; height:157px;" class="em_g_img" border="0" /></td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="top" bgcolor="#4d4d4d" style="background-color:#4d4d4d; border-bottom-left-radius:5px; border-bottom-right-radius:5px;"><table width="157" border="0" cellspacing="0" cellpadding="0" align="center" style="width:157px;" class="em_wrapper">
<tr>
<td align="center" valign="top" style="padding:0px 10px;"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td class="em_white" align="center" valign="top" style="font-family: 'Roboto', Arial, sans-serif; font-size:14px; line-height:17px; color:#ffffff;padding:8px 0px; "><span style="font-weight:bold;"><Name></span> <br />
<Institution></td>
</tr>
<tr>
<td align="center" valign="top" style="padding-bottom:11px;"><table width="125" border="0" cellspacing="0" cellpadding="0" align="center" style="width:125px;">
<tr>
<td align="center" valign="top" bgcolor="#007f3d" style="border-radius:5px;"><table width="125" border="0" cellspacing="0" cellpadding="0" align="center" style="width:125px;">
<tr>
<td class="em_white" align="center" valign="middle" height="56" style="height:56px; font-family: 'Roboto', Arial, sans-serif; font-size:13px; color:#ffffff; font-weight:bold; "><a href="#" target="_blank" style="text-decoration:none; color:#ffffff; display:block; line-height:16px; ">View Participation<br />
Options</a></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
<td width="14" style="width:14px;" class="em_side10"> </td>
</tr>
</table></td>
</tr>
<!-- //four column section -->