PSD to html converted Email Signature show white spaces when zoom in

user_13787137 0
Viewed 661

I have converted a template PSD Email signature to html in photoshop. when I zoom in, or insert this html signature into email (like gmail) there are lines (spaces) between the slices. please help. The HTML Code is attached. Please run in google chrome.

enter image description here

<!DOCTYPE html>

    <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.0cm;}
            img{display:block; float:left; padding:0; align:absbottom; align:texttop; }
            
        </style>
            </head>
 <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<table  id="Table_01" width="540" height="158" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            <img src="https://i.ibb.co/XFs3JK4/1-01.jpg" width="409" height="84" alt=""></td>
        <td>
            <img src="https://i.ibb.co/7CRmyQL/1-02.jpg" width="23" height="84" alt=""></td>
        <td>
            <img src="https://i.ibb.co/b3Hv5NS/1-03.jpg" width="22" height="84" alt=""></td>
        <td>
            <img src="https://i.ibb.co/ZxCjH8k/1-04.jpg" width="86" height="84" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="https://i.ibb.co/x5tkrHr/1-05.jpg" width="409" height="39" alt=""></td>
        <td>
            <img src="https://i.ibb.co/PWLsbhB/1-06.jpg" width="23" height="39" alt=""></td>
        <td>
            <img src="https://i.ibb.co/gz8Wfs2/1-07.jpg" width="22" height="39" alt=""></td>
        <td>
            <img src="https://i.ibb.co/6HZ3yx9/1-08.jpg" width="86" height="39" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="https://i.ibb.co/5rDdnXV/1-09.jpg" width="409" height="35" alt=""></td>
        <td>
            <img src="https://i.ibb.co/yF88BPb/1-10.jpg" width="23" height="35" alt=""></td>
        <td>
            <img src="https://i.ibb.co/4sWd88w/1-11.jpg" width="22" height="35" alt=""></td>
        <td>
            <img src="https://i.ibb.co/tBKs4bq/1-12.jpg" width="86" height="35" alt=""></td>
    </tr>
</table>

</body>

</html>

psd html-email css html
2 Answers

Added

td{
display:block;
}


<!DOCTYPE html>

    <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.0cm;}
            img{display:block; float:left; padding:0; }
            
        </style>
            </head>
 <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<table  id="Table_01" width="540" height="158" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td style="display:block;">
            <img src="https://i.ibb.co/XFs3JK4/1-01.jpg" width="409" height="84" alt=""></td>
        <td style="display:block;">
            <img src="https://i.ibb.co/7CRmyQL/1-02.jpg" width="23" height="84" alt=""></td>
        <td style="display:block;">
            <img src="https://i.ibb.co/b3Hv5NS/1-03.jpg" width="22" height="84" alt=""></td>
        <td style="display:block;">
            <img src="https://i.ibb.co/ZxCjH8k/1-04.jpg" width="86" height="84" alt=""></td>
    </tr>
    <tr>
        <td style="display:block;">
            <img src="https://i.ibb.co/x5tkrHr/1-05.jpg" width="409" height="39" alt=""></td>
        <td style="display:block;">
            <img src="https://i.ibb.co/PWLsbhB/1-06.jpg" width="23" height="39" alt=""></td>
        <td style="display:block;">
            <img src="https://i.ibb.co/gz8Wfs2/1-07.jpg" width="22" height="39" alt=""></td>
        <td style="display:block;">
            <img src="https://i.ibb.co/6HZ3yx9/1-08.jpg" width="86" height="39" alt=""></td>
    </tr>
    <tr>
        <td style="display:block;">
            <img src="https://i.ibb.co/5rDdnXV/1-09.jpg" width="409" height="35" alt=""></td>
        <td style="display:block;">
            <img src="https://i.ibb.co/yF88BPb/1-10.jpg" width="23" height="35" alt=""></td>
        <td style="display:block;">
            <img src="https://i.ibb.co/4sWd88w/1-11.jpg" width="22" height="35" alt=""></td>
        <td style="display:block;">
            <img src="https://i.ibb.co/tBKs4bq/1-12.jpg" width="86" height="35" alt=""></td>
    </tr>
</table>

</body>

</html>

user_62850540

If images are showing white lines it means you are missing display:block on your images. You need to add it inline. I have removed the CSS for td and image as I have moved it inline.

<!DOCTYPE html>

    <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.0cm;}
            img{display:block; float:left; padding:0; align:absbottom; align:texttop; }
            
        </style>
            </head>
 <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<table  id="Table_01" width="540" height="158" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td align="left" valign="top">
            <img src="https://i.ibb.co/XFs3JK4/1-01.jpg" width="409" height="84" alt="" style="display:block;border:0px;"></td>
        <td align="left" valign="top">
            <img src="https://i.ibb.co/7CRmyQL/1-02.jpg" width="23" height="84" alt="" style="display:block;border:0px;"></td>
        <td align="left" valign="top">
            <img src="https://i.ibb.co/b3Hv5NS/1-03.jpg" width="22" height="84" alt="" style="display:block;border:0px;"></td>
        <td align="left" valign="top">
            <img src="https://i.ibb.co/ZxCjH8k/1-04.jpg" width="86" height="84" alt="" style="display:block;border:0px;"></td>
    </tr>
    <tr>
        <td align="left" valign="top">
            <img src="https://i.ibb.co/x5tkrHr/1-05.jpg" width="409" height="39" alt="" style="display:block;border:0px;"></td>
        <td align="left" valign="top">
            <img src="https://i.ibb.co/PWLsbhB/1-06.jpg" width="23" height="39" alt="" style="display:block;border:0px;"></td>
        <td align="left" valign="top">
            <img src="https://i.ibb.co/gz8Wfs2/1-07.jpg" width="22" height="39" alt="" style="display:block;border:0px;"></td>
        <td align="left" valign="top">
            <img src="https://i.ibb.co/6HZ3yx9/1-08.jpg" width="86" height="39" alt="" style="display:block;border:0px;"></td>
    </tr>
    <tr>
        <td align="left" valign="top">
            <img src="https://i.ibb.co/5rDdnXV/1-09.jpg" width="409" height="35" alt="" style="display:block;border:0px;"></td>
        <td align="left" valign="top">
            <img src="https://i.ibb.co/yF88BPb/1-10.jpg" width="23" height="35" alt="" style="display:block;border:0px;"></td>
        <td align="left" valign="top">
            <img src="https://i.ibb.co/4sWd88w/1-11.jpg" width="22" height="35" alt="" style="display:block;border:0px;"></td>
        <td align="left" valign="top">
            <img src="https://i.ibb.co/tBKs4bq/1-12.jpg" width="86" height="35" alt="" style="display:block;border:0px;"></td>
    </tr>
</table>

</body>

</html>

user_74674280
Related