Replied to Discussion: Right and Left Space Around Full Width Image in Outlook 2013 by Digital Marketing
Hey Remi,
Thanks for the suggestion. It didn't work though. Any other suggestions?
Here is the whole code.
<!DOCTYPE html>
<html><!-- InstanceBegin template="/Templates/2 - Hybrid Framework 5.dwt" codeOutsideHTMLIsLocked="false" -->
<head><meta http-equiv="Content-Type" content="text/html; charset=US-ASCII"/>
<!-- RESETS AND BUG FIXES -->
<style>
.body{
color:#333333;
font-size:16px;
line-height:20px;
background-color:#E7E7E7;
font-family:'Calibri', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, sans-serif;
mso-fareast-font-family:Arial !important;
}
.ReadMsgBody{
width: 100%;
display: block !important;
border: 0px !important
}
.ExternalClass {
width: 100%;
display: block !important;
border: 0px !important
line-height: 100%;
}
</style>
<style>
*{
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
html{
font-size: 100%;
overflow-y: scroll;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body{
color:#333333;
font-size:16px;
line-height:20px;
background-color:#E7E7E7;
font-family:'Calibri', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, sans-serif;
mso-fareast-font-family:Arial !important;
}
table{
border-spacing:0;
border-collapse:collapse !important;
mso-table-lspace:0;
mso-table-rspace:0;
table-layout:fixed;
Margin: 0 auto;
min-height:0px !important;
}
table table{
table-layout: auto;
}
tr, th, tbody, thead{
border-collapse:collapse !important;
}
td {
border-collapse:collapse !important;
vertical-align:top;
padding:0;
mso-line-height-rule:exactly !important;
mso-table-lspace:0;
mso-table-rspace:0;
border:0;
}
img{
font-size:14px;
line-height:16px;
color:#6C6C6C;
display:block !important;
border:0 !important;
overflow:visible;
}
a{
display:block;
cursor:pointer !important;
color:#0079C1;
text-decoration:none;
border:0 !important;
border-bottom: none !important;
}
p{
font-family: 'Calibri', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, sans-serif !important;
}
</style>
<!-- Android Padding Hack -->
<style>
div[style*="margin: 16px 0"]{
margin:0 !important;
}
</style>
<!-- Gmail Calendar-Time-Address Hack -->
<style>
.linkfix a{
display:inline-block !important;
color:#0079C1;
text-decoration:none;
}
</style>
<!-- Gmail -->
<style>
u + .body .sub{
display:none !important;
visibility:hidden !important;
}
u + .body .ctat{
font-size:16px !important;
line-height:16px !important;
color:#FF7E00 !important;
text-align:left !important;
display:block;
}
</style>
<!-- Outlook, test as if images in 07+ -->
<style>
body.outlook img {
width: auto !important;
max-width: none !important;
}
</style>
<!--[if (gte mso 9)|(IE)]>
<style>
body, table, td {
font-family:'Calibri', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, sans-serif;
}
</style>
<![endif]-->
<!-- Yahoo scrolling bar on images -->
<style>
@media yahoo{
img{overflow:hidden !important;}
}
</style>
<style>
@media screen and (max-width: 480px) {
td[class="100"]{
width:100% !important;
max-width:100% !important;
}
</style>
<style>
@media screen and (max-width: 480px) {
.full{
width:100% !important;
opacity:1.0 !important;
max-width:100% !important;
}
.onethird{
max-width:30% !important;
padding:0 3% 0 0 !important;
}
.twothird{
max-width:67% !important;
}
.hide{
display:none !important;
visibility:hidden !important;
}
.show{
font-size:13px !important;
line-height:16px !important;
color:#333333 !important;
text-decoration:none !important;
cursor:pointer !important;
}
.fifteen{
Margin:0 20px!important;
width:100% !important;
opacity:1.0 !important;
max-width:65% !important;
}
.pzero{
padding:0 !important;
}
.pfifteen{
padding:0 20px !important;
}
.pfifteenresize{
text-align:center !important;
height:25px !important;
}
.zero{
padding:0 !important;
Margin:0 !important;
}
.htwenty{
height:15px !important;
line-height:15px !important;
}
.fourtd{
max-width:49% !important;
}
.post{
font-size:32px !important;
line-height:36px !important;
padding:0 20px !important;
}
.committee{
width:49% !important;
}
.date{
max-width:25% !important;
font-size:72px !important;
line-height:70px !important;
}
.event{
max-width:70%!important;
}
.logo{
width:35px !important;
}
.logoimg{
width:35px !important;
}
.logotwo{
width:89% !important;
text-align:center !important;
}
.showarrow{
font-size:16px !important;
line-height:24px !important;
display:inline !important;
visibility:visible !important;
}
.smfooter{
height:auto !important;
text-align:center !important;
}
.footerlinks{
padding:5px !important;
text-align:center !important;
font-size:14px !important;
line-height:18px !important;
width:100% !important;
max-width:480px !important;
height:35px !important;
background:#ffffff !important;
border:4px solid #E7E7E7 !important;
color:#291639 !important;
}
.showten{
font-size:12px !important;
color:#333333 !important;
padding:5px 15px !important;
line-height:12px !important;
text-transform:uppercase !important;
height:16px !important;
}
.showfifteenp{
display:inline-block !important;
font-size:13px !important;
line-height:16px !important;
background-color:#CBCBCB !important;
}
.showframe{
width:98% !important;
font-size:13px !important;
line-height:16px !important;
color:#333333 !important;
text-align:center !important;
display:block !important;
}
.subnav{
height:35px !important;
Margin:5px 0 !important;
font-size:13px;
line-height:16px;
border:4px solid #E7E7E7;
text-align:center;
vertical-align:middle !important;
}
}
@media screen and (max-width: 320px){
.hidesmall{
display:none !important;
visibility:hidden !important;
}
.committee{
width:100% !important;
}
.date{
width:100% !important;
max-width: 100% !important;
}
.event{
max-width:100%!important;
}
}
</style>
</head>
<body class="body" style="Margin:0;padding:0;">
<!-- Page Wrapper -->
<table width="100%" class="body" style="Margin:0;border-collapse:collapse;">
<tr bgcolor="#E7E7E7">
<td align="center" style="padding:0;vertical-align:top;border-collapse:collapse;color:#333333;font-size:16px;line-height:20px;font-family:'Calibri', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, sans-serif;">
<!-- Outlook Wrapper -->
<!--[if (gte mso 9)|(IE)]>
<table width="600" style="Margin:0;border-spacing:0;">
<tr>
<td style="padding:0;">
<![endif]-->
<!-- Begin: Preheader -->
<!-- Inner Wrapper -->
<table width="100%" style="Margin:0 auto;border-spacing:0;max-width:600px;">
<tr bgcolor="#ffffff">
<td style="padding:0;">
<!-- InstanceBeginEditable name="Preheader" -->
<table width="100%" bgcolor="#E7E7E7" style="Margin:0;border-spacing:0;">
<tr>
<td style="height:10px;padding:0;font-size:0;line-height:10px;color:#e7e7e7;">
<a title="Long Form 6.8" style="display:block;color:#e7e7e7;font-size:0;"> </a>
</td>
</tr>
</table><!-- #BeginLibraryItem "/Library/Round 4.2/Preheader.lbi" --><table width="100%" style="border-spacing:0;background-color:#E7E7E7;">
<tr>
<td style="height:0;padding:0;font-size:0;line-height:0px;color:#E7E7E7;">Preview text under subject line: 110 characters or more.kjh;jhlkjh‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ </td>
</tr>
<tr>
<td role="presentation" style="padding:0 30px 0 0;font-size:13px;line-height:15px;color:333333;text-align:right;" class="pfifteen tv">
<a href="{{*ViewInBrowserURL}}" style="text-decoration:none;color:333333;" target="_blank" tabindex="1">
Trouble Viewing? <u>View online</u>.
</a>
</td>
</tr>
<tr>
<td height="3" style="padding:0;font-size:0;line-height:3px;"> </td>
</tr>
</table>
<!-- #EndLibraryItem --><!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="Header" --><!-- #BeginLibraryItem "/Library/Round 4.2/Header.lbi" --><!-- Header -->
<table width="100%" style="border-spacing:0;">
<!-- ABA Banner -->
<!-- -->
<tr bgcolor="#0079C1">
<td style="padding:0;">
<table width="100%" style="border-spacing:0;">
<tr>
<td height="5" style="padding:0;line-height:5px;font-size:0;"> </td>
</tr>
<tr>
<td role="presentation" align="center" style="padding:0;font-size:0;line-height:0;">
<a href="https://www.americanbar.org" style="text-decoration:none;" target="_blank" tabindex="1">
<div class="owa"><img src="https://www.americanbar.org/content/dam/aba/images/membership_marketing/emailtemplates/abalogowh.png" alt="American Bar Association. " class="img" style="font-size:24px;line-height:26px;color:#ffffff;width:100%;height:auto;max-width:280px;"/></div>
</a>
</td>
</tr>
<tr>
<td height="3" style="padding:0;font-size:0;line-height:3px;"> </td>
</tr>
</table>
</td>
</tr>
<!-- Entity Row -->
<!-- Banner Row -->
<!-- NavBar -->
<tr bgcolor="#006699" class="hide">
<td height="2" style="padding:0;font-size:0;line-height:2px;"> </td>
</tr>
<tr bgcolor="#EFEFEF" class="hide">
<td style="padding:0;">
<table width="100%" style="border-spacing:0;">
<tr>
<td height="3" style="padding:0;font-size:0;line-height:3px;"> </td>
</tr>
<tr>
<td role="presentation" style="padding:0 20px;font-size:13px;line-height:16px;color:#006699;text-align:center;" class="pfifteen">
<a href="https://www.americanbar.org" style="text-decoration:none;color:#006699;display:inline-block;" target="_blank" tabindex="1">
AMBAR.ORG |
</a>
<a href="http://www.abalcc.org/" style="text-decoration:none;color:#006699;display:inline-block;" target="_blank" tabindex="1">
CAREER CENTER |
</a>
<a href="https://www.americanbar.org/membership.html" style="text-decoration:none;color:#006699;display:inline-block;" target="_blank" tabindex="1">
MEMBERSHIP |
</a>
<a href="https://shop.americanbar.org/eBus/ABAEventsCalendar.aspx" style="text-decoration:none;color:#006699;display:inline-block;" target="_blank" tabindex="1">
CALENDAR |
</a>
<a href="https://www.americanbar.org/cle.html" style="text-decoration:none;color:#006699;display:inline-block;" target="_blank" tabindex="1">
CLE |
</a>
<a href="https://www.americanbar.org/publications1.html" style="text-decoration:none;color:#006699;display:inline-block;" target="_blank" tabindex="1">
PUBLISHING
</a>
</td>
</tr>
<tr>
<td height="3" style="padding:0;font-size:0;line-height:3px;"> </td>
</tr>
</table>
</td>
</tr>
<tr bgcolor="#006699" class="hide">
<td height="2" style="padding:0;font-size:0;line-height:2px;"> </td>
</tr>
<!-- Banner Row -->
<!-- http://fpoimg.com/600x250 -->
<tr aria-hidden="true">
<td align="center" style="padding:0;font-size:0;line-height:0;">
<div class="owa"><img src="http://fpoimg.com/600x250" alt=". " style="width:600px;height:auto;max-width:100%;" class="img"/></div>
<!-- http://fpoimg.com/600x250 -->
</td>
</tr>
</table>
<!-- #EndLibraryItem --><!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="Component" --><!-- #BeginLibraryItem "/Library/Round 4.2/1A.lbi" --><!-- Hybrid 1 Column -->
<!-- -->
<table width="100%" style="border-spacing:0;background-color:#005825;"><!-- -->
<tr>
<td height="25" style="padding:0;font-size:0;line-height:25px;"> </td>
</tr>
<span style="color:#ffffff;">
</span><!-- ffffff -->
<!-- Header -->
<tr>
<td role="presentation" style="padding:0 30px;font-size:24px;line-height:28px;color:#0079C1;font-weight:bold;text-align:left;" class="pfifteen">
<span style="color:#ffffff;">
Header
</span><!-- ffffff -->
<!-- Header -->
</td>
</tr>
<span style="color:#ffffff;">
</span><!-- ffffff -->
<!-- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus erat. Fusce varius risus bibendum massa. In magna odio, euismod nec, hendrerit eu, ornare ut.<br><br> -->
<tr>
<td height="2" style="padding:0;font-size:0;line-height:2px;"> </td>
</tr>
<tr>
<td role="presentation" style="padding:0 30px;font-size:16px;line-height:20px;color:#333333;text-align:left;" class="pfifteen">
<span style="color:#ffffff;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus erat. Fusce varius risus bibendum massa. In magna odio, euismod nec, hendrerit eu, ornare ut.<br><br>
</span><!-- ffffff -->
<!-- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus erat. Fusce varius risus bibendum massa. In magna odio, euismod nec, hendrerit eu, ornare ut.<br><br> -->
</td>
</tr>
<tr>
<td height="5" style="padding:0;font-size:0;line-height:5px;"> </td>
</tr>
<!-- Save the Date -->
<tr>
<td height="10" style="padding:0;font-size:0;line-height:10px;"> </td>
</tr>
<tr>
<td align="center" style="padding:0;">
<!--[if (gte mso 9)|(IE)]>
<table width="260">
<tr>
<td valign="top" style="padding:0;">
<![endif]-->
<table width="100%" style="Margin:0 30px;border-spacing:0;max-width:260px;" class="pfifteen">
<tr>
<td width="100%" style="padding:10px 5px 12px 5px;border-radius:4px;-webkit-border-radius:4px;background-color:#FF7E00;font-size:16px;line-height:22px;color:#ffffff;text-align:center;">
Save the Date
<!-- Save the Date -->
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- -->
<tr>
<td height="25" style="padding:0;font-size:0;line-height:25px;"> </td>
</tr>
</table>
<!-- #EndLibraryItem --><!-- #BeginLibraryItem "/Library/Round 4.2/2C.lbi" --><!-- Hybrid: 2 Columns -->
<!-- -->
<table width="100%" style="border-spacing:0;background-color:#E5F1F9;">
<tr bgcolor="#006699"><!-- -->
<td style="padding:0 20px;font-size:0;line-height:0;text-align:center;vertical-align:top;">
<!--[if (gte mso 9)|(IE)]>
<table width="100%">
<tr>
<![endif]-->
<!-- 1st Column-->
<!--[if (gte mso 9)|(IE)]>
<td width="250" valign="top" style="padding:0;">
<![endif]-->
<div style="width:100%;max-width:250px;display:inline-block;vertical-align:top;">
<table width="100%" style="border-spacing:0;">
<tr>
<td height="20" style="padding:0;font-size:0;line-height:20px;"> </td>
</tr>
</table>
<table width="100%" style="border-spacing:0;background-color:#ffffff;-webkit-box-shadow: 1px 2px 7px 0px rgba(166,166,166,1);-moz-box-shadow: 1px 2px 7px 0px rgba(166,166,166,1);box-shadow: 1px 2px 7px 0px rgba(166,166,166,1);">
<!-- newer -->
<tr>
<td height="5" style="padding:0;font-size:0;line-height:5px;"> </td>
</tr>
<tr>
<td role="presentation" style="padding:0 10px 0 5px;font-size:10px;line-height:12px;color:#333333;font-weight:bold;text-transform:uppercase;letter-spacing:2px;text-align:left;">
newer
<!-- newer -->
</td>
</tr>
<tr>
<td height="5" style="padding:0;font-size:0;line-height:5px;"> </td>
</tr>
<!-- Secondary Headerd -->
<tr>
<td height="2" style="padding:0;font-size:0;line-height:2px;"> </td>
</tr>
<tr>
<td role="presentation" style="padding:0 10px;font-size:20px;line-height:22px;color:#000000;font-weight:bold;text-transform:uppercase;letter-spacing:3px;text-align:center;">
Secondary Headerd
<!-- Secondary Headerd -->
</td>
</tr>
<!-- https://shop.americanbar.org/PersonifyImages/ProductImages/215450.Def.L.png -->
<tr>
<td height="5" style="padding:0;font-size:0;line-height:5px;"> </td>
</tr>
<tr aria-hidden="true">
<td align="center" style="padding:0;font-size:0;line-height:0;">
<div class="owa"><img src="https://shop.americanbar.org/PersonifyImages/ProductImages/215450.Def.L.png" alt=". " style="width:100%;height:auto;max-width:250px;" class="img"/></div>
<!-- https://shop.americanbar.org/PersonifyImages/ProductImages/215450.Def.L.png -->
</td>
</tr>
<tr>
<td height="15" style="padding:0;font-size:0;line-height:15px;"> </td>
</tr>
<tr>
<td role="presentation" style="padding:0 20px;font-size:12px;line-height:14px;letter-spacing:1px;color:#333333;text-align:center;">
</td>
</tr>
<!-- Add to Your Library -->
<tr>
<td height="12" style="padding:0;font-size:0;line-height:12px;"> </td>
</tr>
<tr>
<td align="center" style="padding:0;">
<!--[if (gte mso 9)|(IE)]>
<table width="150">
<tr>
<td valign="top" style="padding:0;">
<![endif]-->
<table width="100%" style="border-spacing:0;max-width:150px;">
<tr>
<td width="100%" style="padding:5px;background-color:#ff7e00;font-size:14px;line-height:18px;color:#ffffff;text-align:center;">
Add to Your Library
<!-- Add to Your Library -->
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td height="15" style="padding:0;font-size:0;line-height:15px;"> </td>
</tr>
<!-- -- -->
<tr>
<td height="15" style="padding:0;font-size:0;line-height:15px;"> </td>
</tr>
<!-- Secondary Subheaderf -->
<tr bgcolor="#E0E0E0">
<td height="1" style="padding:0;font-size:0;line-height:1px;"> </td>
</tr>
<tr>
<td height="25" style="padding:0;font-size:0;line-height:25px;"> </td>
</tr>
<tr>
<td role="presentation" style="padding:0 10px;font-size:14px;line-height:18px;color:#000000;font-weight:bold;text-transform:uppercase;letter-spacing:2px;text-align:center;">
Secondary Subheaderf
<!-- Secondary Subheaderf -->
</td>
</tr>
<tr>
<td height="2" style="padding:0;font-size:0;line-height:2px;"> </td>
</tr>
<tr>
<td role="presentation" style="padding:0 30px;font-size:12px;line-height:14px;letter-spacing:1px;color:#333333;text-align:center;">
<br>ISBN: 9781627221832<br><br>
Author(s):Stephen S Wu<br><br>
Sponsor(s):Section of Science & Technology Law<br><br>
Publisher(s):ABA Book Publishing
</td>
</tr>
<!-- -->
<tr>
<td height="20" style="padding:0;font-size:0;line-height:20px;"> </td>
</tr>
</table>
<table width="100%" style="border-spacing:0;">
<tr>
<td height="20" style="padding:0;font-size:0;line-height:20px;"> </td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
<![endif]-->
<!-- 2nd Column-->
<!--[if (gte mso 9)|(IE)]>
<td width="30" valign="top" style="padding:0;">
<![endif]-->
<div style="width:100%;max-width:30px;display:inline-block;" class="hide">
<table width="100%" style="border-spacing:0;">
<tr>
<td height="20" style="padding:0;font-size:0;line-height:20px;"> </td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
<![endif]-->
<!-- 2nd Column-->
<!--[if (gte mso 9)|(IE)]>
<td width="250" valign="top" style="padding:0;">
<![endif]-->
<div style="width:100%;max-width:250px;display:inline-block;vertical-align:top;">
<table width="100%" style="border-spacing:0;">
<tr>
<td height="20" style="padding:0;font-size:0;line-height:20px;"> </td>
</tr>
</table>
<table width="100%" style="border-spacing:0;background-color:#ffffff;-webkit-box-shadow: 1px 2px 7px 0px rgba(166,166,166,1);-moz-box-shadow: 1px 2px 7px 0px rgba(166,166,166,1);box-shadow: 1px 2px 7px 0px rgba(166,166,166,1);">
<!-- Secondary Headerb -->
<tr>
<td height="12" style="padding:0;font-size:0;line-height:12px;"> </td>
</tr>
<tr>
<td role="presentation" style="padding:0 10px;font-size:12px;line-height:14px;letter-spacing:2px;word-spacing:1px;color:#333333;text-align:center;">
Secondary Headerb
<!-- Secondary Headerb -->
</td>
</tr>
<!-- https://shop.americanbar.org/PersonifyImages/ProductImages/215450.Def.L.png -->
<tr>
<td height="5" style="padding:0;font-size:0;line-height:5px;"> </td>
</tr>
<tr aria-hidden="true">
<td align="center" style="padding:0;font-size:0;line-height:0;">
<div class="owa"><img src="https://shop.americanbar.org/PersonifyImages/ProductImages/215450.Def.L.png" alt=". " style="width:100%;height:auto;max-width:250px;" class="img"/></div>
<!-- https://shop.americanbar.org/PersonifyImages/ProductImages/215450.Def.L.png -->
</td>
</tr>
<tr>
<td height="15" style="padding:0;font-size:0;line-height:15px;"> </td>
</tr>
<tr>
<td role="presentation" style="padding:0 20px;font-size:12px;line-height:14px;letter-spacing:1px;color:#333333;text-align:center;">
The book provides background information on business drivers and technology, with the goal of aiding lawyers in counseling their clients. A sample motion device policy is included as a starting point for a business' mobile device program documentation.
</td>
</tr>
<!-- Add to your library today -->
<tr>
<td height="12" style="padding:0;font-size:0;line-height:12px;"> </td>
</tr>
<tr>
<td align="center" style="padding:0;">
<!--[if (gte mso 9)|(IE)]>
<table width="150">
<tr>
<td valign="top" style="padding:0;">
<![endif]-->
<table width="100%" style="border-spacing:0;max-width:150px;">
<tr>
<td width="100%" style="padding:5px;background-color:#ff7e00;font-size:14px;line-height:18px;color:#ffffff;text-align:center;">
Add to your library today
<!-- Add to your library today -->
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td height="15" style="padding:0;font-size:0;line-height:15px;"> </td>
</tr>
<!-- --The book provides background information on business drivers and technology, with the goal of aiding lawyers in counseling their clients. A sample motion device policy is included as a starting point for a business' mobile device program documentation. -->
<tr>
<td height="15" style="padding:0;font-size:0;line-height:15px;"> </td>
</tr>
<!-- Secondary Subheadergfd -->
<tr bgcolor="#E0E0E0">
<td height="1" style="padding:0;font-size:0;line-height:1px;"> </td>
</tr>
<tr>
<td height="25" style="padding:0;font-size:0;line-height:25px;"> </td>
</tr>
<tr>
<td role="presentation" style="padding:0 10px;font-size:14px;line-height:18px;color:#000000;font-weight:bold;text-transform:uppercase;letter-spacing:2px;text-align:center;">
Secondary Subheadergfd
<!-- Secondary Subheadergfd -->
</td>
</tr>
<!-- -->
<tr>
<td height="20" style="padding:0;font-size:0;line-height:20px;"> </td>
</tr>
</table>
<table width="100%" style="border-spacing:0;">
<tr>
<td height="20" style="padding:0;font-size:0;line-height:20px;"> </td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
<![endif]-->
<!--[if (gte mso 9)|(IE)]>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
<!-- #EndLibraryItem --><!-- #BeginLibraryItem "/Library/Round 4.2/9B.lbi" --><!-- -->
<table bgcolor="#DBDBDD" width="100%" style="border-spacing:0;background-color:#31004A;"><!-- -->
<tr>
<td height="10" style="padding:0;font-size:0;line-height:10px;"> </td>
</tr>
<!-- January -->
<tr>
<td style="padding:0 25px;font-size:11px;line-height:11px;color:#0079C1;font-weight:bold;text-transform:uppercase;letter-spacing:2px;text-align:left;" class="pfifteen">
<span style="color:#ffffff;">
January
</span><!-- ffffff -->
<!-- January -->
</td>
</tr>
<!-- Event of the day Event of the day Event of the day Event of the day Event of the day -->
<tr>
<td style="padding:0 25px;font-size:16px;line-height:20px;color:#0079C1;text-align:center;vertical-align:top;" class="pfifteen">
<!-- 1st Column-->
<!-- 02 -->
<!--[if (gte mso 9)|(IE)]>
<table align="left">
<tr>
<td width="115" valign="top" style="padding:0;">
<![endif]-->
<div style="width:100%;max-width:125px;display:inline-block;vertical-align:top;" class="date">
<table width="100%" style="border-spacing:0;">
<tr>
<td align="center" style="padding:0 10px 0 0;font-size:110px;line-height:90px;mso-line-height-rule:exactly;color:#0079C1;text-align:left;vertical-align:middle;" class="pzero date">
<span style="color:#ffffff;">
02
</span><!-- ffffff -->
<!-- 02 -->
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
<!-- 2nd Column-->
<!--[if (gte mso 9)|(IE)]>
<table width="410" align="left">
<tr>
<td valign="top" style="padding:0;">
<![endif]-->
<div style="width:100%;max-width:420px;display:inline-block;vertical-align:top;" class="event">
<table width="100%" style="border-spacing:0;">
<tr>
<td height="90" style="padding:0;font-size:16px;line-height:20px;color:#0079C1;text-align:left;vertical-align:middle;">
<span style="color:#ffffff;">
Event of the day Event of the day Event of the day Event of the day Event of the day
</span><!-- ffffff -->
<!-- 02 -->
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
<!-- Event of the day Event of the day Event of the day Event of the day Event of the day -->
</td>
</tr>
<!-- -->
<tr bgcolor="#ffffff">
<td height="2" style="padding:0;font-size:0;line-height:2px;" class="hide"> </td>
</tr>
</table>
<!-- -->
<table bgcolor="#DBDBDD" width="100%" style="border-spacing:0;background-color:#006699;"><!-- -->
<tr>
<td height="10" style="padding:0;font-size:0;line-height:10px;"> </td>
</tr>
<span style="color:#ffffff;">
</span><!-- ffffff -->
<!-- <div style="width:100%;text-align:left;"><b style="font-size:20px;line-height:24px;">1/11/2017 - 5/3/2017</b><br>
Building Blocks of Commercial Real Estate<br/><br/>
</div> -->
<tr>
<td style="padding:0 25px;font-size:16px;line-height:20px;color:#0079C1;text-align:center;vertical-align:top;" class="pfifteen">
<!-- 1st Column-->
<span style="color:#ffffff;">
</span><!-- ffffff -->
<span style="color:#ffffff;">
<div style="width:100%;text-align:left;"><b style="font-size:20px;line-height:24px;">1/11/2017 - 5/3/2017</b><br>
Building Blocks of Commercial Real Estate<br/><br/>
</div>
</span><!-- ffffff -->
<!-- <div style="width:100%;text-align:left;"><b style="font-size:20px;line-height:24px;">1/11/2017 - 5/3/2017</b><br>
Building Blocks of Commercial Real Estate<br/><br/>
</div> -->
</td>
</tr>
<!-- -->
<tr bgcolor="#ffffff">
<td height="2" style="padding:0;font-size:0;line-height:2px;" class="hide"> </td>
</tr>
</table>
<!-- #EndLibraryItem --><!-- #BeginLibraryItem "/Library/Round 4.2/4.lbi" --><!-- Hybrid: 4 Columns -->
<!-- -->
<table width="100%" style="border-spacing:0;">
<tr>
<td height="15" style="padding:0;font-size:0;line-height:15px;"> </td>
</tr>
<!-- Quaternary Subheaderk -->
<tr>
<td role="presentation" style="padding:0 30px;font-size:18px;line-height:22px;font-weight:bold;color:#333333;text-align:center;" class="pfifteen">
Quaternary Subheaderk
<!-- Quaternary Subheaderk -->
</td>
</tr>
<tr>
<td height="10" style="padding:0;font-size:0;line-height:10px;"> </td>
</tr>
<!-- -->
<tr>
<td style="padding:0 30px;font-size:0;text-align:center;vertical-align:top;" class="fourtdouter">
<!-- Lorem ipsum dolork -->
<!--[if (gte mso 9)|(IE)]>
<table width="100%">
<tr>
<![endif]-->
<!-- 1st Column-->
<!--[if (gte mso 9)|(IE)]>
<td width="25%" valign="top" style="padding:0;">
<![endif]-->
<div style="width:100%;max-width:135px;display:inline-block;vertical-align:top;" class="fourtd">
<!-- -->
<table width="100%" style="border-spacing:0;">
<!-- http://fpoimg.com/100x150 -->
<tr aria-hidden="true" class="hidesmall">
<td align="center" style="padding:0 17px;font-size:0;line-height:0;">
<div class="owa"><img src="http://fpoimg.com/100x150" alt="" style="width:100%;height:auto;max-width:110px;" class="img"/></div>
<!-- http://fpoimg.com/100x150 -->
</td>
</tr>
<tr class="hidesmall">
<td height="7" style="padding:0;font-size:0;line-height:7px;"> </td>
</tr>
<tr>
<td height="2" style="padding:0;font-size:0;line-height:2px;"> </td>
</tr>
<tr>
<td role="presentation" style="padding:0 17px;font-size:16px;line-height:20px;color:#333333;text-align:center;">
Lorem ipsum dolorl
</td>
</tr>
<tr>
<td height="10" style="padding:0;font-size:0;line-height:10px;" class="htwenty"> </td>
</tr>
<!-- -->
</table>
<!-- Lorem ipsum dolork -->
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
<![endif]-->
<!-- 2nd Column-->
<!--[if (gte mso 9)|(IE)]>
<td width="25%" valign="top" style="padding:0;">
<![endif]-->
<div style="width:100%;max-width:135px;display:inline-block;vertical-align:top;" class="fourtd">
<table width="100%" style="border-spacing:0;">
<!-- http://fpoimg.com/100x150 -->
<tr aria-hidden="true" class="hidesmall">
<td align="center" style="padding:0 17px;font-size:0;line-height:0;">
<div class="owa"><img src="http://fpoimg.com/100x150" alt="" style="width:100%;height:auto;max-width:110px;" class="img"/></div>
<!-- http://fpoimg.com/100x150 -->
</td>
</tr>
<tr class="hidesmall">
<td height="7" style="padding:0;font-size:0;line-height:7px;"> </td>
</tr>
<tr>
<td height="2" style="padding:0;font-size:0;line-height:2px;"> </td>
</tr>
<tr>
<td role="presentation" style="padding:0 17px;font-size:16px;line-height:20px;co
Started a new discussion: Right and Left Space Around Full Width Image in Outlook 2013
Started a new discussion: Background Image for Outlook 13+
Replied to Discussion: Finding and Retaining Skilled Email Professionals by
Hey Deja,
In talking to my team of developers, email code is like juggling Jello where as web development is more straight forward. I love juggling, but most designers/developers don't.
Katrina
Replied to Discussion: REVOLED WONT REMOVE by
Can you share your code?
Replied to Discussion: Litmus Live Quiz Challenge #5 by
Twitter: @KatrinaWarfel
Our membership department had a print designer create a layout for a new marketing campaign. The layout was particularly challenging on one part in particular.
They wanted quote symbols floating on either side of a block quote with the author floating right on the bottom. Line-height was being a beast. So, I went to the community boards: Litmus, Campaign Monitor, and Email on Acid. After getting a better result, i collaborated with two email developers on my team. Finally I found a solution using W3C's page of CSS attributes.
I learned a lot from each tool, but in this case W3C saved the day.
Replied to Discussion: Targeting Android 5.1 & + by
I'm not aware of specific targetting for Android, but i have noticed a few changes. What particular are you having issue with?
Replied to Discussion: #EmailHacks Ideas & Collaborators by
How do you control Background images not sqishing in Outlook. To make mobile versions friendly, we use a longer background image, but in Outlook it displays the whole image now matter how squished. Here is my code. How do you get around this?
<!-- BPP -->
<table bgcolor="#000000" width="100%" height="100%" style="border-spacing:0;Margin:0 auto;max-width:600px;">
<tr>
<td width="100%" background="#" valign="top" style="padding:0;display:inline-block;background-repeat:no-repeat;background-position:top center;background-size: 100% auto, auto;">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:180px;">
<v:fill type="frame" src="#" color="#000000"/>
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<div style="font-size:0;">
<table width="100%" bgcolor="#000000" style="border-spacing:0;opacity:0.7;" class="100">
<tr>
<td height="20" style="padding:0;font-size:0;line-height:20px;"> </td>
</tr>
<!-- Content -->
<tr>
<td height="25" style="padding:0;font-size:0;line-height:25px;"> </td>
</tr>
</table>
</div>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>