Hi All,

Got a fun one, I am trying to create an angle edged block effect in my email using a td with a bgcolor on it and another cell with an image in it showing the angle. However I am getting a white line between the image and the coloured td in gmail.

I have an assortment of attempts to prevent this in place - outline:none; border: 0; display: block; on the image, css on the tds and the image to prevent borders, even a border-top on the td in question the same colour as the block above but nothing is working... code is below, only that relating to images and td/tables:


 <style type="text/css">
        table {border-spacing:0; table-layout:fixed; Margin:0 auto; mso-cellspacing:0x; mso-padding-alt:0px; padding: 0; border-spacing: 0; border-collapse:collapse; border:none; vertical-align:top;}
        td {padding: 0; border-collapse:collapse; border:none; Margin: 0; vertical-align:top;}
        img {height: auto; vertical-align:top; outline:none; border:0; border-style:none; padding:0; Margin:0; text-decoration:none; display:inline-block; -ms-interpolation-mode:bicubic;}
    <!--[if gte mso 9]>
      <xml> <o:OfficeDocumentSettings> <o:AllowPNG/> <o:PixelsPerInch>96</o:PixelsPerInch> </o:OfficeDocumentSettings>      </xml>
    <![endif]-->
    </style>
</head>
<body>
    <table align="center" width="100%" border="0" valign="top" >
            <tr>
                <td bgcolor="#373a45" align="center">
                    <center>
                        <div>
                        <!--[if (gte mso 9)|(IE)]>
                                <table width="640" align="center" cellpadding="0" cellspacing="0" border="0" style="width:640px; border-collapse:collapse; border:none;">
                                    <tr>
                                        <td>
                            <![endif]-->
                            <table align="center" width="100%" border="0" valign="top" style="max-width:640px">
                                <tr>
                                    <td align="center" style="padding-top:10px; padding-right: 10px; padding-left: 10px;">
                                        cell content....
                                    </td>
                                </tr>
                            </table>
                            <!--[if (gte mso 9)|(IE)]>
                                        </td>
                                    </tr>   
                                </table>
                            <![endif]-->                            
                        </div>
                    </center>               
                </td>
            </tr>
            <tr>
                <td align="center" style="padding: 0: Margin: 0; line-height: 1px; font-size: 1px; border-top: 1px solid #373a45;">
                    <img src="https://beanstalkdigital.co.uk/email-images/beanstalk/bg-angle-dark-lr.png" width="100%" align="center" style="width: 100%; height:auto; display: block; border: 0; outline: none;" />
                </td>
            </tr>       
        </table>
    </body>

Any ideas what I might be able to do?