html en webmail

mblascog · #1 (**permalink**) 06/05/2018, 04:31

Buenas, tengo un problema y no sé donde hay qué preguntar.
Resulta que tengo hecha una firma en html y la he puesto en Microsoft Outlook. Cuando redacto el correo, la firma se ve bien. Si lo leo desde gmail o desde microsoft outlook, y des de outlook.com también se ve bien. Pero, y este es el problema, cuando intento leer el mensaje des de webmail, no se ve bien.

Este es el código html:

Código HTML:

Ver original<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <style type="text/css">
            body,td,th {font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;font-weight:bold;font-size: 11px;color: #1a237e;}
            .imatges {align:middle;width:40px;height:40px;}
            .text {font-size:11px;color: #1a237e;width:140px;}
            .colImatges {height:40px;width:40px;}
            #usuari {font-size:13px;color:#1a237e;width:100%;vertical-align:bottom;}
            #usuari span {color: #6ef4ce;}
            .linia {border-width:1px;border-style:solid;color:#1a237e;}
            #linkedin {font-size:11px;color:#1a237e;height:20px;align:left;valign:middle;}
            #impressio {font-size:9px;color: #10fc06;}
            #avis {font-size:9px;color:#1a237e;}
            .adreces {font-size:12px;color:#1a237e;}
            .adrecesD {white-space:nowrap;color:#1a237e;font-size:9px;}
            #logo {width:70px;}
            .enllacos{text-decoration:none;color:#1a237e;}
            #ample70 {width:70px;}
        </style>
    </head>
 
<body>
    <table width=100% border="0">
        <tr>
            <td rowspan="2"><img id='logo' src="http://tepui.cat/foro/logo.png"/></td>
            <td colspan="7">&nbsp;</td>
        </tr>
        <tr>
            <td id='usuari' colspan="7">Nombre y apellidos<br><span>Nombre en la empresa</span></td>
        </tr>
        <tr>
            <td colspan="6" ><hr class='linia'/></td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td colspan="5" width="100%">
                <table>
                    <tr>
                        <td class='colImatges'><img class='imatges' src="http://tepui.cat/foro/tel.jpg"/></td>
                        <td class='text'>(+34) 666 666 666</td>
                        <td class='colImatges'><img class='imatges' src="http://tepui.cat/foro/mail.jpg"/></td>
                        <td><a class="enllacos" href="mailto:[email protected]">[email protected]</a></td>
                    </tr>
                    <tr>
                        <td class='colImatges'><img class='imatges' src="http://tepui.cat/foro/web.jpg"/></td>
                        <td><a class="enllacos" href="http://www.blabla.es">www.blabla.es</a></td>
                        <td class='colImatges'><img class='imatges' src="http://tepui.cat/foro/linkedin.jpg"/></td>
                        <td><a class="enllacos" href="https://www.linkedin.com/in/blabla/">nombre y apellidos</a></td>
                    </tr>
                </table>
            </td>
            <td width="34">&nbsp;</td>
        </tr>
        <tr valign="top">
            <td height="64">&nbsp;</td>
            <td colspan="7">
                <p>
                  <br>
                  <span class='adreces' >Dirección Sede Central:</span><br>
                  <span class='adrecesD'>Calle blabla 1 · Local 343</span>
                  <span class='adrecesD'>08999 Población · Barcelona. T (+34) 999 999 999</span><br><br>
                  <span class='adreces'>Dirección Sede Madrid:</span><br>
                  <span class='adrecesD'>Carretera blablabla 22 · EMPRESA</span>
                  <span class='adrecesD'>28888 Población · Madrid. T (+34) 999 999 999 </span><br>
                </p>
            </td>
        </tr>
        <tr valign="top">
          <td valign="top"></td>
          <td colspan="7" ></td>
        </tr>
        <tr>
          <td height="20">&nbsp;</td>
          <td id='linkedin' colspan="6"><a class="enllacos" href="https://www.linkedin.com/company/-farmac%C3%A9utica/">Follow us in Linkedin</a></td>
        </tr>
        <tr>
          <td height="13">&nbsp;</td>
          <td colspan="6"><hr class='linia'/></td>
        </tr>
        <tr>
            <td width=50><p>&nbsp;</p></td>
            <td>
                <p id='avis'>
                    CONFIDENTIALITY NOTICE: This e-mail message and its attached documentation may contain confidential or legally privileged information and is intended only for the use of the intended recipient(s). <br>
                Any unauthorized disclosure, dissemination, distribution, copying or the taking of any action in reliance on the information herein is prohibited. E-mails are not secure and cannot be guaranteed to be error free as they can be intercepted, amended, or contain viruses. Anyone who communicates with us by e-mail is deemed to have accepted these risks. Company Name is not responsible for errors or omissions in this message and denies any responsibility for any damage arising from the use of e-mail. Any opinion and other statement contained in this message and any attachment are solely those of the author and do not necessarily represent those of the company.</p>
            </td>
        </tr>
        <tr>
            <td width=50>&nbsp;</td>
            <td>
                <table width="100%" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td><img width=30 height=27 src="http://tepui.cat/foro/medi-ambient.jpg" alt=""/></td>
                        <td><br/>
                            <span id='impressio'>Antes de imprimir piense en su responsabilidad y compromiso con el MEDIO AMBIENTE. Gracias por su colaboración.<br>
                                Abans d'imprimir pensi en la seva responsabilitat i compromís amb el MEDI AMBIENT. Gràcies per la seva col·laboració.
                            </span>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>

Como web, la firma se puede ver en este enlace:
http://tepui.cat/foro/prova.html

Así es como se ve en outlook, gmail y outlook.com:

Y así en webmail:

Si inspecciono el elemento:

da igual que ponga "width=70px" o style="width:70px", hace lo mismo.

Alguien podría ayudarme. Gracias

vicram10 · #2 (**permalink**) 06/05/2018, 14:59

sacale el padding y proba de vuelta o usa el padding en "pixeles"

mblascog · #3 (**permalink**) 06/05/2018, 17:05

Gracias por responder. El padding, si te fijas en el código que yo escrito no está. aparece cuando le doy a inspeccionar el elemento en el navegador.

vicram10 · #4 (**permalink**) 06/05/2018, 21:29

Cita:

Iniciado por mblascog

Gracias por responder. El padding, si te fijas en el código que yo escrito no está. aparece cuando le doy a inspeccionar el elemento en el navegador.

agregale a tu codigo (forzar), de esta manera ya le diras que padding queres que tenga.