Hello Forum Members.

After days of of trying to find a solution(unsuccessfully), I've decided to turn to the collective wisdom and experience of the community for help.

I'm relatively new to email development (but not to web development), so my hats off to all of you.

I have a template that displays correctly across all desktop, web and mobile clients, except for the Gmail App for Android. I have a nested navigation table (which consits of a top image, the navigation itself and bottom image). For some reason the Gmail App for Android displays a horizontal and vertical gap around the nested navigation table. The nested table should span the width(380px) and height(85px) of the containing cell, but doesn't. This gap only appears in the Gamil App for Android.

I've attached a jpg as reference. I added a green background color to the table cell so you can see the gap issue.

If I set the containing table <TD> tag to style="vertical-align:bottom;", the gap appears at the top of the nested navigation table. This causes a mislaignment with the logo.

If I set the containing table <TD> tag to style="vertical-align:top;", the gap appears at the bottom of the nested navigation table. The table is aligned with the logo, but now I have a gap between the bottom navigation image and main content image.

I also have a gap on the right side of the nested table (since thecontaining <TD> tag has align="left").

I've also posted the entire code under the image, but the nested table issue appears in the "Preheader and Navigation" section.

Thank you for your time and guidance. George.



    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta name="viewport" content="width=device-width" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title></title>
    <style type="text/css">
    .ExternalClass * {
        line-height: 100%
    }
    .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td {
        line-height: 100%
    }
    table, td {
        border-collapse: collapse;
        padding: 0px;
        margin: 0px;
        mso-table-lspace: -1pt;
        mso-table-rspace: -1pt;
    }
    td {
        -webkit-text-size-adjust: none;
    }
    body {
        background-color: #000000;
        margin: 0;
    }
    .appleLinkBlack a {
        color:#000000 !important;
        text-decoration:none !important;
    }
    .appleLinkWhite a {
        color:#ffffff !important;
        text-decoration:none !important;
    }
    </style>
    </head>

    <body style="margin:0; background-color:#000000;">
    <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="000000;" style="table-layout:fixed;">
    <tr>
    <td align="center" valign="top" style="background-color:#000000;">
    <!--Preheader and Navigation-->
    <table width="600" border="0" cellspacing="0" cellpadding="0" align="center" style="min-width:600px;">
    <tr>
    <td align="right" style="vertical-align:middle; padding:5px 10px 5px 10px; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#a88156;">Make us part of your resolutions in 2015 – look inside to  <strong><a href="#" target="_blank" style="color:#a88156;">see how</a></strong>!</td>
    </tr>
    <tr>
    <td align="center" style="vertical-align:top; padding:0px 0px 0px 0px;" bgcolor="00ff66">
        <table width="600" border="0" cellspacing="0" cellpadding="0" style="min-width:600px;">
        <tr>
        <td width="220" height="85" align="left" style="vertical-align:top; line-height:85px;"><a href="#" target="_blank"><img src="http://epidm.edgesuite.net/CMS/YH/yh_wk33_Resolutions_01y.jpg" width="220" height="85" alt="LOGO" title="LOGO" style="display:block; border:0;" /></a></td>
        <td width="380" height="85" align="left" style="vertical-align:top;">
            <table width="380" border="0" cellspacing="0" cellpadding="0" style="min-width:380px;">
            <tr>
            <td width="380" height="15" align="center" style="vertical-align:top; line-height:15px;"><img src="http://epidm.edgesuite.net/CMS/YH/yh_wk33_Resolutions_02y.gif" width="380" height="15" style="display:block;" border="0" alt="" /></td>
            </tr>
            <tr>
            <td height="52" align="center" bgcolor="#555555" style="vertical-align:middle; font-family:Arial, Helvetica, sans-serif; font-size:15px; font-weight:bold; color:#ffffff;"><a href="#" target="_blank" style="color:#ffffff; text-decoration:none;">QWERTYUIO</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="#" target="_blank" style="color:#ffffff; text-decoration:none;">ASDF</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="#" target="_blank" style="color:#ffffff; text-decoration:none;">ZXCV BNMLK</a></td>
            </tr>
            <tr>
            <td width="380" height="18" align="center" style="vertical-align:top; line-height:18px;"><img src="http://epidm.edgesuite.net/CMS/YH/yh_wk33_Resolutions_03y.jpg" width="380" height="18" style="display:block;" border="0" alt="" /></td>
            </tr>
            </table>
        </td>
        </tr>
        </table>
    </td>
    </tr>
    </table>
    <!--Panel 1-->
    <table width="600" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#e5e5e5" style="min-width:600px;">
    <tr>
    <td align="center" valign="top" style="padding:0px 0 0 0;"><a href="#" target="_blank"><img src="http://epidm.edgesuite.net/CMS/YH/yh_wk33_Resolutions_04y.jpg" width="600" height="252" alt="" title="" border="0" style="display:block;"/></a></td>
    </tr>
    <tr>
    <td align="center" valign="top" style="padding:20px 10px 20px 10px;">
        <table width="580" border="0" cellspacing="0" cellpadding="0" align="center">
        <tr>
        <td align="left" style="vertical-align:top; padding:0px 0px 0px 10px; font-family:Arial, Helvetica, sans-serif; font-size:18px; font-weight:bold; color:#000000;">MNBVCXZL KJHG POIUYTREWQA</td>
        </tr>
        <tr>
        <td align="left" style="vertical-align:top; padding:15px 60px 0px 10px; font-family:Arial, Helvetica, sans-serif; font-size:15px; color:#000000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</td>
        </tr>
        <tr>
        <td align="left" style="vertical-align:top; padding:20px 0px 0px 10px;">
            <table width="134" height="41" align="left" border="0" cellspacing="0" cellpadding="0">
            <tr>
            <td align="center" valign="middle" style="padding:0px 0px 0px 0px; font-family:Arial, Helvetica, sans-serif; font-size:18px; color:#ffffff; background-color:#95553a;"><a href="#" target="_blank" style="color:#ffffff; text-decoration:none; font-size:14px;"><img src="http://epidm.edgesuite.net/CMS/YH/yh_wk33_Resolutions_06y.gif" width="134" height="40" alt="CTA" title="CTA" border="0" style="display:block;"/></a></td>
            </tr>
            </table>
        </td>
        </tr>
        </table>
    </td>
    </tr>
    </table>
    <!--Panel 2-->
    <table width="600" border="0" cellspacing="0" cellpadding="0" align="center" style="min-width:600px;">
    <tr>
    <td align="right" valign="top" style="padding:20px 0px 0px 0px;">
        <table width="600" border="0" cellspacing="0" cellpadding="0" bgcolor="#aaaaaa">
        <tr>
        <td align="left" valign="top" style="padding:0 20px 0 0;"><a href="#" target="_blank"><img src="http://epidm.edgesuite.net/CMS/YH/yh_wk33_Resolutions_05y.gif" width="300" height="260" alt="" title="" border="0" style="display:block;" /></a></td>
        <td align="right" valign="top">
            <table border="0" cellspacing="0" cellpadding="0">
            <tr>
            <td align="left" valign="top" style="padding:15px 80px 0px 0px; font-family:Arial, Helvetica, sans-serif; font-size:18px; font-weight:bold; color:#000000;">MNBVCXZL KJHG POIUYTREWQA</td>
            </tr>
            <tr>
            <td align="left" valign="top" style="padding:15px 45px 0px 0px; font-family:Arial, Helvetica, sans-serif; font-size:15px; color:#000000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
            </tr>
            <tr>
            <td align="left" valign="top" style="padding:20px 0px 0px 0px;">
            <table width="134" height="41" align="left" border="0" cellspacing="0" cellpadding="0">
            <tr>
            <td align="center" valign="middle" style="padding:0px 0px 0px 0px; font-family:Arial, Helvetica, sans-serif; font-size:18px; color:#ffffff; background-color:#95553a;"><a href="#" target="_blank" style="color:#ffffff; text-decoration:none; font-size:14px;"><img src="http://epidm.edgesuite.net/CMS/YH/yh_wk33_Resolutions_06y.gif" width="134" height="40" alt="CTA" title="CTA" border="0" style="display:block;"/></a></td>
            </tr>
            </table>
            </td>
            </tr>
            </table>
        </td>
        </tr>
        </table>
    </td>
    </tr>
    </table>
    <!--SOCIAL-->
    <table width="600" border="0" cellspacing="0" cellpadding="0" bgcolor="#000000" align="center" style="min-width:600px;">
    <tr>
    <td align="center" style="vertical-align:top; padding: 20px 0 0 0;">
        <table border="0" cellspacing="0" cellpadding="0">
        <tr>
        <td align="center" style="vertical-align:middle; font-family:Arial, Helvetica, sans-serif; font-size:18px; color:#ffffff; font-weight:bold; padding:0px 0px 0px 0px;">#YHRESOLUTIONS</td>
        <td align="left" valign="top" style="padding:0 0 0 15px;"><a href="#" target="_blank"><img src="http://epidm.edgesuite.net/CMS/YH/yh_09.jpg" width="45" height="44" alt="" title="" style="display:block; border:0;" /></a></td>
        <td align="left" valign="top" style="padding:0 0 0 15px;"><a href="#" target="_blank"><img src="http://epidm.edgesuite.net/CMS/YH/yh_09.jpg" width="45" height="44" alt="" title="" style="display:block; border:0;" /></a></td>
        <td align="left" valign="top" style="padding:0 0 0 15px;"><a href="#" target="_blank"><img src="http://epidm.edgesuite.net/CMS/YH/yh_09.jpg" width="45" height="44" alt=""  title="" style="display:block; border:0;" /></a></td>
        </tr>
        </table>
    </td>
    </tr>
    </table>
    <!--LEGAL-->
    <table width="600" border="0" cellspacing="0" cellpadding="0" bgcolor="#000000" align="center" style="min-width:600px;">
    <tr>
    <td align="center" valign="top" style="padding:25px 0;">
        <table width="320" border="0" cellspacing="0" cellpadding="0">
        <tr>
        <td align="right" valign="middle" style="font-family:Arial, Helvetica, sans-serif; font-size:15px; color:#ffffff; padding-right:20px;"><a href="#" target="_blank" style="color:#ffffff; text-decoration:none;">POIUYTREW</a></td>
        <td align="center" valign="middle"><img src="http://epidm.edgesuite.net/CMS/YH/yh_pipe_10.gif" width="2" height="21" style="display:block;" alt="" /></td>
        <td align="center" valign="middle" style="font-family:Arial, Helvetica, sans-serif; font-size:15px; color:#ffffff; padding:0px 20px;"><a href="#" target="_blank" style="color:#ffffff; text-decoration:none;">LKJHG</a></td>
        <td align="center" valign="middle"><img src="http://epidm.edgesuite.net/CMS/YH/yh_pipe_10.gif" width="2" height="21" style="display:block;"  alt="" /></td>
        <td align="center" valign="middle" style="font-family:Arial, Helvetica, sans-serif; font-size:15px; color:#ffffff; padding-left:20px;"><a href="#" target="_blank" style="color:#ffffff; text-decoration:none;">MNBV CXZLK</a></td>
        </tr>
        </table>
    </td>
    </tr>
    <tr>
    <td align="left" style="vertical-align:top;">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
        <td align="center" style="vertical-align:top; padding:0px 20px 12px 20px; font-family:Arial, Helvetica, sans-serif; font-size:10px; color:#ffffff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</td>
        </tr>
        <tr>
        <td align="center" style="vertical-align:top; padding:0px 20px 12px 20px; font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#ffffff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labor.</td>
        </tr>
        <tr>
        <td align="center" style="padding:0px 0px 0px 0px; vertical-align:top; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#ffffff;"><a href="#" target="_blank" style="color:#ffffff; text-decoration:none;">Contact Us</a> &nbsp;|&nbsp; <a href="#" target="_blank" style="color:#ffffff; text-decoration:none;">Legal Notices</a> &nbsp;|&nbsp; <a href="#" target="_blank" style="color:#ffffff; text-decoration:none;">Unsubscribe</a></td>
        </tr>
        <tr>
        <td align="center" style="padding:2px 0px 10px 0px; vertical-align:top; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#ffffff;"><a href="#" target="_blank" style="color:#ffffff; text-decoration:none;">Qwertyu Asdfgh / Awer Asdfghu Tyuiop</a></td>
        </tr>
        </table>
    </td>
    </tr>
    </table>
    <table align="center" width="600" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td height="20" align="left" valign="top">&nbsp;</td>
    </tr>
    </table>

    </td>
    </tr>
    </table>
    </body>
    </html>