HTML email horizontal line/gap/border between sliced images on Gmail App Dark (Android 11.0)

Question

HTML email horizontal line/gap/border between sliced images on Gmail App Dark (Android 11.0)

491 Views Asked by failedCoder At 12 April 2023 at 15:25

I'm making an HTML email newsletter. There is this one image that spliced in two so I could put different link on both parts of the image.

The issue is that I have this tiny 1px gap between images visible on Gmail App Dark (Android 11.0). Those two images should look like one seamless image without any vertical spacing between them.

HTML:

   <tr>
      <td align="center" style="padding-top: 20px; background-color: #f9f7f4;line-height: 0;padding-bottom: 0;margin: 0;">
        <a href="#" target="_blank" style="text-decoration:none;margin: 0;line-height: 0;">
          <img align="center" src="upper.png" alt="Placeholder" width="507" height="189" style="display: block;border-collapse: collapse;margin: 0;padding: 0;" border="0">
        </a>
      </td>
    </tr>
    <tr>
      <td align="center" style="padding-bottom: 50px; background-color: #f9f7f4;line-height: 0;margin: 0;padding-top: 0;">
        <a href="#" target="_blank" style="text-decoration:none;margin: 0;line-height: 0;"> 
          <img align="center" src="lower.png" alt="Placeholder" width="507" height="93" style="display: block;border-collapse: collapse;margin: 0;padding: 0;" border="0">
        </a>
      </td>
    </tr>

After browsing through dozens of similar questions and spending hours on this I still wasn't able to solve this issue. Here are some of the things I've tried:

removing margins, paddings, linebreaks
wrapping <a> tags with <p style="margin:0">
replacing png with jpg images
replacing images all together
setting width="100%" and height="auto" while setting max-width and max-height in style
removing <a> tags
wrapping <a> tags in <div style="line-height: 0; font-size:0">
etc...

What can I try next?

Original Q&A

There are 1 best solutions below

**Nathan** · Answer 1 · 2023-04-17T03:25:23.290000

Please try:

Border on the <a>, i.e. <a style="...border:none;">

Resetting the table settings, i.e. <table width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation">

While you have used display:block on the image, you could instead use vertical-align:middle (but it should do the same thing - i.e. remove the space under the image)

Also, try using an actual valid link when testing, if you're not already. Sometimes things change when you have an invalid link like "#" (but I can only think of Outlook.com doing funny things).

This worked for me:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"  xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
   <!-- START HEAD v5-->
  <head></head>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <!--[if !mso]><!-->
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <!--<![endif]-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="format-detection" content="telephone=no" />
  <meta name="x-apple-disable-message-reformatting" />
  <title></title>
  <!--[if mso]>
  <style type="text/css">
  table {
    border-collapse: collapse;
    mso-table-lspace: 0pt;
    mso-table-rspace: 0pt;
  }
  </style>
  <![endif]-->
  <!--[if mso]><xml>
  <o:OfficeDocumentSettings>
    <o:AllowPNG/>
    <o:PixelsPerInch>96</o:PixelsPerInch>
  </o:OfficeDocumentSettings>
</xml><![endif]-->

</head>
 <!-- END HEAD -->
    <body id="body" style="margin:0;padding:0;min-width:100%;">
    <!-- START OUTER WRAPPER -->
    <center id="wrapper" style="width:100%;table-layout:fixed;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;">
        <div style="max-width:600px;">
            <!--[if mso]><table width="600" align="center" cellpadding="0" cellspacing="0" role="presentation"><tr><td style="padding:0;"><![endif]-->
            <table class="outer" align="center" style="font-family:Arial, sans-serif;color:#333333;font-size:16px;margin:0 auto;width:100%;max-width:600px;" cellpadding="0" cellspacing="0" role="presentation">
            <!-- END OUTER WRAPPER -->
                <tr>
      <td align="center" style="padding-top: 20px; background-color: #f9f7f4;line-height: 0;padding-bottom: 0;margin: 0;">
        <a href="https://www.google.com" target="_blank" style="text-decoration:none;margin: 0;line-height: 0;">
          <img align="center" src="https://via.placeholder.com/507x93/eeeeee" alt="Placeholder" width="507" height="93" style="display: block;border-collapse: collapse;margin: 0;padding: 0;" border="0">
        </a>
      </td>
    </tr>
    <tr>
      <td align="center" style="padding-bottom: 50px; background-color: #f9f7f4;line-height: 0;margin: 0;padding-top: 0;">
        <a href="https://www.google.com" target="_blank" style="text-decoration:none;margin: 0;line-height: 0;"> 
          <img align="center" src="https://via.placeholder.com/507x93/f2f2f2" alt="Placeholder" width="507" height="93" style="display: block;border-collapse: collapse;margin: 0;padding: 0;" border="0">
        </a>
      </td>
    </tr>
            <!-- START OUTER WRAPPER -->
            </table>
            <!--[if mso]></td></tr></table><![endif]-->
        </div>
    </center>
    <!-- END OUTER WRAPPER -->
</body>
</html>

HTML email horizontal line/gap/border between sliced images on Gmail App Dark (Android 11.0)

There are 1 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in HTML-EMAIL

Related Questions in NEWSLETTER

Related Questions in LITMUS

Trending Questions

Popular # Hahtags

Popular Questions