htmlcssemailhtml-email
HTML Adjust image in Email Signature
I've created an email signature to use. When opening the HTML file in the browser, I do not have any problems, but when I paste the email signature, in my personal email and send an email, the image of the logo present in the signature, moves to the right ... I have no idea how I can solve this.
Correct image in browser
Image in email, with the problem described
HTML
<html>
<body>
<table cellpadding="0" cellspacing="0" border="0" style="font-size:12px; font-family: Arial; line-height: 17px;" width="430">
<tr>
<td valign="top" colspan="2" style="padding-bottom: 10px;">
<img src="https://uploaddeimagens.com.br/images/001/834/894/original/pic.png?1547564265" />
</td>
</tr>
<tr>
<td valign="top" style="padding-left: 10px;">
<p style="font-size:14px; font-weight: bold; color:#464646; margin: 0px; margin-bottom: 10px; padding-bottom: 5px;">
Company<br/>
<span style="font-weight: normal; color: #000; ">Role</span>
</p>
</td>
</tr>
<tr>
<td colspan="2" style="padding-bottom:10px; padding-left: 10px;">
<span style="font-weight: bold; color:#464646;">E-mail:</span> aaa@gmail.com<br/>
<span style="font-weight: bold; color:#464646;">Phone:</span> 1231231231 | <span style="font-weight: bold; color:#464646;">Phone:</span> 2222123123<br/>
<span style="font-weight: bold; color:#464646;">Fax:</span> 00010102301<br/>
<img style="width:30px; height:30px;" src="https://img.icons8.com/color/50/000000/domain.png"><img style="width:30px; height:30px;" src="https://img.icons8.com/color/50/000000/facebook.png"><br/>
</td>
<td colspan="2">
<img style="width:110px; height:110px;margin-left:-112px;margin-top:-99px;" src="https://via.placeholder.com/100x100" />
</td>
</tr>
<tr>
<td valign="top" colspan="2">
<img style="margin-top:-12px;" src="https://uploaddeimagens.com.br/images/001/834/900/original/pic-2.png?1547564365" />
</td>
</tr>
</table>
</body>
</html>Solution
This will work consistently across most email clients, including Outlook and Gmail.
<table aria-hidden="true" cellspacing="0" cellpadding="0" border="0" width="430" style="margin: 0; max-width: 100%;">
<tr>
<td style="padding: 0px;">
<img src="https://uploaddeimagens.com.br/images/001/834/894/original/pic.png?1547564265" width="430" alt="" style="display: block; margin: 0; max-width: 100%;" />
</td>
</tr>
</table>
<table role="contentinfo" cellspacing="0" cellpadding="0" border="0" width="430" style="margin: 0; max-width: 100%;">
<tr>
<td valign="top" style="padding: 10px;">
<p style="font-size: 14px; font-family: Arial, sans-serif; color: #464646; margin: 0;">
<strong>Company</strong><br />
<strong>Role</strong><br /><br />
<strong>E-mail:</strong> <a href="mailto: aaa@gmail.com" target="_blank" style="color: #000000; text-decoration: none;">aaa@gmail.com</a><br />
<strong>Phone:</strong> <span class="color: #000000; text-decoration: none;">1231231231</span>
<strong>| Phone:</strong> <span class="color: #000000; text-decoration: none;">2222123123</span><br />
<strong>Fax:</strong> <span class="color: #000000; text-decoration: none;">00010102301</span><br /><br />
<img src="https://img.icons8.com/color/50/000000/domain.png" width="30" height="30" border="1" style="display: inline-block;" / >
<img src="https://img.icons8.com/color/50/000000/facebook.png" width="30" height="30" border="1" style="display: inline-block;" />
</p>
</td>
<td valign="top" style="padding: 10px 0;">
<img src="https://via.placeholder.com/100x100" width="100" style="height: auto; display: block; margin: 0;" />
</td>
</tr>
</table>
<table aria-hidden="true" cellspacing="0" cellpadding="0" border="0" width="430" style="margin: 0; max-width: 100%;">
<tr>
<td style="padding: 0px;">
<img src="https://uploaddeimagens.com.br/images/001/834/900/original/pic-2.png?1547564365" width="430" alt="" style="display: block; margin: 0; max-width: 100%;" />
</td>
</tr>
</table>Good luck.