HTML email horizontal line/gap/border between sliced images on Gmail App Dark (Android 11.0)
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?
Comments
Post a Comment