SOLVED

Re: Best solution to fix image rendering issue in MSO Outlook?

Go to solution
Guitarrista82
Level 6

Best solution to fix image rendering issue in MSO Outlook?

Hello Community,

 

I have added code that appears to have fixed an issue with images appearing cut off or not appearing at all in my desktop MSO 365 Outlook inbox (Version 2201 Build 16.0.14827.20186).

 

Guitarrista82_0-1645137412413.png

 

As you can see, the images have been uploaded in a RTE that is contained in a Module:

 

Guitarrista82_2-1645138515942.png

Guitarrista82_3-1645138591478.png

 

The fix I applied was to add the following code to the <head> section:

 

<!--[if mso]>
<style>
td, th {
line-height: 0px !important;
}
</style>
<![endif]-->

 

 

The images are now rendering perfectly:

 

Guitarrista82_1-1645138223498.png

 

My question is whether there's any chance the code I added to the <head> section could adversely impact anything in the template. I don't believe it would, but I just want to be sure.

 

Thanks for your help!

 

LK

 

 

1 ACCEPTED SOLUTION

Accepted Solutions
SanfordWhiteman
Level 10 - Community Moderator

Re: Best solution to fix image rendering issue in MSO Outlook?

You can add classes — that’s a better move when you know something works in a <style> to begin with.

View solution in original post

4 REPLIES 4
SanfordWhiteman
Level 10 - Community Moderator

Re: Best solution to fix image rendering issue in MSO Outlook?

Well, it’ll apply to all table columns and table headers anywhere in the email — only under Outlook, of course, but throughout the entire email. Impossible to say if that’ll break anything, since there’s a chance some other elements don’t expect this style.

Guitarrista82
Level 6

Re: Best solution to fix image rendering issue in MSO Outlook?

Thanks Sanford.

 

In that case, would it be better to apply the styling inline like below?

<!--[if mso]>
<tr style="line-height:0px !important;">
<td align="center" valign="top" class="em_defaultlink" style="border-collapse: collapse; mso-line-height-rule: exactly; font-family:'Helvetica', Arial, sans-serif;font-size:24px;line-height:0px !important;color:${brand_colors_1};font-weight:bold;">
<![endif]-->

 

Or to perhaps add classes to the code?

 

This is the code for the "header text" where the image is being placed.

 <tr>
                                          <td align="center" valign="top" class="em_defaultlink" style="border-collapse: collapse; mso-line-height-rule: exactly; font-family:'Helvetica', Arial, sans-serif;font-size:24px;line-height:27px;color:${brand_colors_1};font-weight:bold;">
                                            <div class="mktoText" id="Mod_39_Text" mktoName="Headline Text">Headline Goes Here</div>
                                          </td>
                                        </tr>

 

Thank you,

LK

 

SanfordWhiteman
Level 10 - Community Moderator

Re: Best solution to fix image rendering issue in MSO Outlook?

You can add classes — that’s a better move when you know something works in a <style> to begin with.

Guitarrista82
Level 6

Re: Best solution to fix image rendering issue in MSO Outlook?

Got it, thanks Sanford!