0

I have created an email signature. The signature looks fine when i open it up in a browser, however whenever i try to use it in Gmail the signature appears out of proportion. It looks like gmail is ignoring some of the CSS. This is how it comes in my inbox :

enter image description here

https://codepen.io/Madses/pen/BeRbXa

Here's the code:

<div id="handtekening" style="width:650px;">

  <span style="padding-bottom:30px;">Met vriendelijke groeten,</span>

  <table style="width:650px; font-family:Open Sans, sans-serif; border-spacing: 0px; margin-top:40px;">

    <thead>
      <tr style="background-color:#d22a2a; font-size:12px; padding:0px;">
        <td style="width:26px; height:149px; border-width: 0px; padding: 5px;"></td>
        <td style="width:155px; height:149px;"><img src="http://www.e-marketingsupport.nl/wp-content/uploads/2019/05/mick-profiel.png" style="margin-top:-40px;"></td>
        <td style="width:239px; height:149px; padding:28px 14px; color:#ffffff;">
          <span style="font-weight:900;">Mick Brookman</span><br> Media Designer<br> mick@e-marketingsupport.nl
          <br> Groeneweg 23, 3981 CK Bunnik<br> +31 088 339 76 78<br></td>
        <td style="width:230px; height:149px;"><img src="http://www.e-marketingsupport.nl/wp-content/uploads/2019/05/Logos2019.gif"></td>
      </tr>
    </thead>
  </table>

  <table style="width:630px; margin-top:-15px; border-spacing: 0px;">

    <thead>
      <tr>
        <td style="width:487px"></td>
        <td style="width:32px;">
          <a href="https://www.facebook.com/Duitsemarkt/"><img src="http://www.e-marketingsupport.nl/wp-content/uploads/2019/05/facebook.png"></a>
        </td>
        <td style="width:10px;"></td>
        <td style="width:32px;">
          <a href="https://www.instagram.com/dexportmarketeers/"><img src="http://www.e-marketingsupport.nl/wp-content/uploads/2019/05/instagram.png"></a>
        </td>
        <td style="width:10px;"></td>
        <td style="width:32px;">
          <a href="https://www.linkedin.com/company/803846/"><img src="http://www.e-marketingsupport.nl/wp-content/uploads/2019/05/linkedin.png"></a>
        </td>
        <td style="width:10px;"></td>
        <td style="width:32px;">
          <a href="https://twitter.com/duitsemarkt"><img src="http://www.e-marketingsupport.nl/wp-content/uploads/2019/05/twitter.png"></a>
        </td>
        <td style="width:5px;"></td>
    </thead>

  </table>


  <table style="width:630px; margin-top:15px; border-spacing: 0px; margin-left:10px;">

    <thead style="margin:0 auto; font-family:Open Sans, sans-serif;">
      <tr style="background-color:#fff; box-shadow: 0px 0px 10px -2px rgba(148,148,148,0.5);">
        <td style="width:172px height:82px; text-align:center; font-size:12px; font-weight:600; color:#d22a2a;">Wij zijn trots op onze<br>Awards en Partners</td>
        <td style="width:115px; height:82px"><img src="http://www.e-marketingsupport.nl/wp-content/uploads/2019/05/google-premier-badge.jpg"></td>
        <td style="width:115px; height:82px"><img src="http://www.e-marketingsupport.nl/wp-content/uploads/2019/05/fd-gazalle-2018.jpg"></td>
        <td style="width:90px; height:82px"><img src="http://www.e-marketingsupport.nl/wp-content/uploads/2019/05/award.jpg"></td>
        <td style="width:138px; height:82px"><img src="http://www.e-marketingsupport.nl/wp-content/uploads/2019/05/amazon.jpg"></td>
    </thead>

    <tbody style="width:650px; font-family:Open Sans, sans-serif;">
      <tr>
        <td colspan=9 style="color:#b2b2b2; font-size:12px; text-align:center; padding-top:12px;"><a href="https://www.e-marketingsupport.nl" style="color:#b2b2b2;">e-marketingsupport.nl</a> | <a href="https://www.dexport.nl" style="color:#b2b2b2;">dexport.nl</a> | <a href="https://www.verkopen-op-amazon.nl" style="color:#b2b2b2;"> verkopen-op-amazon.nl</a>          | <a href="https://www.profitwiser.com" style="color:#b2b2b2;">profitwiser.nl</a> | <a href="https://www.crossborderevent.nl" style="color:#b2b2b2;">crossborder.nl</a></td>
      </tr>
    </tbody>
  </table>

</div>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
Kevin
  • 11
  • 2
  • Possible duplicate of [HTML e-mail signature is disaplayed differently by gmail](https://stackoverflow.com/questions/49490565/html-e-mail-signature-is-disaplayed-differently-by-gmail) – xmaster May 20 '19 at 07:26
  • It looks like there's a problem with negative top-margins. – Mr Lister May 20 '19 at 07:31
  • 1
    Gmail doesn't support margin values. https://www.campaignmonitor.com/css/ tells you all the supported css for email clients. – MattHamer5 May 20 '19 at 07:32
  • Also http content my be ignored as it is here – mplungjan May 20 '19 at 07:35

0 Answers0