Email template question -Email doesn't render correctly in Outlook(PC) but it's ok on Outlook(MA

[gramirez]

View of email in Outlook on a MAC.This is the view from Outlook on a PCI have never built or edited an email in HubSpot before. I received a request to fix this problem that someone else coded and I have no idea how to fix it. The problem is the email preview looks ok in HubSpot and on a MAC but it doesn't render the same inside of Outlook email on a PC. (See Screenshots) It might be some compatibilty code I'm missing.HubSpot Email Editor SettingsHero Section - module

<table cellpadding="0" cellspacing="0" border="0" width="100%" align="center">
<tbody>
<tr>
<td background="{{ module.hero_background.src }}" align="center" style="text-align: center; padding: 0; font-family: {{ primary_font }}; font-size: {{ primary_font_size }}; line-height: 1.5em; color: {{ module.text_color.color }}; background-size: cover; background-image: url('{{ module.hero_background.src }}');" bgcolor="{{ module.background_color.color }}">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width: 600px;">
<v:fill type="tile" src="{{ module.hero_background.src }}" color="{{ module.background_color.color }}" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<table cellpadding="0" cellspacing="0" border="0" width="100%" align="center">
<tbody>
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" border="0" width="540" align="center" class="full-width">
<tr>
<td height="65" style="line-height:1px;font-size:1px;border-color:grey;">&nbsp;</td>
</tr>
<tr>
<td style="text-align: center; padding: 0; font-family: {{ primary_font }}; font-size: {{ primary_font_size }}; line-height: 1.5em; color: {{ primary_font_color }}; background-color:transparent;">
<table cellpadding="0" cellspacing="0" border="0" width="100%" align="center">
<tbody>
<tr>
<td style="text-align: center; padding: 0; font-family: {{ primary_font }}; font-size: {{ primary_font_size }}; line-height: 1.5em; color: {{ module.text_color.color }}; font-weight:700;font-size:36px;font-family:'Helvetica', sans-serif, Arial;line-height:47px;text-align:center; padding:0px 10px 30px 10px;">
{% inline_text field="banner_text" value="{{ module.banner_text }}" %}
</td>
</tr>
<tr>
<td style="text-align: center;">
{% cta guid="{{ module.cta }}" %}
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td height="65" style="line-height:1px;font-size:1px;border-color:grey;">&nbsp;</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if gte mso 9]>
<p style="margin:0;mso-hide:all"><o:p xmlns:o="urn:schemas-microsoft-com:office:office">&nbsp;</o:p></p>
</v:textbox>
</v:rect>

<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>

<![endif]-->
</td>
</tr>
</tbody>
</table>

[Jake_Lett]

Unfortunately, background images on tables do not render the same on different email clients. A quick fix would be to apply the background images with a CSS class and remove it from the inline style tag. Instead add a solid background color.

So outlook and older email clients get a solid color, anything newer will read your CSS class and apply the background image.

Or you could create the graphic in Photoshop and bake the text in the image. Then add the text to the alt="".

Other resources to try

• https://backgrounds.cm/
• https://litmus.com/community/learning/25-understanding-background-images-in-email

---

Jacob Lett

Freelance HubSpot CMS Developer & Web Designer

---

Located in Michigan, USA

Get a free estimate now ›

[gramirez]

Jacob,

Thank you so much for your reply! I appreciate you providing multiple "possible" solutions. Those links are very helpful too! I actually went to your website and left a chat message for you as well. Thanks again!