Email rendering perfect in all clients except Outlook

Report · Oct 29, 2017

Hi,

Im having issues getting my email to render correctly in Outlook. Other clients are showing up ok in Litmus.

I cloned an email that was used before (one that worked) and created a new version. Whatever I did Outlook doesn't seem to like it. Whats weird is that when I replaced the hero image at first it wasn't showing in outlook. I had to use bulletpoof background code to get it to work (outlook workaround) Bulletproof background images | Campaign Monitor

So now my main issue is that the email is getting cut off half way down.

If you paste the code for each you can view them and preview in Dreamweaver since all images are hosted.

I've also attached a screenshot of how it's looking in Outlook on a PC. Mac Outlook renders perfectly.

Litmus is showing that Windows 7 (2007, 2010, 2013, 2016) and lotus notes are having issues.

Thank you for any help!

Both email codes are below-

Here is the original one that works:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head>

<title>My Email Templates</title>

@media only screen{html{min-height:100%;background:#0a0a0a}}@media only screen and (max-width:616px){.small-float-center{margin:0 auto!important;float:none!important;text-align:center!important}}@media only screen and (max-width:616px){table.body img{width:auto;height:auto}table.body

center{min-width:0!important}table.body .container{width:95%!important}table.body .columns{height:auto!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;padding-left:36px!important;padding-right:36px!important}table.body .columns

.columns{padding-left:0!important;padding-right:0!important}table.body .collapse .columns{padding-left:0!important;padding-right:0!important}th.small-6{display:inline-block!important;width:50%!important}th.small-12{display:inline-block!important;width:100%!important}.columns

th.small-12{display:block!important;width:100%!important}table.menu{width:100%!important}table.menu td,table.menu th{width:auto!important;display:inline-block!important}table.menu.vertical td,table.menu.vertical th{display:block!important}table.menu[align=center]{width:auto!important}}

</style>

</head>

<tbody>

</tr>

</tbody>

</table>

<tbody>

</tr>

</tbody>

</table>

<tbody>

</tr>

</tbody>

</table>

<tbody>

</tr>

</tbody>

</table>

<p style="Margin:0;Margin-bottom:10px;color:#fff;font-family:Helvetica,Arial,sans-serif;font-size:28px;font-weight:400;line-height:38px!important;margin:0;margin-bottom:20px;padding:0;text-align:left">You know, the box? Premier would like to help you start finding money in your health system.</p>

<p style="Margin:0;Margin-bottom:10px;color:#fff;font-family:Helvetica,Arial,sans-serif;font-size:28px;font-weight:400;line-height:38px!important;margin:0;margin-bottom:20px;padding:0;text-align:left">To get started, complete the quick six question operational maturity evaluation.</p>

<tbody>

</tr>

</tbody>

</table>

</th>

</tr>

</table>

</th>

</tr>

</tbody>

</table></td></tr></tbody></table><table align="center" class="container float-center" style="Margin:0 auto; background:#333; border-collapse:collapse; border-spacing:0; float:none; margin:0 auto; padding:0; text-align:center; vertical-align:top; width:580px; " ><tbody style="" ><tr style="padding:0; text-align:left; vertical-align:top; " ><td style="-moz-hyphens:auto; -webkit-hyphens:auto; Margin:0; border-collapse:collapse!important; color:#0a0a0a; font-family:Helvetica,Arial,sans-serif; font-size:16px; font-weight:400; hyphens:auto; line-height:1.3; margin:0; padding:0; text-align:left; vertical-align:top; word-wrap:break-word; " ><table class="row dark_body" style="background:#333!important;border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%">

<tbody>

<tbody>

</tr>

</tbody>

</table>

</th>

</tr>

</table>

</th>

</tr>

</tbody>

</table>

<td style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;background:#109132;border:2px solid #109132;border-collapse:collapse!important;color:#fefefe;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;hyphens:auto;line-height:1.3;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word"><a href="http://premierinc.com/foundmoney" style="Margin:0;border:0 solid #109132;border-radius:3px;color:#fefefe;display:inline-block;font-family:Helvetica,Arial,sans-serif;font-size:20px;font-weight:700;line-height:1.3;margin:0;padding:10px 20px 10px 20px;text-align:left;text-decoration:none">COMPLETE MY EVALUATION <img style="-ms-interpolation-mode:bicubic;border:none;clear:both;display:inline-block;max-width:7px!important;outline:0;padding-left:20px;text-decoration:none;width:auto" height="15" width="7" src="http://offers.premierinc.com/rs/381-NBB-525/images/right.png" alt=""></a></td>

</tr>

</table>

</td>

</tr>

</table></th><th class="expander" style="Margin:0;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:1.3;margin:0;padding:0!important;text-align:left;visibility:hidden;width:0"></th>

</tr></table></th></tr></tbody></table><table class="row dark_body" style="background:#333!important; border-collapse:collapse; border-spacing:0; display:table; padding:0; position:relative; text-align:left; vertical-align:top; width:100%; " ><tbody style="" ><tr style="padding:0; text-align:left; vertical-align:top; " ><th class="small-12 large-12 columns first last" style="Margin:0 auto; color:#0a0a0a; font-family:Helvetica,Arial,sans-serif; font-size:16px; font-weight:400; line-height:1.3; margin:0 auto; padding:0; padding-bottom:16px; padding-left:36px; padding-right:36px; text-align:left; width:544px; " ><table style="border-collapse:collapse; border-spacing:0; padding:0; text-align:left; vertical-align:top; width:100%; " ><tr style="padding:0; text-align:left; vertical-align:top; " ><th style="Margin:0; color:#0a0a0a; font-family:Helvetica,Arial,sans-serif; font-size:16px; font-weight:400; line-height:1.3; margin:0; padding:0; text-align:left; " ><p class="mktEditable" id="section3" style="Margin:0; Margin-bottom:10px; color:#fff; font-family:Helvetica,Arial,sans-serif; font-size:16px; font-weight:400; line-height:1.3; margin:0; margin-bottom:10px; padding:0; text-align:left; " >If you would like to complete the evaluation with a sales person...</p></th><th class="expander" style="Margin:0;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:1.3;margin:0;padding:0!important;text-align:left;visibility:hidden;width:0"></th>

</tr></table></th></tr></tbody></table><table class="row dark_body" style="background:#333!important; border-collapse:collapse; border-spacing:0; display:table; padding:0; position:relative; text-align:left; vertical-align:top; width:100%; " ><tbody style="" ><tr style="padding:0; text-align:left; vertical-align:top; " ><th class="small-12 large-12 columns first last" style="Margin:0 auto; color:#0a0a0a; font-family:Helvetica,Arial,sans-serif; font-size:16px; font-weight:400; line-height:1.3; margin:0 auto; padding:0; padding-bottom:16px; padding-left:36px; padding-right:36px; text-align:left; width:544px; " ><table style="border-collapse:collapse; border-spacing:0; padding:0; text-align:left; vertical-align:top; width:100%; " ><tr style="padding:0; text-align:left; vertical-align:top; " ><th style="Margin:0; color:#0a0a0a; font-family:Helvetica,Arial,sans-serif; font-size:16px; font-weight:400; line-height:1.3; margin:0; padding:0; text-align:left; " ><table class="button large sales mktEditable" id="section4" style="Margin:0 0 16px 0; border-collapse:collapse; border-spacing:0; margin:0 0 16px 0; padding:0; text-align:left; vertical-align:top; width:auto; " ><tr style="padding:0;text-align:left;vertical-align:top">

<td style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;background:#109132;background-color:#09a5e6;border:2px solid #109132;border-collapse:collapse!important;border-color:#09a5e6;color:#fefefe;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;hyphens:auto;line-height:1.3;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word"><a href="http://offers.premierinc.com/CM-WC-2017-Cost-Management-Campaign_LP-ThankYouSales.html" style="Margin:0;border:0 solid #109132;border-radius:3px;color:#fefefe;display:inline-block;font-family:Helvetica,Arial,sans-serif;font-size:20px;font-weight:700;line-height:1.3;margin:0;padding:10px 20px 10px 20px;text-align:left;text-decoration:none">GET IN TOUCH WITH SALES <img style="-ms-interpolation-mode:bicubic;border:none;clear:both;display:inline-block;max-width:7px!important;outline:0;padding-left:20px;text-decoration:none;width:auto" height="15" width="7" src="http://offers.premierinc.com/rs/381-NBB-525/images/right.png" alt=""></a></td>

</tr>

</table>

</td>

</tr>

</table></th><th class="expander" style="Margin:0;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:1.3;margin:0;padding:0!important;text-align:left;visibility:hidden;width:0"></th>

</tr></table></th></tr></tbody></table><table class="row dark_body" style="background:#333!important;border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%">

<tbody>

<tbody>

</tr>

</tbody>

</table>

</th>

</tr>

</table>

</th>

</tr>

</tbody>

</table>

<tbody>

</tr>

</table>

</th>

<tbody>

</tr>

</tbody>

</table>

<p style="Margin:0;Margin-bottom:10px;color:#999;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:1.3;margin:0;margin-bottom:10px;padding:0;text-align:right">© 2017 Premier Inc.</p>

</th>

</tr>

</table>

</th>

</tr>

</tbody>

</table>

<tbody>

</tr>

</tbody>

</table>

</td></tr></tbody></table><table class="spacer float-center" style="Margin:0 auto;border-collapse:collapse;border-spacing:0;float:none;margin:0 auto;padding:0;text-align:center;vertical-align:top;width:100%">

<tbody>

</tr>

</tbody>

</table>

</center></td></tr></table>

</body></html>

Here is the one in question:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>My Email Templates</title>

center{min-width:0!important}table.body .container{width:95%!important}table.body .columns{height:auto!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;padding-left:36px!important;padding-right:36px!important}table.body .columns

.columns{padding-left:0!important;padding-right:0!important}table.body .collapse .columns{padding-left:0!important;padding-right:0!important}th.small-6{display:inline-block!important;width:50%!important}th.small-12{display:inline-block!important;width:100%!important}.columns

th.small-12{display:block!important;width:100%!important}table.menu{width:100%!important}table.menu td,table.menu th{width:auto!important;display:inline-block!important}table.menu.vertical td,table.menu.vertical th{display:block!important}table.menu[align=center]{width:auto!important}}</style>

<style>.button {

background: #0099cc;

padding: 10px 75px;

-webkit-border-radius: 0px;

-moz-border-radius: 0px;

border-radius: 0px;

width: 300px;

color: #ffffff;

font-size: 14px;

font-family: helvetica, serif;

text-decoration: none;

vertical-align: middle;

}

</style>

<style>

#footer {

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: justify;

-ms-flex-pack: justify;

justify-content: space-between;

-webkit-box-align: center;

-ms-flex-align: center;

align-items: center;

-ms-flex-wrap: wrap;

flex-wrap: wrap;

background-color: #666666;

padding: 30px 60px;

}

@media screen and (max-width: 768px) {

#footer {

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-ms-flex-direction: column;

flex-direction: column;

}

.social_icons {

display: -webkit-box;

display: -ms-flexbox;

display: flex;

}

@media screen and (max-width: 768px) {

.social_icons {

margin: 15px 0 0 0;

}

.social_icons div {

margin: 0 0 0 5px;

}

#logo {

width: 216px;

height: 46px;background:url(http://offers.premierinc.com/rs/381-NBB-525/images/logo_1.png);

}

#twiterr_icon {

width: 35px;

height: 35px;

background:url(http://offers.premierinc.com/rs/381-NBB-525/images/twiterr_icon.png);

}

#linkedin_icon {

width: 35px;

height: 35px;

background:url(http://offers.premierinc.com/rs/381-NBB-525/images/linkedin_icon.png);

}

#insta_icon {

width: 35px;

height: 35px;

background:url(http://offers.premierinc.com/rs/381-NBB-525/images/insta_icon.png);

}

#youtube_icon {

width: 35px;

height: 35px;

background:url(http://offers.premierinc.com/rs/381-NBB-525/images/youtube_icon.png);

}

#fb_icon {

width: 35px;

height: 35px;

background:url(http://offers.premierinc.com/rs/381-NBB-525/images/fb_icon.png);

}</style>

</head>

<body

style="-moz-box-sizing:border-box;-moz-hyphens:none!important;-ms-hyphens:none!important;-ms-text-size-adjust:100%;-webkit-box-sizing:border-box;-webkit-hyphens:none!important;-webkit-text-size-adjust:100%;Margin:0;background:#000;box-sizing:border-box;color:#ffffff;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;hyphens:none!important;line-height:1.3;margin:0;min-width:100%;padding:0;text-align:left;width:100%!important">

<table class="body"

style="-moz-hyphens:none!important;-ms-hyphens:none!important;-webkit-hyphens:none!important;Margin:0;background:#0a0a0a;border-collapse:collapse;border-spacing:0;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;height:100%;hyphens:none!important;line-height:1.3;margin:0;padding:0;text-align:left;vertical-align:top;width:100%">

<td class="center" align="center" valign="top"

style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;hyphens:auto;line-height:1.3;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word"><center

data-parsed="" style="min-width:580px;width:100%">

<tbody>

<td height="20px"

style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:20px;font-weight:400;hyphens:auto;line-height:20px;margin:0;mso-line-height-rule:exactly;padding:0;text-align:left;vertical-align:top;word-wrap:break-word"> </td>

</tr>

</tbody>

</table>

<tbody>

<!--[if gte mso 9]>

<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:580px;height:420px;">

<v:fill type="tile" src="http://offers.premierinc.com/rs/381-NBB-525/images/rsv-free.jpg" color="#7bceeb" />

<v:textbox inset="0,0,0,0">

<![endif]-->

<div>

<table class="row top_hero_area_reminder mktEditable" id="section1"

style="background-image:url(http://offers.premierinc.com/rs/381-NBB-525/iages/rsv-free.jpg)!important;border-collapse:collapse;b... no-repeat;">

<tbody>

<tbody>

<td height="60px"

style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:60px;font-weight:400;hyphens:auto;line-height:60px;margin:0;mso-line-height-rule:exactly;padding:0;text-align:left;vertical-align:top;word-wrap:break-word"> </td>

</tr>

</tbody>

</table>

<tbody>

<td height="40px"

style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:40px;font-weight:400;hyphens:auto;line-height:40px;margin:0;mso-line-height-rule:exactly;padding:0;text-align:left;vertical-align:top;word-wrap:break-word"> </td>

</tr>

</tbody>

</table>

<h1 style="Margin:0;Margin-bottom:10px;color:#fff;font-family:Helvetica,Arial,sans-serif;font-size:42px;font-weight:400;line-height:1;margin:0;margin-bottom:0!important;padding:0;padding-bottom:0!important;text-align:left;text-transform:uppercase;word-wrap:normal"><p><span style="color: #99ffff">MAKE THIS AN</span><br><b>RSV-FREE</b> <span style="color: #99ffff">SEASON</span></h1>

<tbody>

</tr>

</tbody>

</table>

PREMIER AND SYNAGIS®</p>

<tbody>

</tr>

</tbody>

</table>

</th><th class="expander" style="Margin:0;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:1.3;margin:0;padding:0!important;text-align:left;visibility:hidden;width:0"></th>

</tr>

</table>

</th>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

<tbody>

<tbody>

<th height="234" class="small-12 large-12 columns first last" style="Margin:0 auto;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;line-height:1.3;margin:0 auto;padding:0;padding-left:36px;padding-right:36px;padding-top:25px;text-align:left;width:544px"><p>Now that fall is here, it’s time to consider preventative measures to minimize the spread of RSV and its potentially life-threatening effects on children.</p>

<p>As a provider, your specialty pharmacy decision-making, coordination and clinical management are crucial to your patients’ care and well-being. The smart choice toward an RSV-free season is Synagis®, the only FDA-approved medication to prevent RSV infections.</p>

<p>Premier established its Specialty Pharmacy and Care Management program to create medications like Synagis® to assist with the growing challenges of this market, including:</p></th>

</tr>

</tbody>

</table>

<tbody>

<tbody>

<td height="20px"

style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;hyphens:auto;line-height:20px;margin:0;mso-line-height-rule:exactly;padding:0;text-align:left;vertical-align:top;word-wrap:break-word"><p><span style="color: #0099cc"> <b>ACCESS</b></span><br />

Premier will work with you to create an enhanced patient experience by alleviating barriers to therapy with prior authorizations <br />

and additional support.</p>

<p><span style="color: #0099cc"><b>AFFORDABAILITY</b></span><br />

Co-pay programs and financial assistance will help your patients get the treatment you prescribe and that they so desperately need.</p>

<p><span style="color: #0099cc"><b>ADHERENCE</b></span><br />

Our unique high-touch model optimizes clinical care management and produces best-in-class adherence rates.</p></td>

</tr>

</tbody>

</table>

</th><th class="expander" style="Margin:0;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:1.3;margin:0;padding:0!important;text-align:left;visibility:hidden;width:0"></th>

</tr>

</table>

</th>

</tr>

</tbody>

</table>

<tbody>

<th height="234" class="small-12 large-12 columns first last" style="Margin:0 auto;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;line-height:1.3;margin:0 auto;padding:0;padding-left:36px;padding-right:36px;text-align:left;width:544px"><p>It’s a patient-centric approach to preventative therapy that means powerful adherence rates, improved patient outcomes and most importantly, healthier children.</p><hr width="100%"><p>Download this informative infographic to learn more about making

it an RSV-free season.</p><br><a href='https://learn.premierinc.com/ebooks/sepsis-infographic' class='button'>DOWNLOAD NOW</a><p><br><hr width="100%"></p>

</th>

</tr>

</tbody>

</table>

</div>

</div>

</tbody>

</table>

<tbody>

</div>

<!--[if gte mso 9]>

</v:textbox>

</v:rect>

<![endif]-->

</td>

</tr>

</tbody>

</table>

<tbody>

</tbody>

</table>

</body>

</html>

Report · Oct 29, 2017

Me no see that Flexbox can be used in Outlook etc Can you?

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · Oct 30, 2017

Hi Ben,

Yes flexbox could have worked to make responsive. The email resizes great as far as mobile devices. Whats weird is I didn't change all that much to the template. I just added a footer and copy to the body and the hero image. I'm not sure what it doesn't like.

Report · Oct 30, 2017

Email clients do not adhere to web standards, in fact the best way to develop an email is to go back to the pre-CSS era when we used tables to create a web document.

Have a look at https://webdesign.tutsplus.com/articles/creating-a-simple-responsive-html-email--webdesign-12978 or Google the subject.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · Oct 31, 2017

Thanks Ben,

Yes I believe I will be moving in that direction. Outlook is killing me. Thanks for the link thats helps!

Email rendering perfect in all clients except Outlook

1 Correct answer