Tema: html en webmail
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 06/05/2018, 04:31
mblascog
 
Fecha de Ingreso: enero-2002
Ubicación: Sabadell
Mensajes: 565
Antigüedad: 22 años, 10 meses
Puntos: 4
html en webmail
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
  1. <!doctype html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <style type="text/css">
  6.             body,td,th {font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;font-weight:bold;font-size: 11px;color: #1a237e;}
  7.             .imatges {align:middle;width:40px;height:40px;}
  8.             .text {font-size:11px;color: #1a237e;width:140px;}
  9.             .colImatges {height:40px;width:40px;}
  10.             #usuari {font-size:13px;color:#1a237e;width:100%;vertical-align:bottom;}
  11.             #usuari span {color: #6ef4ce;}
  12.             .linia {border-width:1px;border-style:solid;color:#1a237e;}
  13.             #linkedin {font-size:11px;color:#1a237e;height:20px;align:left;valign:middle;}
  14.             #impressio {font-size:9px;color: #10fc06;}
  15.             #avis {font-size:9px;color:#1a237e;}
  16.             .adreces {font-size:12px;color:#1a237e;}
  17.             .adrecesD {white-space:nowrap;color:#1a237e;font-size:9px;}
  18.             #logo {width:70px;}
  19.             .enllacos{text-decoration:none;color:#1a237e;}
  20.             #ample70 {width:70px;}
  21.         </style>
  22.     </head>
  23.  
  24. <body>
  25.     <table width=100% border="0">
  26.         <tr>
  27.             <td rowspan="2"><img id='logo' src="http://tepui.cat/foro/logo.png"/></td>
  28.             <td colspan="7">&nbsp;</td>
  29.         </tr>
  30.         <tr>
  31.             <td id='usuari' colspan="7">Nombre y apellidos<br><span>Nombre en la empresa</span></td>
  32.         </tr>
  33.         <tr>
  34.             <td colspan="6" ><hr class='linia'/></td>
  35.         </tr>
  36.         <tr>
  37.             <td>&nbsp;</td>
  38.             <td colspan="5" width="100%">
  39.                 <table>
  40.                     <tr>
  41.                         <td class='colImatges'><img class='imatges' src="http://tepui.cat/foro/tel.jpg"/></td>
  42.                         <td class='text'>(+34) 666 666 666</td>
  43.                         <td class='colImatges'><img class='imatges' src="http://tepui.cat/foro/mail.jpg"/></td>
  44.                         <td><a class="enllacos" href="mailto:[email protected]">[email protected]</a></td>
  45.                     </tr>
  46.                     <tr>
  47.                         <td class='colImatges'><img class='imatges' src="http://tepui.cat/foro/web.jpg"/></td>
  48.                         <td><a class="enllacos" href="http://www.blabla.es">www.blabla.es</a></td>
  49.                         <td class='colImatges'><img class='imatges' src="http://tepui.cat/foro/linkedin.jpg"/></td>
  50.                         <td><a class="enllacos" href="https://www.linkedin.com/in/blabla/">nombre y apellidos</a></td>
  51.                     </tr>
  52.                 </table>
  53.             </td>
  54.             <td width="34">&nbsp;</td>
  55.         </tr>
  56.         <tr valign="top">
  57.             <td height="64">&nbsp;</td>
  58.             <td colspan="7">
  59.                 <p>
  60.                   <br>
  61.                   <span class='adreces' >Dirección Sede Central:</span><br>
  62.                   <span class='adrecesD'>Calle blabla 1 · Local 343</span>
  63.                   <span class='adrecesD'>08999 Población · Barcelona. T (+34) 999 999 999</span><br><br>
  64.                   <span class='adreces'>Dirección Sede Madrid:</span><br>
  65.                   <span class='adrecesD'>Carretera blablabla 22 · EMPRESA</span>
  66.                   <span class='adrecesD'>28888 Población · Madrid. T (+34) 999 999 999 </span><br>
  67.                 </p>
  68.             </td>
  69.         </tr>
  70.         <tr valign="top">
  71.           <td valign="top"></td>
  72.           <td colspan="7" ></td>
  73.         </tr>
  74.         <tr>
  75.           <td height="20">&nbsp;</td>
  76.           <td id='linkedin' colspan="6"><a class="enllacos" href="https://www.linkedin.com/company/-farmac%C3%A9utica/">Follow us in Linkedin</a></td>
  77.         </tr>
  78.         <tr>
  79.           <td height="13">&nbsp;</td>
  80.           <td colspan="6"><hr class='linia'/></td>
  81.         </tr>
  82.         <tr>
  83.             <td width=50><p>&nbsp;</p></td>
  84.             <td>
  85.                 <p id='avis'>
  86.                     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>
  87.                 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>
  88.             </td>
  89.         </tr>
  90.         <tr>
  91.             <td width=50>&nbsp;</td>
  92.             <td>
  93.                 <table width="100%" border="0" cellpadding="0" cellspacing="0">
  94.                     <tr>
  95.                         <td><img width=30 height=27 src="http://tepui.cat/foro/medi-ambient.jpg" alt=""/></td>
  96.                         <td><br/>
  97.                             <span id='impressio'>Antes de imprimir piense en su responsabilidad y compromiso con el MEDIO AMBIENTE. Gracias por su colaboración.<br>
  98.                                 Abans d'imprimir pensi en la seva responsabilitat i compromís amb el MEDI AMBIENT. Gràcies per la seva col·laboració.
  99.                             </span>
  100.                         </td>
  101.                     </tr>
  102.                 </table>
  103.             </td>
  104.         </tr>
  105.     </table>
  106. </body>
  107. </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
__________________
Qué fácil cuando lo sabes y qué difícil cuando no