Prezados(as), boa tarde.
Já trabalhei com webdesign e desenvolvimento frontend, mas faziam anos que não mexia com isso. Hoje sou advogado.
Elaborei uma assinatura para e-mail em HTML, que quando aberta no navegador é exibida corretamente:
Ocorre que quando a assinatura é inserida na mensagem (Microsoft Outlook 2016) a disposição dos elementos se mostra desconfigurada, assim permanecendo se a mensagem for enviada:
Devem ter notado que a imagem que fica acima das informações é uma imagem de fundo. Já tentei também "background" na <table>, mas neste caso, apesar de aparecer no navegador a imagem sequer aparece na assinatura:
<div style="max-width:716px; max-height:200px; position:relative;">
<img src="http://www.fafadv.com.br/images/assinatura.jpg" alt="imagem-assinatura" />
<div style="position:absolute; top:0px; bottom:0px; left:0px; right:0px;">
<table border="0" cellpadding="0" cellspacing="0" width="716" height="200" style="max-width:716px; max-height:200px;">
<tr>
<td rowspan="3" style="width:242px;"></td>
<td rowspan="3" style="width:340px; font-family:Gadugi; font-size:14px; padding:5px;">
<p><strong><span style="font-size:18px;">Daniel A. Ferreira de Almeida</span></strong><br>
<span style="font-size:16px;">Advogado - OAB/SP 424.237</span></p>
<p style="margin-top:-7px;">(16) 9 9373-2552<br>
(16) 3421-7783</p>
<p style="margin-top:-7px;"><a href="mailto:ferreiradealmeida@fafadv.com.br" style="font-family:Gadugi; font-size:14px; color:#000;"> ferreiradealmeida@fafadv.com.br</a><br>
<a href="http://www.fafadv.com.br" style="font-family:Gadugi; font-size:14px; color:#000;">www.fafadv.com.br</a></p>
<p style="margin-top:-7px;">Rua Marino Bruno Regini, nº 270, Sala 02<br>
Nova Ribeirânia - Ribeirão Preto/SP, CEP 14096-710</p>
</td>
<td style="width:125px; height:67px; text-align:center;">
<a href="https://www.facebook.com/adv.faf/">
<img src="http://www.fafadv.com.br/images/logo-facebook.png" alt="logo-facebook" style="margin-top:10px;">
</a>
</td>
</tr>
<tr>
<td style="width:125px; height:66px; text-align:center;">
<a href="https://www.instagram.com/faf.adv/">
<img src="http://www.fafadv.com.br/images/logo-instagram.png" alt="logo-instagram" style="margin-top:10px;">
</a>
</td>
</tr>
<tr>
<td style="width:125px; height:67px; text-align:center;">
<a href="https://www.linkedin.com/company/faf-adv">
<img src="http://www.fafadv.com.br/images/logo-linkedin.png" alt="logo-linkedin" style="margin-bottom:5px;">
</a>
</td>
</tr>
</table>
</div>
</div>
Serei grato se alguém souber o que ocorre e puder colaborar.
Obrigado.