Hi,

I am trying to build an email template of width 600px using the table format. Instead of using padding I am using the TD tag in the table. Example:


<tr>

    <td valign="top" width="11%" style="background-color:#ffffff !important;color:#333; font-family:'Arial', sans-serif;"></td>
    <td align="left" valign="top" style="background-color:#ffffff !important;color:#333; font-family:'Arial', sans-serif;padding:0px !important;">
        <p style="font-family:'Arial', sans-serif;line-height: 130%;padding: 0px;margin: 0;font-size: 14px;"><a href="#" style="color:#00a3bb;">Read more</a>.</p>
    </td>
    <td valign="top" width="11%" style="background-color:#ffffff;color:#333; font-family:'Arial', sans-serif;"></td>
</tr>

But if I add a header image of width 600px, then the image does not render properly i.e. it adds extra spacing as well as it breaks the border. Code:


<tr>
    <td align="center" valign="top">
    <!-- BEGIN HEADER // -->
        <table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color:#ffffff !important;">
            <tr>
                <td width="10" valign="top"></td>
                <td mc:edit="header" valign="top" style="vertical-align:middle;text-align:center;">
                    <img src="" height="80" width="600" border="0"  style="border-style: none;" alt="">
                </td>
                <td width="10" valign="top"></td>
            </tr>
        </table>
    </td>
</tr>

Link to the image: https://drive.google.com/file/d/1SdBsPtEh5KuxfJed-I2Rk-hjpneqYyR4/view?usp=sharing

I checked that the email is adding this class:
<p class="MsoNormal"><span style="font-family:&quot;MS Gothic&quot;;color:#333333"> </span><span style="font-family:&quot;Arial&quot;,&quot;sans-serif&quot;;color:#333333"><u></u><u></u></span></p>

How do I get rid of it?