Cropped Hero Image in Outlook | Community
Skip to main content
J
jenncannon16470
Level 1
February 18, 2020
Question

Cropped Hero Image in Outlook

  • February 18, 2020
  • 2 replies
  • 3503 views
I am hoping you can help me out. I have an email that is giving me a few problems with an email rendering in Outlook. Below is a forwarded screenshot from one user's email and it appears fine. 
 
I've also copied in a pic from my boss' Outlook - her hero image (a blue/green rack of servers) is cut-off as the width is cropped. it may be the code, but I've test sampled this thing on many different computer and hers is the only error I've found. (See below).
      
I'm also attaching the hero section of email code. Anyway I can get help to figure this out? I manipulated a template from Marketo to get a look we liked. There may be extra code that is not necessary. Any help is appreciated and thank you in advance!

 

 

<table id="hero" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" align="center" border="0" cellpadding="0" cellspacing="0" width="100%" class="mktoModule m_hero" mktoname="Hero"> <tbody> <tr> <td class="background" style="-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;font-family: Arial, Helvetica, sans-serif;-ms-text-size-adjust: 100%;vertical-align: middle;height: 390px;background-repeat: no-repeat;background-position: center center;background:${heroBackgroundImage};background-color:${heroBackgroundColor};padding-top: 0;padding-right: 0;padding-bottom: 0;padding-left: 0;background-image:${heroBackgroundImage};border-collapse: collapse;" height="390" background="http://go.unicomengineering.com/rs/221-VVO-216/images/NewsletterHeroImage_640x390.jpg" bgcolor="${heroBackgroundColor}" valign="top" width="640"> <center> <!--[if gte mso 9]> <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:640px;height:353px"> <v:fill type="frame" src="${heroBackgroundImage}" color="${heroBackgroundColor}" /> <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0"> <![endif]--> <table class="table600" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;" align="center" border="0" cellpadding="0" cellspacing="0" width="600"> <tbody> <tr> <td class="" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; font-family:Arial, Helvetica, sans-serif; border-collapse: collapse;" height="86">&nbsp;</td> </tr> <tr> <td class="primary-font title" style="hyphens: none;-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;-ms-text-size-adjust: 100%;font-family:Arial, Helvetica, sans-serif;;font-size: 60px;line-height: 90%;color: #ffffff;font-weight: bold;text-align: left;border-collapse: collapse;"> <div class="mktoText" mktoname="Title" id="title"> TECH UPDATE </div> </td> </tr> <tr> <td style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; font-family: Arial, Helvetica, sans-serif; border-collapse: collapse;" height="10">&nbsp;</td> </tr> <tr> <td class="primary-font subtitle" style="hyphens: none;-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;-ms-text-size-adjust: 100%;font-family: Arial, Helvetica, sans-serif;;text-align: left;color: #ffffff;font-weight: bold;font-size: 15px;letter-spacing: 1px;border-collapse: collapse;"> <div class="mktoText" mktoname="Subtitle" id="subtitle"> <p>Bringing Applications to Market in an Age of Digital Transformation</p> </div> </td> </tr> <tr> <td style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; font-family: Arial, Helvetica, sans-serif; border-collapse: collapse;" height="30">&nbsp;</td> </tr> <tr> <td class="cta" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; font-family: Arial, Helvetica, sans-serif; border-collapse: collapse;"> <center> <table style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" align="left" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; font-family: Arial, Helvetica, sans-serif; border-collapse: collapse;" align="center" bgcolor="${heroButtonBackgroundColor}"> <a href="${heroLink}" target="_blank" class="primary-font button" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;display: inline-block;font-size: 14px;font-family:Arial, Helvetica, sans-serif;color: white;padding-top: 12px;padding-right: 18px;padding-bottom: 12px;padding-left: 18px;border-top-width:${heroBorderSize};border-right-width:${heroBorderSize};letter-spacing: 3px;border-left-width:${heroBorderSize};border-top-style: solid;border-right-style: solid;border-bottom-style: solid;border-left-style: solid;border-bottom-width:${heroBorderSize};text-decoration: none;border-top-color:${heroBorderColor};border-right-color:${heroBorderColor};border-bottom-color:${heroBorderColor};border-left-color:${heroBorderColor};background-color:${heroButtonBackgroundColor}">${heroLinkText}</a> </td> </tr> </tbody> </table> </center> </td> </tr> <tr> <td style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; font-family: Arial, Helvetica, sans-serif; border-collapse: collapse;" height="86">&nbsp;</td> </tr> </tbody> </table> <!--[if gte mso 9]> </v:textbox> </v:rect> <![endif]--> </center></td> </tr> </tbody> </table>

 

 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

2 replies

SanfordWhiteman
SanfordWhiteman
Level 10
February 19, 2020
What version of Outlook (desktop) exactly?
J
jenncannon16470Author
Level 1
February 20, 2020

This particular problem is happening on the Office 365 version of Outlook, though it also occurred on the 2016 version she had previously. Across most email platforms I have not encountered this rendering, but hers. Thank you for the help!

LauraM
LauraM
Level 2
May 12, 2020

Hi Jenn,

Did you ever find a fix for this issue? I'm having the exact same problem, several people in my company are experiencing it but not everyone.

 

It's only in Outlook, and it doesn't seem to matter the version (one person will see it, one won't, they're on the exact same version). This is the first time i've come across someone else experiencing it.

 

Thank you!

LauraM
LauraM
Level 2
June 20, 2020

Hi Jenn,

 

After a whole lot of digging, i finally fixed this problem if you're interested. Here's what I did:

 

Updated the DOCTYPE:

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

 

And updated the if mso condition in the background image <td>:

<!--[if mso]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="border:0; display:inline-block; width:527pt; height:218pt;" src="${largeBannerBackgroundImage}" />
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="border:0;display:inline-block; position:absolute; width:527pt; height:218pt;">
<v:fill opacity="0%" color="${largeBannerBackgroundColor}" />
<v:textbox inset="0,0,0,0">
<![endif]-->

 

End of background image <td>

<!--[if mso]>
</v:textbox>
</v:fill>
</v:rect>
</v:image>
<![endif]-->

 

Hope that helps, it solved the problem for me!

Terms & ConditionsAccessibility statement

Loading footer...