Search code examples
htmlcsshyperlinkhtml-email

Broken clickable html email signature


I followed a tutorial ( https://www.youtube.com/watch?v=9VagizlpHNc ) to make a clickable email signature, but when I put it into gmail, everything is broken up. I believe there is something wrong with the code, because it says "td{line-height:0; font-size: 0.0em; } img{display: block; float: left; padding: 0} align: absbottom; align: texttop; }" at the top of my screen with the clickable html underneath that when I run the code. I am not very good at coding, so if you could dumb down your answers for me, that would help a lot. Thanks! :)

I looked through the comment section, and ended up doing new slices in photoshop from the clickable parts, but that did not change anything.

Code I tried:

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset-utf-8"
<style media="screen" type="text/css">
td{line-height:0; font-size: 0.0em; }
img{display: block; float: left; padding: 0} align: absbottom; align: 
texttop; }
</style>
</head>

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" 
marginheight="0">
<!-- Save for Web Slices (HTML-Email_Signature.psd) -->
<table id="Table_01" width="602" height="203" border="0" 
cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="7">
            <img src="https://i.postimg.cc/T1WL04GK/1-01.png" 
width="602" height="121" alt=""></td>
    </tr>
    <tr>
        <td rowspan="3">
            <img src="https://i.postimg.cc/QVGByJx0/1-02.png" 
width="295" height="81" alt=""></td>
        <td>
            <a href="https://www.instagram.com/snapplabs/"><img 
src="https://i.postimg.cc/fW6Bs4Vg/1-03.png" width="49" height="44" 
alt=""></td>
        <td>
            <a href="https://www.facebook.com/SnappLabs3D/"><img 
src="https://i.postimg.cc/c1KXP1Ln/1-04.png" width="57" height="44" 
alt=""></td>
        <td>
            <a 
href="https://www.youtube.com/channel/UCxnKKzJTex2S_d1YmL2_NUg"><img 
src="https://i.postimg.cc/SKTftH0d/1-05.png" width="56" height="44" 
alt=""></td>
        <td colspan="2">
            <a href="https://www.tiktok.com/@snapplabs"><img 
src="https://i.postimg.cc/x1Q5kKyv/1-06.png" width="54" height="44" 
alt=""></td>
        <td rowspan="2">
            <img src="https://i.postimg.cc/xdTP5nZq/1-07.png" 
width="91" height="61" alt=""></td>
    </tr>
    <tr>
        <td colspan="5">
            <img src="https://i.postimg.cc/MKsjzqL7/1-08.gif" 
width="216" height="17" alt=""></td>
    </tr>
    <tr>
        <td colspan="4">
            <img src="https://i.postimg.cc/YqY8qXg2/1-09.png" 
width="189" height="20" alt=""></td>
        <td colspan="2">
            <a href="https://www.snapplabs.co"><img 
src="https://i.postimg.cc/3RkFM9YT/1-10.png" width="118" height="20" 
alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="spacer.gif" width="295" height="1" alt=""></td>
        <td>
            <img src="spacer.gif" width="49" height="1" alt=""></td>
        <td>
            <img src="spacer.gif" width="57" height="1" alt=""></td>
        <td>
            <img src="spacer.gif" width="56" height="1" alt=""></td>
        <td>
            <img src="spacer.gif" width="27" height="1" alt=""></td>
        <td>
            <img src="spacer.gif" width="27" height="1" alt=""></td>
        <td>
            <img src="spacer.gif" width="91" height="1" alt=""></td>
    </tr>
</table>
   <!-- End Save for Web Slices -->
</body>
 <!-- Keep Pasted Code Above This Line!
</html>

Solution

  • Your meta tag ending is broken, and some anchor tags are not closed properly.

    As you said you are new to coding so let me provide you with the whole updated HTML template below:

    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <style media="screen" type="text/css">
    td{line-height:0; font-size: 0.0em; }
    img{display: block; padding: 0}
    </style>
    </head>
    
    <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <table id="Table_01" width="602" height="203" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td colspan="7">
                <img src="https://i.postimg.cc/T1WL04GK/1-01.png" width="602" height="121" alt=""></td>
        </tr>
        <tr>
            <td rowspan="3">
                <img src="https://i.postimg.cc/QVGByJx0/1-02.png" width="295" height="81" alt=""></td>
            <td>
                <a href="https://www.instagram.com/snapplabs/"><img src="https://i.postimg.cc/fW6Bs4Vg/1-03.png" width="49" height="44" alt=""></a></td>
            <td>
                <a href="https://www.facebook.com/SnappLabs3D/"><img src="https://i.postimg.cc/c1KXP1Ln/1-04.png" width="57" height="44" alt=""></a></td>
            <td>
                <a href="https://www.youtube.com/channel/UCxnKKzJTex2S_d1YmL2_NUg"><img src="https://i.postimg.cc/SKTftH0d/1-05.png" width="56" height="44" alt=""></a></td>
            <td colspan="2">
                <a href="https://www.tiktok.com/@snapplabs"><img src="https://i.postimg.cc/x1Q5kKyv/1-06.png" width="54" height="44" alt=""></a></td>
            <td rowspan="2">
                <img src="https://i.postimg.cc/xdTP5nZq/1-07.png" width="91" height="61" alt=""></td>
        </tr>
        <tr>
            <td colspan="5">
                <img src="https://i.postimg.cc/MKsjzqL7/1-08.gif" width="216" height="17" alt=""></td>
        </tr>
        <tr>
            <td colspan="4">
                <img src="https://i.postimg.cc/YqY8qXg2/1-09.png" width="189" height="20" alt=""></td>
            <td colspan="2">
                <a href="https://www.snapplabs.co"><img src="https://i.postimg.cc/3RkFM9YT/1-10.png" width="118" height="20" alt=""></a></td>
        </tr>
        <tr>
            <td>
                <img src="spacer.gif" width="295" height="1" alt=""></td>
            <td>
                <img src="spacer.gif" width="49" height="1" alt=""></td>
            <td>
                <img src="spacer.gif" width="57" height="1" alt=""></td>
            <td>
                <img src="spacer.gif" width="56" height="1" alt=""></td>
            <td>
                <img src="spacer.gif" width="27" height="1" alt=""></td>
            <td>
                <img src="spacer.gif" width="27" height="1" alt=""></td>
            <td>
                <img src="spacer.gif" width="91" height="1" alt=""></td>
        </tr>
    </table>
    </body>
    </html>

    This will fix the issue.