Removing a 1px gap in Outlook 2013-2016 - outlook

I am trying to get rid of a 1px gap at the far right of a vml graphic that appears in Outlook 2010, 2013, 2016.
I understand that Outlook adds <p></p> automatically to the bottom of the xml, which is why I zeroed out the font-size and the line-height, which fixes the gap at the bottom. Any suggestions on what else might be automatically added that might add the space?
<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v"/>
<v:polyline style="width: 500px; 24px; display: inline-block; padding-right: 0pt; border: 0pt !important;" fillcolor="#563d82" strokecolor="#563d82" strokeweight="0pt" stroke="false" coordorigin="0 0" coordsize="24 500" v:borderrightcolor="#ff0000" points="0pt,24pt, 500pt,24pt, 500pt,0pt, 0pt,24pt">
</v:polyline>
</xml>
Full html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width"/>
</head>
<body>
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0px !important; margin: 0;">
<tr>
<td align="right" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;">
<table cellpadding="0" cellspacing="0" border="0" align="right" width="498" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0pt !important; margin: 0pt; overflow: hidden; display: inline-block;">
<tr align="right">
<td align="right" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; mso-margin-top-alt: 0pt; mso-margin-bottom-alt: 0px; padding: 0px !important; margin: 0; font-size: 0; line-height: 0; display: inline-block;">
<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v"/>
<v:polyline style="width: 500px; 24px; display: inline-block; padding-right: 0pt; border: 0pt !important;" fillcolor="#563d82" strokecolor="#563d82" strokeweight="0pt" stroke="false" coordorigin="0 0" coordsize="24 500" v:borderrightcolor="#ff0000" points="0pt,24pt, 500pt,24pt, 500pt,0pt, 0pt,24pt">
</v:polyline>
</xml>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table bgcolor="#563d82" width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0px !important; margin: 0;">
<tr>
<td align="center">
<p class="footerlink" style="padding: 0px; color: #ffffff; font-size: 18px; line-height: 22px; text-align: left;">Placeholder text.</p>
</td>
</tr>
</table>
</body>
</html>
I should add this html is only visible in Outlook. I have a css graphic that covers every other browser. Too bad that doesn't work with Outlook.


Replacing the two tables for right alignment fixes the 1px gap on the far right.
<div align="right" style="font-size: 0; line-height: 0;">
<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v"/>
<v:polyline fillcolor="#563d82" strokeweight="0pt" stroke="false" strokecolor="#563d82" style="font-size: 0; line-height: 0;" points="0pt,25pt 500pt,25pt 500pt,0pt 0pt,25pt"></v:polyline>
</xml>
</div>
This fixes the alignment issue for Outlook 2016 and Windows 10 Mail, but it leaves a hairline white line between the vml graphic and the table for Outlook 2010 and 2013. I have tried adding css and table borders, but it doesn't fix the problem.

Related

How to stack an image on top of text to create a single column when it's responsive?

How do I make it appear that the image is stacked on top of the text when in a responsive view (anything less than <600px width will turn it into the second example)? Is this possible with a table?
to this:
'''
<td align="left" style="border-bottom:0px solid #FFFFFF; background-color: #ffffff;" valign="middle" width="50%">
<p style="font-family: Gibson, arial; color: #222222; font-size: 18px; font-weight: 600; margin: 2em .75em 1em 1.25em; text-align: ; letter-spacing: .25px; text-transform: uppercase; line-height: 1.1;">2023 Summer Category Catalog</p>
<p style="font-family: Gibson, arial; color: #222222; font-size: 16px; margin: .75em 1.5em .5em 1.5em; text-align: ; line-height: 1.6;">Shop by category and browse hundreds of new home and garden decor pieces that celebrate the hot summer days, including one-of-a-kind planters, pillows, and more!
<p style="font-family: Gibson,Arial, Helvetica, sans-serif;font-size: 14px; margin: .75em 1.5em 1.5em 1.5em; text-align: ; letter-spacing: 2px; color:#FFFFFF; background-color: #ffffff">
<span style="color:#006346;">SHOP NOW</span>
</p>
<hr align="left" style="border: none; border-top: 2px solid #A8CA59; width: 50px; margin: 2em .75em 1em 1.25em;">
</td>
</tr>
<tr>
<td align="center" style="background-color: #ffffff; height:40px;">
<table align="left" border="0" cellpadding="0" cellspacing="0">
<tbody><tr>
<td align="center"></td>
</tr>
</tbody></table>
</td>
</tr>
'''

Salesforce email template does not display correctly in Outlook 2016

I created an email template using Marketing Cloud. When I sent it to myself using Outlook Web App, everything looked good (first image), however when I used Microsoft Outlook 2016, it was not good (second image). I googled it but the results were not much helpful. I appreciate any help.Through Outlook Web Access (good)
Through Microsoft Outlook 2016
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
ReadMsgBody{ width: 100%;}
.ExternalClass {width: 100%;}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}
body {-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;margin:0 !important;}
p { margin: 1em 0;}
table td { border-collapse: collapse;}
img {outline:0;}
a img {border:none;}
#-ms-viewport{ width: device-width;}
</style>
<style type="text/css">
#media only screen and (max-width: 480px) {
.container {width: 100% !important;}
.footer { width:auto !important; margin-left:0; }
.mobile-hidden { display:none !important; }
.logo { display:block !important; padding:0 !important; }
img { max-width:100% !important; height:auto !important; max-height:auto !important;}
.header img{max-width:100% !important;height:auto !important; max-height:auto !important;}
.photo img { width:100% !important; max-width:100% !important; height:auto !important;}
.drop { display:block !important; width: 100% !important; float:left; clear:both;}
.footerlogo { display:block !important; width: 100% !important; padding-top:15px; float:left; clear:both;}
.nav4, .nav5, .nav6 { display: none !important; }
.tableBlock {width:100% !important;}
.responsive-td {width:100% !important; display:block !important; padding:0 !important; }
.fluid, .fluid-centered {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin-left: auto !important;
margin-right: auto !important;
}
.fluid-centered {
margin-left: auto !important;
margin-right: auto !important;
}
/* MOBILE GLOBAL STYLES - DO NOT CHANGE */
body { padding: 0px !important; font-size: 16px !important; line-height: 150% !important;}
h1 { font-size: 22px !important; line-height: normal !important;}
h2 { font-size: 20px !important; line-height: normal !important;}
h3 { font-size: 18px !important; line-height: normal !important;}
.buttonstyles {
font-family:arial,helvetica,sans-serif !important;
font-size: 16px !important;
color: #FFFFFF !important;
padding: 10px !important;
}
/* END OF MOBILE GLOBAL STYLES - DO NOT CHANGE */
}
#media only screen and (max-width: 640px) {
.container { width:100% !important; }
.mobile-hidden { display:none !important; }
.logo { display:block !important; padding:0 !important; }
.photo img { width:100% !important; height:auto !important;}
.nav5, .nav6 { display: none !important;}
.fluid, .fluid-centered {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin-left: auto !important;
margin-right: auto !important;
}
.fluid-centered {
margin-left: auto !important;
margin-right: auto !important;
}
}
</style>
<!--[if mso]>
<style type="text/css">
/* Begin Outlook Font Fix */
body, table, td {
font-family: Arial, Helvetica, sans-serif ;
font-size:16px;
color:#808080;
line-height:1;
}
/* End Outlook Font Fix */
</style>
<![endif]-->
</head>
<body bgcolor="#efefef" text="#808080" style="background-color: #efefef; color: #808080; margin: 0px; padding: 20px; -webkit-text-size-adjust:none; line-height: normal; font-size: 16px; font-family:arial,helvetica,sans-serif;">
<div style="font-size:0; line-height:0;"><custom name="opencounter" type="tracking"><custom name="usermatch" type="tracking" /></div>
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td align="center" valign="top">
<custom type="header" />
</td>
</tr>
<tr>
<td align="center">
<table cellspacing="0" cellpadding="0" border="0" width="600" class="container" align="center">
<tr>
<td>
<!-- added the border style here -->
<table class="tb_properties border_style" cellspacing="0" cellpadding="0" bgcolor="#ffffff" width="100%">
<!-- end of comment -->
<tr>
<td align="center" valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<!-- added padding here -->
<td class="content_padding" style="padding:10px;border:0px;">
<!-- end of comment -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="left" class="header" valign="top">
<table role="presentation" style="background-color: transparent; min-width: 100%; border-top: 0px; border-right: 0px; border-bottom: 1px solid #AEAEAE; border-left: 0px; " class="slot-styling" width="100%" cellspacing="0" cellpadding="0"><tr><td style="padding: 0px 0px 20px; " class="slot-styling camarker-inner"><table role="presentation" style="min-width: 100%; " class="stylingblock-content-wrapper" width="100%" cellspacing="0" cellpadding="0"><tr><td class="stylingblock-content-wrapper camarker-inner"><table role="presentation" width="100%" cellspacing="0" cellpadding="0"><tr><td align="center"><img data-assetid="203679" src="https://image.e.iu.edu/lib/fe3511717d64047c7c1571/m/1/e284216b-10f3-4005-aab4-c13a0ee758ff.png" alt="" style="display: block; padding: 0px; text-align: center; height: auto; width: 100%; border: 0px none transparent;" width="636"></td></tr></table></td></tr></table></td></tr></table>
</td>
</tr>
<tr>
<td align="left" class="" valign="top">
<table role="presentation" style="border-bottom: 1px solid #AEAEAE; min-width: 100%; " class="slot-styling" width="100%" cellspacing="0" cellpadding="0"><tr><td style="padding-top: 10px; padding-bottom: 10px; " class="slot-styling camarker-inner"><table role="presentation" style="min-width: 100%; " class="stylingblock-content-wrapper" width="100%" cellspacing="0" cellpadding="0"><tr><td style="padding-top: 10px; padding-right: 10px; padding-left: 10px; " class="stylingblock-content-wrapper camarker-inner"><table style="width: 100%;" cellspacing="0" cellpadding="0"><tr><td><table style="width: 100%;" cellspacing="0" cellpadding="0"><tr><td class="responsive-td" style="width: 100%;" valign="top"><table role="presentation" style="text-align: left; background-color: transparent; min-width: 100%; " class="stylingblock-content-wrapper" width="100%" cellspacing="0" cellpadding="0"><tr><td style="padding: 0px; " class="stylingblock-content-wrapper camarker-inner" align="left"><h1 style="font-family: Arial, helvetica, sans-serif; font-size: 28px; color: rgb(128, 128, 128); line-height: 1; font-weight: bold; font-style: normal; text-align: center;">
Happy New Year!</h1><div>
<span style="font-size:11pt"><span style="line-height:107%"><span style="font-family:Calibri,sans-serif"><span style="font-family:" verdana=""><span style="font-size:11pt"><span style="line-height:107%"><span style="font-family:Calibri,sans-serif"><span style="font-family:"Verdana",sans-serif">Dear %%=IIF(Not empty(FirstName), FirstName, '</span></span></span></span></span></span></span></span> <span style="font-size:11pt"><span style="line-height:107%"><span style="font-family:Calibri,sans-serif"><span style="font-family:" verdana="">colleague and friend of NALRC</span></span></span></span><span style="font-size:11pt"><span style="line-height:107%"><span style="font-family:Calibri,sans-serif"><span style="font-family:" verdana=""><span style="font-size:11pt"><span style="line-height:107%"><span style="font-family:Calibri,sans-serif"><span style="font-family:" verdana="">')=%%,<br>
<br>
As we begin year 2021, we at NALRC wish you a healthy and happy New Year, with a sincere wish that 2021 will </span><span style="font-family:"Verdana",sans-serif">bring you much health, happiness and prosperity!</span></span></span></span><br>
<br>
<span style="font-size:11pt"><span style="line-height:107%"><span style="font-family:Calibri,sans-serif"><span style="font-family:"Verdana",sans-serif">This year, our center will continue to work with you on unique programs and projects that support African language teaching and learning. A couple of </span><span style="font-family:"Verdana",sans-serif">exciting new projects are underway for which we would be calling for your contributions. </span></span><span style="font-family:"Verdana",sans-serif">Among our upcoming workshops are:</span></span></span><br>
</span></span></span></span></div></td></tr></table></td></tr></table></td></tr></table></td></tr></table><table role="presentation" style="min-width: 100%; " class="stylingblock-content-wrapper" width="100%" cellspacing="0" cellpadding="0"><tr><td style="padding-top: 10px; padding-right: 10px; padding-left: 10px; " class="stylingblock-content-wrapper camarker-inner"><table style="width: 100%;" cellspacing="0" cellpadding="0"><tr><td><table style="width: 100%;" cellspacing="0" cellpadding="0"><tr><td class="responsive-td" style="width: 50%; padding-right: 10px;" valign="top"><table role="presentation" style="text-align: left; min-width: 100%; " class="stylingblock-content-wrapper" width="100%" cellspacing="0" cellpadding="0"><tr><td class="stylingblock-content-wrapper camarker-inner" align="left"><h3 style="font-family : Arial,helvetica,sans-serif; font-size : 20px; color : #808080; line-height : 1; font-weight : bold; font-style : normal; ">
The NALRC Annual Summer Institute</h3><span style="font-size:11pt"><span style="line-height:107%"><span style="font-family:Calibri,sans-serif"><span style="font-family:"Verdana",sans-serif">This two-week foreign language teaching methodology training program, which is organized for instructors of African languages, is packed with educative activities that allow you to participate in and gain professional development.</span></span></span></span><br>
</td></tr></table><table role="presentation" style="min-width: 100%; " class="stylingblock-content-wrapper" width="100%" cellspacing="0" cellpadding="0"><tr><td style="padding-bottom: 10px; " class="stylingblock-content-wrapper camarker-inner"><table role="presentation" width="100%" cellspacing="0" cellpadding="0"><tr><td align="center"><img data-assetid="203681" src="https://image.e.iu.edu/lib/fe3511717d64047c7c1571/m/1/1c8e33c8-9dbc-4794-8c46-fd7dd78218c3.jpg" alt="" style="display: block; height: auto; width: 100%; padding: 4px; text-align: center;" width="100%"></td></tr></table></td></tr></table><table role="presentation" style="min-width: 100%; " class="stylingblock-content-wrapper" width="100%" cellspacing="0" cellpadding="0"><tr><td style="padding-top: 10px; padding-bottom: 10px; " class="stylingblock-content-wrapper camarker-inner"><table role="presentation" width="100%" cellspacing="0" cellpadding="5" border="0"><tr><td align="left"><table role="presentation" cellspacing="0" cellpadding="0" border="0"><tr><td class="innertd buttonblock" style=" border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; background-color: #5D5D5D;" bgcolor="#5D5D5D"><a target="_blank" style=" font-size: 16px; font-family: Arial, Helvetica, sans-serif; color: #FFFFFF; text-align: left; text-decoration: none; display: block; background-color: #5D5D5D; border: 1px solid #5D5D5D; padding: 10px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;" class="buttonstyles" href="https://nalrc.indiana.edu/prof-dev/summer-institute.html" title="" alias="" conversion="false" data-linkto="https://">Learn More and Apply</a></td></tr></table></td></tr></table></td></tr></table></td><td class="responsive-td" style="width: 50%; padding-left: 10px;" valign="top"><table role="presentation" style="min-width: 100%; " class="stylingblock-content-wrapper" width="100%" cellspacing="0" cellpadding="0"><tr><td style="padding-bottom: 10px; " class="stylingblock-content-wrapper camarker-inner"><table role="presentation" width="100%" cellspacing="0" cellpadding="0"><tr><td align="center"><img data-assetid="203683" src="https://image.e.iu.edu/lib/fe3511717d64047c7c1571/m/1/3c73118a-d927-4361-8ba0-066926bf3cc4.jpg" alt="" style="display: block; padding: 0px; text-align: center; height: auto; width: 100%; border: 0px none transparent;" width="557"></td></tr></table></td></tr></table><table role="presentation" style="text-align: left; background-color: transparent; min-width: 100%; " class="stylingblock-content-wrapper" width="100%" cellspacing="0" cellpadding="0"><tr><td style="padding: 0px; " class="stylingblock-content-wrapper camarker-inner" align="left"><h3 style="font-family : Arial,helvetica,sans-serif; font-size : 20px; color : #808080; line-height : 1; font-weight : bold; font-style : normal; ">
The Business in World Languages Workshop</h3>This workshop is designed to introduce you to the “World Language Curriculum Framework that Incorporates Business Concept” at the Elementary and Intermediate Levels of language instruction and train you on how to use the document.</td></tr></table><table role="presentation" style="min-width: 100%; " class="stylingblock-content-wrapper" width="100%" cellspacing="0" cellpadding="0"><tr><td style="padding-top: 10px; padding-bottom: 10px; " class="stylingblock-content-wrapper camarker-inner"><table role="presentation" width="100%" cellspacing="0" cellpadding="5" border="0"><tr><td align="left"><table role="presentation" cellspacing="0" cellpadding="0" border="0"><tr><td class="innertd buttonblock" style=" border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; background-color: #5D5D5D;" bgcolor="#5D5D5D" align="center"><a target="_blank" style=" text-decoration: none; display: block; font-family: Arial, Helvetica, sans-serif; font-size: 16px; color: #FFFFFF; text-align: left; background-color: #5D5D5D; border: 1px solid #5D5D5D; padding: 10px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;" class="buttonstyles" href="https://nalrc.indiana.edu/prof-dev/business-in-language1.html" title="" alias="" conversion="false" data-linkto="https://">Learn More and Apply</a></td></tr></table></td></tr></table></td></tr></table></td></tr></table></td></tr></table></td></tr></table><table role="presentation" style="background-color: transparent; border: 2px solid #000000; min-width: 100%; " class="stylingblock-content-wrapper" width="100%" cellspacing="0" cellpadding="0"><tr><td style="padding: 0px 10px 11px; " class="stylingblock-content-wrapper camarker-inner"><h3 style="font-family : Arial,helvetica,sans-serif; font-size : 20px; color : #808080; line-height : 1; font-weight : bold; font-style : normal; ">
<a alias="African Language Experts&#x27; List" conversion="false" data-linkto="https://" href="https://hls.indiana.edu/machform/view.php?id=216441" style="color:#808080;text-decoration:none;" title="African Language Experts' List">African Language Experts' List</a></h3><div>
<span style="font-size:11pt"><span style="line-height:107%"><span style="font-family:Calibri,sans-serif"><span style="font-family:"Verdana",sans-serif">The NALRC is frequently contacted by different organizations and individuals to request for speakers and specialists of various African languages. We are revamping the NALRC’s list of African language scholars, native speakers, and instructors who are available to serve as translators, interpreters for courts, hospitals, government and non-government agencies, oral proficiency testers for government agencies, and heritage learners nationwide. Please fill out this form to join the list. This list will be maintained and regularly updated by our Center. </span></span></span></span></div></td></tr></table><table role="presentation" style="min-width: 100%; " class="stylingblock-content-wrapper" width="100%" cellspacing="0" cellpadding="0"><tr><td class="stylingblock-content-wrapper camarker-inner"><table role="presentation" width="100%" cellspacing="0" cellpadding="5" border="0"><tr><td align="center"><table role="presentation" cellspacing="0" cellpadding="0" border="0"><tr><td class="innertd buttonblock" style=" border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; background-color: #5D5D5D;" bgcolor="#5D5D5D" align="center"><a style=" text-decoration: none; display: block; font-family: Arial, helvetica, sans-serif; font-size: 16px; color: #FFFFFF; text-align: center; background-color: #5D5D5D; border: 1px solid #5D5D5D; padding: 10px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;" target="_blank" class="buttonstyles" href="https://hls.indiana.edu/machform/view.php?id=216441" title="" alias="" conversion="false" data-linkto="https://">Join the List</a></td></tr></table></td></tr></table></td></tr></table></td></tr></table>
</td>
</tr>
<tr>
<td align="left" class="" valign="top">
<table role="presentation" style="border-bottom: 1px solid #AEAEAE; min-width: 100%; " class="slot-styling" width="100%" cellspacing="0" cellpadding="0"><tr><td style="padding-top: 10px; padding-bottom: 10px; " class="slot-styling camarker-inner"><table role="presentation" style="background-color: transparent; min-width: 100%; " class="stylingblock-content-wrapper" width="100%" cellspacing="0" cellpadding="0"><tr><td style="padding: 11px; " class="stylingblock-content-wrapper camarker-inner"><br>
<span style="font-size:11pt"><span style="line-height:107%"><span style="font-family:Calibri,sans-serif"><span style="font-family:"Verdana",sans-serif">We invite you to <a alias="visit our website" conversion="false" data-linkto="https://" href="https://nalrc.indiana.edu/index.html" style="color:#808080;text-decoration:none;" title="visit our website"><span style="color:#2980b9;">visit our website</span></a> for important information about our current news and events, professional development opportunities, teaching and learning resources, and networks of African language professionals.</span></span></span></span><br>
</td></tr></table><table role="presentation" style="text-align: left; min-width: 100%; " class="stylingblock-content-wrapper" width="100%" cellspacing="0" cellpadding="0"><tr><td class="stylingblock-content-wrapper camarker-inner" align="left"><table class="socialshare-wrapper" width="100%" cellspacing="0" cellpadding="0"><tr> <td><table cellspacing="0" cellpadding="0" align="center"><tr><td align="center"><!--[if mso]><table border="0" cellspacing="0" cellpadding="0"><tr><td style="padding-right:10px;"><![endif]--><table class="socialshare-innertable" style="display: inline-block"><tr><td style="padding:5px 10px"><img src="https://image.exct.net/lib/fe5f15707267027a7712/m/1/socialshare-facebook-grey-2x.png" alt="Facebook" style="display: block;; width: 24px !important; height: 24px !important" width="24" height="24"></td></tr></table><!--[if mso]></td><td style="padding-right:10px;"><![endif]--><table class="socialshare-innertable" style="display: inline-block"><tr><td style="padding:5px 10px"><img src="https://image.exct.net/lib/fe5f15707267027a7712/m/1/socialshare-twitter-grey-2x.png" alt="Twitter" style="display: block;; width: 24px !important; height: 24px !important" width="24" height="24"></td></tr></table><!--[if mso]></td><td style="padding-right:10px;"><![endif]--><table class="socialshare-innertable" style="display: inline-block"><tr><td style="padding:5px 10px"><img src="https://image.exct.net/lib/fe5f15707267027a7712/m/1/socialshare-pinterest-grey-2x.png" alt="Pinterest" style="display: block;; width: 24px !important; height: 24px !important" width="24" height="24"></td></tr></table><!--[if mso]></td><td><![endif]--><table class="socialshare-innertable" style="display: inline-block"><tr><td style="padding:5px 10px"><img src="https://image.exct.net/lib/fe5f15707267027a7712/m/1/socialshare-instagram-grey-2x.png" alt="Instagram" style="display: block;; width: 24px !important; height: 24px !important" width="24" height="24"></td></tr></table><!--[if mso]></td></tr></table><![endif]--></td></tr></table></td></tr></table></td></tr></table></td></tr></table>
</td>
</tr>
<tr>
<td align="left" class="" valign="top">
<table role="presentation" style="min-width: 100%; " class="slot-styling" width="100%" cellspacing="0" cellpadding="0"><tr><td style="padding-top: 20px; " class="slot-styling camarker-inner"><table role="presentation" style="text-align: center; min-width: 100%; " class="stylingblock-content-wrapper" width="100%" cellspacing="0" cellpadding="0"><tr><td class="stylingblock-content-wrapper camarker-inner" align="center"><div style="text-align: center;">
<a alias="" conversion="false" href="http://" style="color:#808080;text-decoration:none;" title="">LINK</a> | <a alias="" conversion="false" href="http://" style="color:#808080;text-decoration:none;" title="">LINK</a> | <a alias="" conversion="false" href="http://" style="color:#808080;text-decoration:none;" title="">LINK</a></div></td></tr></table></td></tr></table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top">
<custom type="footer" />
</td>
</tr>
</table>
</body>
</html>

Looks like you have a very wide image:
<img data-assetid="203679" src="https://image.e.iu.edu/lib/fe3511717d64047c7c1571/m/1/e284216b-10f3-4005-aab4-c13a0ee758ff.png" alt="" style="display: block; padding: 0px; text-align: center; height: auto; width: 100%; border: 0px none transparent;" width="636">
What Outlook will do is, regardless of your CSS (inline like style="..." or the embedded CSS, as in <style>...</style>), insert it as 636 pixels wide (the width="..."), pushing the template out to the width as your screenshot shows it.
Instead, ensure you have the width attribute set for Outlook, and then the inline styles for everything else (100%, for example, to be responsive).
There may be more images that are too wide - I just pulled out the first I could find.

NVDA not reading text with background images in Outlook

I've been trying to make our emails more accessible but NVDA seems to have trouble reading text when there's a background image in Outlook. Could it be because of the VML or something else? NVDA can read it when I view in browser, but I feel like I shouldn't rely on that being used. I haven't been able to find a lot about email accessibility best practices, and nothing that discusses this issue I'm having. I'm fairly new to this so any suggestions would be appreciated.
Thanks!
<table role="presentation" class="container_module" id="heroWCTA" border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="margin:0; vertical-align:top;">
<tbody>
<tr>
<td align="center" valign="top" width="100%" background="https://via.placeholder.com/660x220" style=" background-image:url(https://via.placeholder.com/660x220); background-repeat:no-repeat; background-size:cover; background-position: center center; margin: 0;">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:640px; height:210px;">
<v:fill type="frame" src="https://via.placeholder.com/660x220" />
<v:textbox inset="10,10,10,10" v-text-anchor="top">
<![endif]-->
<table role="presentation" align="center" width="100%" border="0" cellpadding="0" cellspacing="0" style="vertical-align:top;">
<tbody>
<tr>
<td class="padding_top_60 padding_right_110 padding_bottom_12 padding_left_17 text_18_18" width="100%" valign="top" align="left" style="color:#ffffff; vertical-align:top; padding: 30px 15px 15px 32px; margin:0; font-family:Arial, Helvetica, sans-serif; font-size:22px; line-height: 22px; -webkit-text-size-adjust:none;">
<div id="heroText">
<h2 class="text_18_18" style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:22px; line-height: 22px; color:#ffffff; margin:0;"><b>Lorem ipsum<br> dolor sit amet,<br> coctetuer adipiscing<br> elit</b></h2>
</div> </td>
</tr>
<tr>
<td class="padding_bottom_60" width="100%" align="left" style="padding-bottom: 25px; margin: 0;">
<table role="presentation" border="0" width="100%" cellpadding="0" cellspacing="0" style="vertical-align:top; margin: 0; padding: 0;">
<tbody>
<tr>
<td class="content_17" width="32" align="left" style="padding: 0; margin: 0;font-family: Arial, Helvetica, sans-serif; font-size: 10px; line-height: 10px; width: 32px;"> </td>
<td align="left" style="padding: 0; margin: 0;">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" style="vertical-align:top; margin: 0; padding: 0;">
<tbody>
<tr>
<td class="height_22" height="28" width="100%" align="center" border="2" valign="middle" style=" vertical-align:middle; font-family: Arial, Helvetica, sans-serif; color:#ffffff; font-size:12px; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; border: 2px solid #00aeef; background-color:#00aeef;">
<!--[if mso]>
<table>
<tr>
<td style="background-color: #00aeef; padding: 7px 10px; text-align: center;"><![endif]--><a class="height_22" role="button" href=
"http://go.na.panasonic.com/SU0K1G00F0005J01H00G00O" style="
text-decoration:none; color:#ffffff; font-family: Arial, Helvetica, sans-serif; font-size:12px; line-height: 12px; vertical-align:middle; height:28px; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; padding:7px 10px; "
><b>Learn More</b></a><br>
<!--[if mso]></td>
</tr>
</table>
<![endif]--></td>
</tr>
</tbody>
</table> </td>
<td class="content_17" width="32" align="right" style="padding: 0; margin: 0;font-family: Arial, Helvetica, sans-serif; font-size: 10px; line-height: 10px; width: 32px;"> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table>
<!--[if gte mso 9]></v:textbox></v:rect><![endif]--> </td>
</tr>
</tbody>
</table>

How can I make the images equal width [duplicate]

This question already has answers here:
Equal sized table cells to fill the entire width of the containing table
(4 answers)
Closed 5 years ago.
I'm trying to control the images inside the table and keep them on the same level and same width when screen size down. This will be used for email, so I would avoid global styles like td width so other elements in the email wont be effected.
The code I am using is:
#media only screen and (max-width:414px) {
.mobile {
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
}
<table border="" align="center" cellpadding="0" cellspacing="0" class="mobile" width="600">
<tr>
<td style="text-align: center;">
<h4 style="line-height: 1.2; margin-bottom: 15px; padding: 0 5px"> First title here </h4>
<img src="http://via.placeholder.com/200x160/000" style="width: 100%;" />
</td>
<td style="text-align: center;">
<h4 style="line-height: 1.2; margin-bottom: 15px; padding: 0 5px"> SECOND TITLE HERE IN THE MIDDLE</h4>
<img src="http://via.placeholder.com/200x160/00c" style="width: 100%;" />
</td>
<td style="text-align: center;">
<h4 style="line-height: 1.2; margin-bottom: 15px; padding: 0 5px ">THEN THIRD TITLE HERE</h4>
<img src="http://via.placeholder.com/200x160/c00" style="width: 100%;" />
</td>
</tr>
</table>

Just apply width: 33.33%; to the table cells.
And if you want the images be aligned to the bottom, add vertical-align: bottom; to the cells and apply display: block to the images:
td {
width: 33.33%;
vertical-align: bottom;
}
td img {
display: block;
}
#media only screen and (max-width:414px) {
.mobile {
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
}
<table border="" align="center" cellpadding="0" cellspacing="0" class="mobile" width="600">
<tr>
<td style="text-align: center;">
<h4 style="line-height: 1.2; margin-bottom: 15px; padding: 0 5px"> First title here </h4>
<img src="http://via.placeholder.com/200x160/000" style="width: 100%;" />
</td>
<td style="text-align: center;">
<h4 style="line-height: 1.2; margin-bottom: 15px; padding: 0 5px"> SECOND TITLE HERE IN THE MIDDLE</h4>
<img src="http://via.placeholder.com/200x160/00c" style="width: 100%;" />
</td>
<td style="text-align: center;">
<h4 style="line-height: 1.2; margin-bottom: 15px; padding: 0 5px ">THEN THIRD TITLE HERE</h4>
<img src="http://via.placeholder.com/200x160/c00" style="width: 100%;" />
</td>
</tr>
</table>

The part that was breaking the layout was the text above the images. Try moving it above the images on its seperate row, give it a height and everything works.
#media only screen and (max-width:414px) {
.mobile {
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
}
<table border="" align="center" cellpadding="0" cellspacing="0" class="mobile" width="600">
<tr>
<td style="text-align: center; height: 20px;" height="20"><h4 style="line-height: 1.2; margin-bottom: 15px; padding: 0 5px"> First title here </h4></td>
<td style="text-align: center; height: 20px;" height="20"><h4 style="line-height: 1.2; margin-bottom: 15px; padding: 0 5px"> SECOND TITLE HERE IN THE MIDDLE</h4></td>
<td style="text-align: center; height: 20px;" height="20"><h4 style="line-height: 1.2; margin-bottom: 15px; padding: 0 5px ">THEN THIRD TITLE HERE</h4></td>
</tr>
<tr>
<td width="33%" style="text-align: center;">
<img src="http://via.placeholder.com/200x160/000" style="width: 100%;" />
</td>
<td width="33%" style="text-align: center;">
<img src="http://via.placeholder.com/200x160/00c" style="width: 100%;" />
</td>
<td width="33%" style="text-align: center;">
<img src="http://via.placeholder.com/200x160/c00" style="width: 100%;" />
</td>
</tr>
</table>
Let me know if this works for you.

padding not respected in outlook on button

I have an anchor link with padding:
Discover your 3D
But outlook doesn't respect this padding, it's just removed, what's the best solution to not mess up the design in other clients.

Outlook's support for the box model is... sketchy. Try this code:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#137191" style="padding: 16px; border-radius:4px">
Discover your 3D
</td>
</tr>
</table>
</td>
</tr>
</table>
This will solve your collapsing padding issue in Outlook. Outlook will still display squared-off corners instead of border-radius, but at least you'll get a padded button that is clickable.
(I added/edited a few other properties to help cross-client display)
There are a few way to achieve bulletproof buttons in email if you prefer another method.

For some reason padding on the a-tag in Outlook only works when you combine with a 1px border and display inline-block. Then you need the td to share the same background-color and width as the button to fill out the clickable area.
<table align="center">
<tbody>
<tr>
<td style="background-color: #0079c8;" width="140px">Log in ></td>
</tr>
</tbody>
</table>

I got button code example from microsoft template:
<tr>
<td style="padding: 0px 0px 40px;">
<table align="center" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" style="padding-bottom: 0px !important; margin-bottom: 0px !important;" cellspacing="0" border="0" cellpadding="0">
<a class="fixLinkWhite" style='text-align: center; color: rgb(255, 255, 255); line-height: 19px; font-family: "Segoe UI Semibold", wf_segoe-ui_semibold, "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif; font-size: 16px; font-weight: 500; display: inline-block;' href="https://emea01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fclick.mail.onedrive.com%2F%3Fqs%3D66fc70d9e5f1a53dc4a2197021906f0dbfd56c5f6063855eacb5b2236fdb95cce118e2452e0763745ec595025acd785afd06ff9ac40a30e8&data=04%7C01%7C%7C1da4d1818b194c2ce45508d9b586e09f%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637740413170283041%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000&sdata=P48lMVNNmii3puOCtHjGAGqjBauzZvUfKua%2F0hsS2Z0%3D&reserved=0" target="_blank" shash="lVj7xGxKkteyQkNqUIWVOtfqS5bLgunSFQJWPeQ+a+jLeZJ0lydeWcm1fiSFwJLd6OvwJNV2YVATqaHA5r9xyo2q+4/ssBdAEfVO93OqZLe1Ol46wxjFEMaqebYBsJUqECxQiHgCvIo9cZ9OSacRvZS6y6UiyPLq3xDoiAJGDzc=" originalsrc="https://click.mail.onedrive.com/?qs=66fc70d9e5f1a53dc4a2197021906f0dbfd56c5f6063855eacb5b2236fdb95cce118e2452e0763745ec595025acd785afd06ff9ac40a30e8">
<p class="fixLinkWhite" style="padding: 10px 0px; border: 1px solid rgb(0, 120, 215); border-image: none; color: rgb(255, 255, 255); line-height: 19px; font-size: 16px; font-weight: 500; display: inline-block; background-color: rgb(0, 120, 215);"> Перейти в ваш OneDrive </p>
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>

Resources