1

I am trying to pass this issue for some time already and tried to read through many topics but nothing works...

The thing is that I have an html (images) email, it works perfectly in all desktop clients, but it has some troubles on iPhones and Gmail app.

It displays small gaps between tables on some resolutions, when I zoom or move the phone. As it is dissapearing sometimes I think it is a rendering problem, but how can I avoid that, please?

Complete zip with different images here - you can see that there are no gaps in normal browsers and clients, but if you send it as an html email, than there are small gaps in Gmail app or iPhones on some resolutions (when you zoom or on SE) around the "button" rows.

I think those are some borders or outlines between table, but when the table looks like the following code, it should not make it I thought :)

<body bgcolor="#efefef" style="border:none; margin: 0; padding: 0; background: #efefef;">
    <center bgcolor="#efefef" style="border:none; background: #efefef;">
        <table bgcolor="#efefef" style="border:none; background: #efefef;">
            <tr>
                <td valign="bottom" width="100%" height="50" bgcolor="#efefef" style="border:none; background: #efefef;">
                    &nbsp;
                </td>
            </tr>
            <tr>
                <td valign="bottom" width="100%" height="100%" bgcolor="#efefef" style="border:none; background: #efefef;">
                    <table width="600" class="part0-top" border="0" cellpadding="0" cellspacing="0" style="outline: 0; border:none; border-spacing:0; margin-top: -1px; margin-bottom: -1px; margin-left: 0; margin-right: 0; padding: 0; border-collapse: collapse; width: 600px; min-width: 600px; background: #fbfbfb;">
                        <tr width="600" style="white-space: nowrap; border:none; width: 600px; min-width: 600px;" align="center">
                            <td valign="bottom" align="center" width="600" style="border:none; width: 600px; min-width: 600px;">
                                <img border="0" src="https://gallery.mailchimp.com/4bad622b5a83be7ae967ded92/images/121e2b35-d2bf-432e-af5f-ca5d2bed02fc.jpg" alt="Bang & Olufsen" width="600" style="border:none; width: 600px; min-width: 600px; margin: 0; padding: 0; display: block; outline: none">
                            </td>
                        </tr>
                    </table>
                    <table width="600" class="part1-header" border="0" cellpadding="0" cellspacing="0" style="outline: 0; border:none; border-spacing:0; margin-top: -1px; margin-bottom: -1px; margin-left: 0; margin-right: 0; padding: 0; border-collapse: collapse; width: 600px; min-width: 600px; background: #fbfbfb;">
                        <tr width="600" style="white-space: nowrap; border:none; width: 600px; min-width: 600px;" align="center">
                            <td valign="bottom" align="center" width="30" style="border:none; text-align: left; width: 30px; min-width: 30px;">
                                &nbsp;
                            </td>
                            <td valign="bottom" align="center" width="470" style="border:none; text-align: left; width: 470px;">
                                <a href="http://www.bang-olufsen.com/en" target="blank" style="border:none; text-decoration: none !important; outline: none !important;">
                                    <img border="0" width="122" src="https://gallery.mailchimp.com/4bad622b5a83be7ae967ded92/images/ce1f5c26-972b-4043-8e44-0ca6b8d5a3ec.jpg" alt="Bang & Olufsen" style="border:none; width: 122px; margin: 0; padding: 0; display: block; outline: none">
                                </a>
                            </td>
                            <td valign="bottom" align="center" width="70" style="border:none; text-align: right; width: 70px;">
                                <a href="http://www.beostore.cz" target="blank" style="border:none; text-decoration: none !important; outline: none !important; display: block; text-align: right;">
                                    <img border="0" width="70" src="https://gallery.mailchimp.com/4bad622b5a83be7ae967ded92/images/a0c2157a-a67d-4149-8df5-5e3b5419dbe8.jpg" alt="Beostore.cz | Bang & Olufsen" style="border:none; width: 70px; margin: 0; padding: 0; display: block; outline: none">
                                </a>
                            </td>
                            <td valign="bottom" align="center" width="30" style="border:none; text-align: right; width: 30px; min-width: 30px;">
                                &nbsp;
                            </td>
                        </tr>
                    </table>

Android - Gmail app: screen of the gaps

Thanks for your help! :)

Tomas Jirka
  • 11
  • 1
  • As a simple solution, could you apply the dark colour as a background colour of the body? – Paul Redmond Oct 26 '16 at 13:26
  • I smell `table` usage for layout purposes. Can't believe I see this in 2016. Or is this owed to the fact that it is for email usage? – connexo Oct 26 '16 at 13:30
  • It is email usage of course :) The thing is that the colour of the email is changing throughout the email so I cant simply use a background-color to fix it, still the lines are visible. Weird thing is that all the tables have some kind of 1 px border even though I set it everywhere as 0. – Tomas Jirka Oct 26 '16 at 15:41

0 Answers0