Email template appearing with a white line between image blocks | Community
Skip to main content
Level 5
July 8, 2024
Question

Email template appearing with a white line between image blocks

  • July 8, 2024
  • 1 reply
  • 1570 views

Hi everybody!

We have an email template on ACS that worked without an issue until recently. We noticed the images were not loading on the new Outlook version or Outlook Web, but it was okay for Gmail and other boxes.
Our agency partner informed us that it was because the images we were using were HTTP and not HTTPS. 
We corrected this and the images are loading, but now we are facing some white lines around the images for Outlook and Gmail.

How can we correct that?
darkmode 

& regular:


thanks in advance

 

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

1 reply

ccg1706
Community Advisor
Community Advisor
July 31, 2024

Hi  @fern1!

 

I share with you recommendations that you can check if they are feasible. 

  1. Check for Extra Spacing or Padding: Be sure there is no extra padding, margin, or border applied to the images in the HTML code.

<img src="https://example.com/image.jpg" style="border: 0; display: block;" />

  1. Use Inline Styles: Use inline CSS to set the image display properties. This can help ensure consistency across different email clients

<img src="https://example.com/image.jpg" style="display: block; border: 0; margin: 0; padding: 0;" />

  1. Table Layout: Wrap your images in table cells to ensure there are no gaps caused by different rendering engines.

<table cellspacing="0" cellpadding="0" border="0">

  <tr>

    <td style="padding: 0; border: 0; margin: 0;">

      <img src="https://example.com/image.jpg" style="display: block; border: 0;" />

    </td>

  </tr>

</table>

  1. VML for Outlook: For better rendering in Outlook, you might consider using (Vector Markup Language) for your images

<!--[if gte mso 9]>

<v:image xmlns:v="urn:schemas-microsoft-com:vml" src="https://example.com/image.jpg" style="width:600px;height:200px;border:0;display:block;" />

<![endif]-->

<img src="https://example.com/image.jpg" style="display:block; border:0; outline:none; text-decoration:none; width:600px; height:auto;"/>

  1. Reset CSS: Include a CSS reset for images at the top of your email’s inline CSS

<style type="text/css">

  img { display: block; border: 0; margin: 0; padding: 0; }

</style>

Test it on tool like Litmus or Email on Acid once changed to preview how your email renders across different platforms and devices.

¡Hope this helps!

Regards,

Celia