CODEWITHSUNDEEP
htmlcssemailoutlookgmail
Shaun
Shaun

Reputation: 1

Gmail displaying gaps between images in email signature sent from Outlook but outlook it displays 100%

Hi I've designed multiple image signature in html to make all images in the email signature clickable link. i.e A opens email, B Calls the main number etc...

In outlook or in ios mail is shows 100% and works without any gaps between images but in gmail it shows gaps between images when sending from outlook?

Can someone please assist me on a solution on how to fix this. Please see below on what the email signature should look like, how it displays in gmail and the code, TIA.

What email signature should look like

How is displays in gmail

    <html>
<head>
<title>Jane Doe Email Signature</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table id="Table_01" width="650" height="150" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td style="height: 60px">
            <a href="mailto:[email protected]" style="display:block; padding:0px; margin:0px;"><img src="https://i.ibb.co/5YrTS6W/Image-01.jpg" width="650" height="60" alt"[email protected]" border="0" style="display:block; padding:0px; margin:0px;"></a></td>
    </tr>
    <tr>
        <td style="height: 20px">
            <a href="Tel:+27123456789" style="display:block; padding:0px; margin:0px;"><img src="https://i.ibb.co/gT9BDxr/Image-02.jpg" width="650" height="20" alt="+27 (0) 12 345 6789" border="0" style="display:block; padding:0px; margin:0px;"></a></td>
    </tr>
    <tr>
        <td style="height: 20px">
            <a href="Tel:+2712345678" style="display:block; padding:0px; margin:0px;"><img src="https://i.ibb.co/J3Yh5LY/Image-03.jpg" width="650" height="20" alt="" border="0" style="display:block; padding:0px; margin:0px;"></a></td>
    </tr>
    <tr>
        <td style="height: 20px">
            <a href="mailto:[email protected]" style="display:block; padding:0px; margin:0px;"><img src="https://i.ibb.co/w4ZSYT6/Image-04.jpg" width="650" height="20" alt="[email protected]" border="0" style="display:block; padding:0px; margin:0px;"></a></td>
    </tr>
    <tr>
        <td style="height: 10px">
            <a href="https://www.abc.om" style="display:block; padding:0px; margin:0px;"><img src="https://i.ibb.co/nzbygZV/Image-05.jpg" width="650" height="10" alt="" border="0" style="display:block; padding:0px; margin:0px;"></a></td>
    </tr>
    <tr>
        <td style="height: 20px">
            <a href="" style="display:block; padding:0px; margin:0px;"><img src="https://i.ibb.co/4SQfvbB/Image-06.jpg" width="650" height="20" alt="Head Office" border="0" style="display:block; padding:0px; margin:0px;"></a></td>
    </tr>
</table>
</body>
</html>

Upvotes: 0

Views: 214

Answers (1)

Eugene Astafiev
Eugene Astafiev

Reputation: 49405

Some attributes may not be supported by the Word editor used by Outlook to display and edit message bodies. For example, marginheight is not supported. You can find the supported and unsupported HTML elements, attributes, and cascading style sheets properties in the Word HTML and CSS Rendering Capabilities in Outlook article.

Upvotes: 0

Related Questions