Create a Discussion

Right and Left Space Around Full Width Image in Outlook 2013

Digital Marketing posted 2017-09-25 16:51:00

I can't see why it renders like this.

https://www.americanbar.org/content/dam/aba/images/membership_marketing/emailtemplates/fullwidthimage.png

This is my original code.

<!-- CSS -->
img{
font-size:14px;
line-height:16px;
color:#6C6C6C;
display:block !important;
border:0 !important;
overflow:visible;
}

<!-- HTML -->

<table width="100%" style="border-spacing:0;">
    <tr aria-hidden="true">
        <td align="center" style="padding:0;font-size:0;line-height:0;">
            <a href="#VALUE#" style="text-decoration:none;" target="_blank" tabindex="1">
                <div class="owa">
                    <img src="#VALUE#" alt="#TITLE#. " style="width:100%;height:auto;max-width:600px;max-height:100px;" class="img"/>
                </div>
            </a>
        </td>
    </tr>
</table>

Once it goes through Outlook 2013, this is how the code is changed.

<table class=MsoNormalTable border=0 cellspacing=0 cellpadding=0 width="100%" style='width:100.0%;border-collapse:collapse;mso-yfti-tbllook:1184;border-spacing:0'>
    <tr style='mso-yfti-irow:4;mso-yfti-lastrow:yes' aria-hidden=true>
        <td valign=top style='padding:0in 0in 0in 0in'>
            <div>
                <p class=MsoNormal align=center style='text-align:center;line-height:0%'>
                    <span style='font-size:1.0pt;font-family:"Calibri",sans-serif; mso-fareast-font-family:Arial;color:#333333'>
                        <img border=0 id="_x0000_i1026" src="http://fpoimg.com/600x250" style='height:auto;max-width:600px;width:100%' alt=". " class=img><o:p></o:p>
                    </span>
                </p>
            </div>
        </td>
    </tr>
</table>

Thoughts?

Rémi Parmentier replied 2017-09-25 19:23:05

Outlook 2013 has a hard time dealing with width:100%; on images. It usually won't mean what you think it means. Instead, it's best advised to keep the HTML width attribute to set the width of your image for Outlook, then use a max-width:100% for the image to become responsive.

 <img src="#VALUE#" alt="#TITLE#. " width="600" style="width:600px ;height:auto;max-width:100%;max-height:100px;" class="img"/>

Also, make sure your email is ready for 120 dpi rendering in Outlook. (See this or this for more infos on 120 dpi rendering.)

Reply to Rémi Parmentier

Digital Marketing replied 2017-09-26 14:54:52

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;">&nbsp;</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&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;</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;">&nbsp;</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;">&nbsp;</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;">&nbsp;</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;">&nbsp;</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;">&nbsp;</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&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|
                        </a>
                        <a href="http://www.abalcc.org/" style="text-decoration:none;color:#006699;display:inline-block;" target="_blank" tabindex="1">
                            &nbsp;&nbsp;&nbsp;&nbsp; CAREER&nbsp;CENTER&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|
                        </a>
                        <a href="https://www.americanbar.org/membership.html" style="text-decoration:none;color:#006699;display:inline-block;" target="_blank" tabindex="1">
                            &nbsp;&nbsp;&nbsp;&nbsp; MEMBERSHIP&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|
                        </a>
                        <a href="https://shop.americanbar.org/eBus/ABAEventsCalendar.aspx" style="text-decoration:none;color:#006699;display:inline-block;" target="_blank" tabindex="1">
                            &nbsp;&nbsp;&nbsp;&nbsp; CALENDAR&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|
                        </a>
                        <a href="https://www.americanbar.org/cle.html" style="text-decoration:none;color:#006699;display:inline-block;" target="_blank" tabindex="1">
                            &nbsp;&nbsp;&nbsp;&nbsp; CLE&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|
                        </a>
                        <a href="https://www.americanbar.org/publications1.html" style="text-decoration:none;color:#006699;display:inline-block;" target="_blank" tabindex="1">
                            &nbsp;&nbsp;PUBLISHING
                        </a>
                    </td>
                </tr>
                <tr>
                    <td height="3" style="padding:0;font-size:0;line-height:3px;">&nbsp;</td>
                </tr>
            </table>
        </td>
    </tr>
    <tr bgcolor="#006699" class="hide">
        <td height="2" style="padding:0;font-size:0;line-height:2px;">&nbsp;</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;">&nbsp;</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;">&nbsp;</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;">&nbsp;</td>
    </tr>






    <!-- Save the Date -->
    <tr>
        <td height="10" style="padding:0;font-size:0;line-height:10px;">&nbsp;</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;">&nbsp;</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;">&nbsp;</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;">&nbsp;</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;">&nbsp;</td>
                </tr>






                <!-- Secondary Headerd -->
                <tr>
                    <td height="2" style="padding:0;font-size:0;line-height:2px;">&nbsp;</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;">&nbsp;</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;">&nbsp;</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;">&nbsp;</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;">&nbsp;</td>
                </tr>

                <!-- --  -->
                <tr>
                    <td height="15" style="padding:0;font-size:0;line-height:15px;">&nbsp;</td>
                </tr>               

                <!-- Secondary Subheaderf -->
                <tr bgcolor="#E0E0E0">
                    <td height="1" style="padding:0;font-size:0;line-height:1px;">&nbsp;</td>
                </tr>

                <tr>
                    <td height="25" style="padding:0;font-size:0;line-height:25px;">&nbsp;</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;">&nbsp;</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;">&nbsp;</td>
                </tr>
            </table>
            <table width="100%" style="border-spacing:0;">
                <tr>
                    <td height="20" style="padding:0;font-size:0;line-height:20px;">&nbsp;</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;">&nbsp;</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;">&nbsp;</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;">&nbsp;</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;">&nbsp;</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;">&nbsp;</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;">&nbsp;</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;">&nbsp;</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;">&nbsp;</td>
                </tr>               

                <!-- Secondary Subheadergfd -->
                <tr bgcolor="#E0E0E0">
                    <td height="1" style="padding:0;font-size:0;line-height:1px;">&nbsp;</td>
                </tr>

                <tr>
                    <td height="25" style="padding:0;font-size:0;line-height:25px;">&nbsp;</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;">&nbsp;</td>
                </tr>
            </table>
            <table width="100%" style="border-spacing:0;">
                <tr>
                    <td height="20" style="padding:0;font-size:0;line-height:20px;">&nbsp;</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;">&nbsp;</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">&nbsp;</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;">&nbsp;</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">&nbsp;</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;">&nbsp;</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;">&nbsp;</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;">&nbsp;</td>
                </tr>

                                <tr>
                    <td height="2" style="padding:0;font-size:0;line-height:2px;">&nbsp;</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">&nbsp;</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;">&nbsp;</td>
                </tr>

                            <tr>
                    <td height="2" style="padding:0;font-size:0;line-height:2px;">&nbsp;</td>
                </tr>
                <tr>
                    <td role="presentation" style="padding:0 17px;font-size:16px;line-height:20px;co

Kathleen Smith replied 2017-09-30 05:32:31

I would add a class that makes an image full width on mobile, i.e:

.fullwidth {
width: 100%;
height: auto;
display: block;
}

Then set an actual width on the image:

I always do it this way and have never had an issue :)

Reply to Kathleen Smith

Right and Left Space Around Full Width Image in Outlook 2013

Sign in to Community

Join the Litmus Community

Sign up to Community

Get more out of your Litmus account

Forgot password