I'm experiencing an issue with Outlook 2013 (and 2007). The image shows the issue. Providing partial HTML below.
I've tested in Litmus as well and this is only showing up in 2013/2007. I can't seem to isolate what the issue could be and I'm hoping a 2nd pair of eyes will help.
<td width="270" style="vertical-align: top; text-align: left; font-size: 14px; line-height: 19px; padding: 0;" align="left" valign="top">
<table width="100%" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; padding: 0;">
<tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
<td style="color: #ffffff; vertical-align: top; text-align: left; font-size: 14px; line-height: 19px; padding: 0;" align="left" valign="top">
<table style="width: 100%; border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; padding: 0;">
<tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
<td style="vertical-align: top; text-align: left; font-size: 14px; line-height: 19px; padding: 0;" align="left" valign="top">
<img src="table-topper.jpg" alt="" width="270" height="20" style="display: block; outline: 0;">
</td>
</tr>
<tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
<td width="100%" style="background-color:#5b8f20;vertical-align: top; text-align: left; font-size: 14px; line-height: 19px; padding: 0 20px;width:230px;" align="left" valign="top">
<h2 style="text-align: center; font-size: 33px; font-weight: normal; text-transform: uppercase; font-family: Arial, Helvetica, sans-serif;color: #ffffff;padding-bottom: 20px; border-bottom-width: 2px; border-bottom-color: #ffffff; border-bottom-style: solid; margin: 0 0 15px;" align="center" class="h2">Dragons VIP</h2>
<p style="border-bottom-color: #ffffff; border-bottom-width: 2px; border-bottom-style: solid; font-size: 16px; font-family: Arial, Helvetica, sans-serif; text-align: left; line-height: 22px; margin: 0 0 10px; padding: 0 0 20px; color:#ffffff;" align="left">
<strong>
Thursday, August 20, 2015
<br> 11:30am–1:00pm
<br> Fifth Third Field
</strong>
</p>
<p style="color:#ffffff;font-size: 14px; font-family: Arial, Helvetica, sans-serif; text-align: left; line-height: 22px; margin: 0 0 10px; padding: 0;" align="left">Space is limited, so don't delay. To RSVP, compliments of Fifth Third Bank, please contact Colleen Santella with the Dayton Dragons by August 13th.</p>
<p style="font-size: 16px; font-family: Arial, Helvetica, sans-serif; text-align: left; line-height: 22px; margin: 0 0 10px; padding: 0;" align="left">
<a href="mailto:xxx.xxx#xxx.com">
<img src="rsvp-btn.png" alt="" width="230" height="52" style="display: block; outline: 0;">
</a>
</p>
<p style="color:#ffffff;font-size: 14px; font-family: Arial, Helvetica, sans-serif; text-align: left; line-height: 22px; margin: 0 0 10px; padding: 0;" align="left">xxx.xxx#daytondragons.com or at (xxx) xxx-xxxx x 112</p>
</td>
</tr>
<tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
<td style="vertical-align: top; text-align: left; font-size: 14px; line-height: 19px; padding: 0;" align="left" valign="top">
<img src="table-bot.jpg" alt="" width="270" height="20" style="display: block; outline: 0;">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
I changed / added TD widths to fix this issue.
Related
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>
'''
I want to have auto header and footer when data exceed the page.
Version of pdf generator
wemersonjanuario/wkhtmltopdf-windows : 0.12.2.3
Here is the sample output of the pdf
https://drive.google.com/file/d/15eI_rXdeBDjXgKHCh8u5VqO6mrF7fWYy/view?usp=sharing
Here is the sample code
<!DOCTYPE html>
<div class="document">
<div class="header">
<div class="img">
<img src="{{ url('assets/tenant/nodifi/img/logo.png') }}" width="140">
</div>
<div class="title">
<div>FINANCE APPLICATION</div>
</div>
<div class="sub-title">{{$pdfData['Finance Application']}}</div>
</div>
<div class="content">
#if(isset($pdfData['Assets']['Person']))
<div class="sub-content" style="page-break-inside: auto;">
<div class="title">
<div>Assets</div>
</div>
<div class="data">
<table class="general-pages">
<tr>
<td style="width: 5%">ID</td>
<td style="width: 10%">Link</td>
<td style="width: 35%">Asset Type and Description</td>
<td style="width: 40%">Owners</td>
<td style="width: 10%; text-align:right">Value</td>
</tr>
#foreach($pdfData['Assets']['Person'] as $key => $asset)
<tr>
<td class="td-text">{{$asset['Id']}}</td>
<td class="td-text">{{$asset['Link']}}</td>
<td class="td-text">
<div>{{$asset['Type']}}</div>
<div>{{$asset['Address']}}</div>
</td class="td-text">
<td class="td-text">{{$asset['Owners']}}</td>
<td class="td-text" style="text-align:right">{{$asset['Amount'] ? $asset['Amount'] : '-'}}</td>
</tr>
#endforeach
</table>
</div>
<div class="data-footer">
<table style="width: 100%;">
<tr>
<td style="width: 70%;"></td>
<td style="width: 30%;">
<div class="right">
<div>
Combined Asset Value
</div>
<div class="right">
{{$pdfData['Assets']['Combined Asset Value']['Person'] ? $pdfData['Assets']['Combined Asset Value']['Person'] : '-'}}
</div>
</div>
</td>
</tr>
</table>
</div>
</div>
#endif
#if(isset($pdfData['Liabilities']['Person']))
<div class="sub-content" style="margin-top: 30px;">
<div class="title">
<div>Liabilities</div>
</div>
<div class="data">
<table class="general-pages" style="page-break-inside: void;">
<tr>
<td style="width: 5%">ID</td>
<td style="width: 10%">Link</td>
<td style="width: 35%">Asset Type and Description</td>
<td style="width: 20%">Owners</td>
<td style="width: 10%">
<div style="text-align:center">
Borrowed / Limit
</div>
</td>
<td style="width: 10%" style="text-align:center">
<div style="text-align:center">
Amount Owing
</div>
</td>
<td style="width: 10%" style="text-align:right">
<div style="text-align:right">
Monthly Payment
</div>
</td>
</tr>
#foreach($pdfData['Liabilities']['Person'] as $key => $liability)
<tr>
<td class="td-text">{{$liability['Id']}}</td>
<td class="td-text">{{$liability['Link']}}</td>
<td class="td-text">
<div>{{$liability['Type']}}</div>
</td class="td-text">
<td class="td-text">{{$liability['Owners']}}</td>
<td class="td-text" style="text-align:center">{{$liability['Credit Limit'] ? $liability['Credit Limit'] : '-'}}</td>
<td class="td-text" style="text-align:center">{{$liability['Amount'] ? $liability['Amount'] : '-'}}</td>
<td class="td-text" style="text-align:right">{{$liability['Monthly Payment'] ? $liability['Monthly Payment'] : '-'}}</td>
</tr>
#endforeach
</table>
</div>
<div class="data-footer">
<table style="width: 100%;">
<tr>
<td style="width: 30%;">
<div>
Combined Borrowed / Limits
</div>
<div>
{{$pdfData['Liabilities']['Combined Amount Owing']['Person']['Combined Credit Limits'] ? $pdfData['Liabilities']['Combined Amount Owing']['Person']['Combined Credit Limits'] : '-'}}
</div>
</td>
<td style="width: 32%; text-align: center;">
<div>
Combined Amount Owing
</div>
<div>
{{$pdfData['Liabilities']['Combined Amount Owing']['Person']['Combined Amount Owing'] ? $pdfData['Liabilities']['Combined Amount Owing']['Person']['Combined Amount Owing'] : '-'}}
</div>
</td>
<td style="width: 33%;">
<div class="right">
<div>
Combined Monthly Payment
</div>
<div class="right">
{{$pdfData['Liabilities']['Combined Amount Owing']['Person']['Combined Monthly Payment'] ? $pdfData['Liabilities']['Combined Amount Owing']['Person']['Combined Monthly Payment'] : '-' }}
</div>
</div>
</td>
</tr>
</table>
</div>
</div>
#endif
#if(isset($pdfData['General Household Expenses']))
<div class="sub-content" style="margin-top: 30px;">
<div class="title">
<table style="width: 100%;">
<tr>
<td style="width: 100%;">General Household Expenses</td>
</tr>
</table>
</div>
<div class="data">
<table class="general-pages">
<tr>
<td style="width: 30%">Expense Type</td>
<td style="width: 50%">Owners</td>
<td style="width: 20%; text-align:right;">Monthly Payment</td>
</tr>
#foreach($pdfData['General Household Expenses']['Data'] as $key => $asset)
<tr>
<td class="td-text">{{$asset['Type']}}</td>
<td class="td-text">{{$asset['Owners']}}</td>
<td class="td-text" style="text-align:right;">{{$asset['Amount'] ? $asset['Amount'] : '$0'}}</td>
</tr>
#endforeach
</table>
</div>
<div class="data-footer">
<table style="width: 100%;">
<tr>
<td style="width: 20%;"></td>
<td style="width: 80%;">
<div class="right">
<div>
Combined General Monthly Expenses
</div>
<div class="right">
{{$pdfData['General Household Expenses']['Combined General Monthly Expenses']}}
</div>
</div>
</td>
</tr>
</table>
</div>
</div>
#endif
</div>
<div class="footer">
</div>
</div>
Here is the SCSS
.document {
height: 1123.5px;
position: relative;
background-color: white;
.header {
margin-left: 30px;
margin-right: 30px;
padding-top: 30px;
.title {
float: right;
margin-top: -45px;
font-family: 'Times New Roman', Times, serif;
font-size: 19px;
color: #211447;
font-weight: bold;
}
.sub-title {
margin-top: -15px;
float: right;
font-size: 11px;
color: #211447;
}
}
.content {
width: 100%;
padding: 30px;
.sub-content {
.title {
background-color: #e4e5e6;
padding-left: 10px;
padding-top: 7px;
padding-bottom: 7px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: 500;
color: #211447;
width: 100%;
.liabilities-total {
& > table > tbody > tr > td {
font-size: 11px;
font-weight: bold;
}
}
.expenses-total {
float: right;
margin-top: -22px;
padding-top: 5px;
padding-right: 20px;
font-size: 12px;
font-weight: bold;
}
.right {
float: right;
margin-top: -19px;
padding-right: 10px;
}
}
.data-footer {
margin-top: -10px;
background-color: #e4e5e6;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
padding: 5px;
font-weight: 500;
color: #211447;
.right {
float: right;
padding-right: 5px;
}
}
.data {
font-size: 10px;
width: 100%;
.structure {
width: 100%;
.right {
float: right;
margin-top: -19px;
padding-right: 5px;
}
ul.tree, ul.tree ul {
width: 100%;
list-style: none;
margin: 0;
padding: 0;
padding-right: 5px;
}
ul.tree ul {
margin-left: 10px;
}
ul.tree li {
padding: 0px 6px;
line-height: 18px;
border-left: 2px solid #e4e5e6;
}
ul.tree li:last-child {
border-left:none;
margin-left: 5px;
}
ul.tree li:before {
position:relative;
top:-0.3em;
height:3em;
width:12px;
color:white;
border-bottom: 2px solid #e4e5e6;
content:"";
display:inline-block;
left:-7px;
}
ul.tree li:last-child:before {
height: 2.8em;
margin-top: 1px;
margin-left: -4px;
width: 15px;
border-left: 2px solid #e4e5e6;
}
.box {
margin-top: -27px;
margin-left: 5px;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
padding: 7px;
background-color: #f7f9fa;
}
.box-title {
margin-top: 20px;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
padding: 7px;
background-color: #f7f9fa;
}
}
.sub-data {
font-size: 12px;
padding: 5px;
background-color: #f7f9fa;
.right {
float: right;
padding-right: 10px;
}
.title-sub {
padding-left: 10px;
}
}
& > table {
width: 100%;
margin-bottom: 10px;
}
& > table > tbody > tr {
border: 2px solid #f7f9fa;
}
& > table > tbody > tr > td {
padding: 10px;
}
.general-pages {
& > tbody > tr:nth-child(odd) {
background:#f7f9fa;
}
& > tbody > tr:first-child {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
.td-text {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
font-weight: 100;
color: rgb(51, 51, 51);
}
}
.loan-pages {
font-size: 12px;
font-weight: 100;
color: rgb(51, 51, 51);
font-family: Arial, Helvetica, sans-serif;
& > tbody > tr:nth-child(even) {
background:#f7f9fa;
}
}
.right {
float: right;
padding-top: -5px;
}
.data-table {
width: 100%;
& > table > tbody > tr > td {
padding: 0px;
padding-left: 5px;
border-bottom: 2px solid #f7f9fa;
border-right: 2px solid #f7f9fa;
border-left: 2px solid #f7f9fa;
& > table > tbody > tr > td:first-child {
border-right: 2px solid #f7f9fa;
}
}
.data-table-title {
padding-left: 10px;
background-color: #f6f9fa;
padding-top: 7px;
padding-bottom: 7px;
font-style: italic;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.data-table-label {
padding-left: 5px;
padding-right: 5px;
margin-top: 5px;
font-style: italic;
font-size: 8px;
margin-bottom: -5px;
}
.data-table-field {
margin: 5px;
font-family: Arial, Helvetica, sans-serif;
font-weight: 100;
color: rgb(51, 51, 51);
font-size: 12px;
font-weight: 100;
color: rgb(51, 51, 51);
}
}
.key-people {
width: 100%;
& > table > tbody > tr > td {
width: 100%;
padding: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
border-bottom: 2px solid #f7f9fa;
border-left: 2px solid #f7f9fa;
border-right: 2px solid #f7f9fa;
}
}
.purchase {
.purchase-title {
background-color: #f7f9fa;
padding: 5px;
.purchase-left-title {
padding: 5px;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
.sub-title {
font-weight: 100;
color: rgb(51, 51, 51);
}
}
.purchase-right-title {
float: right;
margin-top: -43px;
padding-right: 5px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
.sub-title {
font-weight: 100;
color: rgb(51, 51, 51);
}
}
}
}
}
}
}
}
Please help Thank you.
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' 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.
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>
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.