Community Forum

Over the years we have built up a community of email marketers, coders and designers that live and breathe email.

Use the Email on Acid Forum like your virtual water cooler: Stop by to discuss email code, quirky clients and fixes and post your issues (with an example of the code) for our community to offer its assistance.

 
   
Hairline borders between my tables in Gmail Android App.

ajlaporte

Newbie
Total Posts:  2
Posted: 08 June 2016 08:02 AM

I am going crazy trying to figure out why this happening.  I have hairline borders appearing between my tables in my Gmail App on Android. This doesnt appear in any other client but the gmail app. Any assistance or input anyone could have would be really appreciated. I have border-collapse:collapse on all tables with cellpadding, cellspacing, border and border-spacing all set to 0.

Below is the code of the two images you see in the attachment.

<!--
    **********         
MODULE HEADER         **********
    -->

    <!-- 
SECTION WRAPPING TABLE 100Width-->
    <
table cellpadding="0" cellspacing="0" border="0" align="center" width="100%" class="" style="background:#4A4A4A;">
        <
tbody>
            <
tr>
                <
td cellpadding="0" cellspacing="0" border="0" align="center">
                    <!-- 
HEADER WRAPPING TABLE - .viewportWrapper -->
                    <
table cellpadding="0" cellspacing="0" border="0" align="center" class="viewportWrapper" width="600" style="background:#FFFFFF;border-color:#FFFFFF;">
                        <
tbody>
                            <
tr>
                                <
td style="padding-top:20px;padding-right:20px;padding-bottom:0px;padding-left:20px;width:100%;">
                                    <!-- 
TOP IMAGE FOR HEADER -->
                                    <
img src="http://placehold.it/560x100" style="width:100%;display:block;"/>
                                </
td>
                            </
tr>
                        </
tbody>
                    </
table>
                    <
table cellpadding="0" cellspacing="0" border="0" align="center" class="viewportWrapper" width="600" style="background:#FFFFFF;border-color:#FFFFFF;">
                        <
tbody>
                            <
tr>
                                <
td style="padding-top:20px;padding-right:20px;padding-bottom:0px;padding-left:20px;width:100%;">
                                    <!-- 
TOP IMAGE FOR HEADER -->
                                    <
img src="http://placehold.it/560x100" style="width:100%;display:block;"/>
                                </
td>
                            </
tr>
                        </
tbody>
                    </
table>
                </
td>
            </
tr>
        </
tbody>
    </
table

and in my css :

table,tbody {
           border
-collapse:collapse !important;
               
border-spacing!important;
               
border!important;
               
Margin0 auto;
    
Image Attachments
gmail-border-issue.jpg

 

Alex Ilhan

Avatar
Administrator
Total Posts:  203
Posted: 08 June 2016 10:01 PM
[ # 1 ]

Hey ajlaporte and welcome to the EoA forums.

To better assist me in helping you fix this, could you please post your full code as an attached .html file, more often than not when it comes to fixing these issues it can be something else in the code causing the mishaps.

Many thanks
Alex


 

ajlaporte

Newbie
Total Posts:  2
Posted: 09 June 2016 01:24 AM
[ # 2 ]

Hi Alex,

I’ve attached it to this message. Thank you for looking at this for me. My last resort is to redo this whole thing (again).

File Attachments
Template2.html  (File Size: 30KB - Downloads: 152)

 

tchui

Newbie
Total Posts:  2
Posted: 04 September 2016 08:18 PM
[ # 3 ]

Hi, I’m having the same issue, so if there was any solution, I’d appreciate it if anyone could share—thanks!


 

Alex Ilhan

Avatar
Administrator
Total Posts:  203
Posted: 09 September 2016 01:42 AM
[ # 4 ]

Hey guys,

Sorry for the delay in response.

Unfortunately, there isn’t a ‘one-size-fits-all’ fix to fix these issues. It occurs due to the way Gmail resizes. All credit to this fantastic post on Stack Overflow: http://stackoverflow.com/questions/27784834/table-gap-issue-in-gmail-app for some fixes you can try and apply to your emails:

Give all <tr>s an inline style of display: block; white-space: nowrap;.
Give all <td>s an inline style of display: inline-block;.
Remove any width or height declarations from your <td>s.
Remove any whitespace between your <td>s.
Ensure that your container table has a min-width.

Let me know how you get on with that!

Thanks,
Alex


 

tchui

Newbie
Total Posts:  2
Posted: 11 September 2016 10:59 AM
[ # 5 ]

Hi Alex,

Thanks for the response! I used display: block as well, but I found that float: left actually worked quite well and the lines pretty much disappeared.

Hope this solution works for someone else as well!


 

HPSHavasMagma

Newbie
Total Posts:  1
Posted: 12 September 2016 06:10 AM
[ # 6 ]

I found adjusting the container table’s min-width sometimes works as it changes the % zoom but it’s hit and miss. Most recently I had a footer bar containing social media icons etc. (8 columns) and adding “width:100% !important” to each img style worked a treat. e.g:

<td width="26"><a href="http://%%track%%/socfb" target="_blank"><img src="images/footer_fb.jpg" width="26" height="41" style="border:0; display:block; font-size:10px; line-height:10px; width:100% !important;" alt="Facebook"></a></td

Andy


 

Alex Ilhan

Avatar
Administrator
Total Posts:  203
Posted: 12 September 2016 10:53 PM
[ # 7 ]

Thanks so much for the input, glad you are finding solutions and are kind enough to share!

Thanks,
Alex.