1

I'm having a problem with Gmail App (Android 6.0) HTML email rendering vertical gaps between images. I have no problems at all in other client/screen combinations in Litmus - desktop, mobile, Outlook, IOS, AOL, etc

If I remove the td tags between the images and use float left, Android stacks the images on top of each other.

If I replace 

<!--[if !gte mso 15]><!--></td><td valign="bottom"><!--<![endif]-->

with 

</td><td>

as I had originally, both the Gmail App AND Outlook have the vertical line gaps.

Can anyone suggest a way to improve the code?

Thanks

Gmail App Adnroid 6

<table width="640" border="0" cellspacing="0" cellpadding="0" style="text-decoration:none;border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;table-layout:fixed;border-spacing:0;table-layout:auto;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;text-decoration: none;table-layout: auto;border-spacing: 0; ">
<tbody>
  <tr>
    <td>
      <a target="_blank" href="http://www.....com/why-use-a-centrifugal-separator.html" style="color:#000000;cursor:pointer;text-decoration:none !important;color: #000000;cursor: pointer;text-decoration: none !important;"><img width="231" height="202" border="0" alt="Read more about keeping oil cleaner longer" src="http://www.....com/emailer/201709/images/keepoilcleanerlonger_100_231x202.jpg" style="-ms-interpolation-mode:bicubic;text-align:center;line-height:20px;width: 231px; height: 202px; display: block; margin: 0px; outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;border: none;display: block;"></a>
      <!--[if !gte mso 15]><!--></td><td valign="bottom"><!--<![endif]-->
      <a target="_blank" href="http://www.....com/why-use-a-centrifugal-separator.html" style="color:#000000;cursor:pointer;text-decoration:none !important;color: #000000;cursor: pointer;text-decoration: none !important;"><img width="178" height="202" border="0" alt="Read more about reducing man service hours" src="http://www.....com/emailer/201709/images/reduceservicemanhours_100_178x202.jpg" style="-ms-interpolation-mode:bicubic;text-align:center;line-height:20px;width: 178px; height: 202px; display: block; margin: 0px; outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;border: none;display: block;"></a>
      <!--[if !gte mso 15]><!--></td><td valign="bottom"><!--<![endif]-->
      <a target="_blank" href="http://www.....com/assets/web-and-email-a4-mp200-data-sheet-v08.pdf" style="color:#000000;cursor:pointer;text-decoration:none !important;color: #000000;cursor: pointer;text-decoration: none !important;"><img width="231" height="202" border="0" alt="Read more about adding to existing power units" src="http://www.....com/emailer/201709/images/addtoexistingpowerunits_100_231x202.jpg" style="-ms-interpolation-mode:bicubic;text-align:center;line-height:20px;width: 231px; height: 202px; display: block; margin: 0px; outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;border: none;display: block;"></a>
    </td>
    </tr>
</tbody>

Steve
  • 988
  • 1
  • 12
  • 25

1 Answers1

0

I figured out your problem. You're using invalid href and img code.

This will never work as a url or as an image: 

http://www.....com

I could swap those out with placeholder images and maybe come up with a better idea of what your actual issue is, but if you're only posting a section of your code, I can only post a portion of a solution to your problems.

I see you didn't get a response on Litmus either.

gwally
  • 3,349
  • 2
  • 14
  • 28