visita - Outlook 2007 cambia los estilos de enlace en un correo electrónico HTML para tener un subrayado azul cuando se envía a Hotmail, Gmail, etc. ¿Alguna corrección?
hacer que un link se quede de un color mientras se visita (9)
He estado usando las plantillas de correo electrónico HTML que obtuve de http://www.campaignmonitor.com/templates/ Y en cada ejemplo que he visto, cuando envío un correo electrónico utilizando la plantilla HTML, todos los enlaces reciben la información horrible subrayado azul subrayado. Los correos electrónicos se envían con Outlook 2007 y cuando se ven en Outlook están bien. Sin embargo, en Hotmail y Gmail, este subrayado azul persiste independientemente del color del texto.
He intentado el estilo en línea de la etiqueta a como:
<a href="./" style="color: #E3A216; text-decoration: none;">Mauris commodo hendrerit risus</a>
Si utilizo exactamente el mismo código de plantilla de correo electrónico HTML y lo envío desde mi cuenta de hotmail a otra cuenta de hotmail, funciona perfectamente. Entonces, para mí esto es un problema de Outlook 2007.
Pude diseccionar el html que Outlook envía al destinatario de hotmail y descubrí que Outlook adjunta una hoja de estilo sobre el código HTML. Esto es lo que envía:
<style>
.ExternalClass .ecxshape
{;}
</style>
<style>
.ExternalClass p.ecxMsoNormal, .ExternalClass li.ecxMsoNormal, .ExternalClass div.ecxMsoNormal
{margin-bottom:.0001pt;font-size:11.0pt;font-family:''Calibri'',''sans-serif'';}
.ExternalClass a:link, .ExternalClass span.ecxMsoHyperlink
{color:blue;text-decoration:underline;}
.ExternalClass a:visited, .ExternalClass span.ecxMsoHyperlinkFollowed
{color:purple;text-decoration:underline;}
.ExternalClass p.ecxMsoAcetate, .ExternalClass li.ecxMsoAcetate, .ExternalClass div.ecxMsoAcetate
{margin-bottom:.0001pt;font-size:8.0pt;font-family:''Tahoma'',''sans-serif'';}
.ExternalClass span.ecxEmailStyle17
{font-family:''Calibri'',''sans-serif'';color:windowtext;}
.ExternalClass span.ecxBalloonTextChar
{font-family:''Tahoma'',''sans-serif'';}
.ExternalClass .ecxMsoChpDefault
{;}
@page WordSection1
{size:612.0pt 792.0pt;}
.ExternalClass div.ecxWordSection1
{page:WordSection1;}
</style>
.ExternalClass parece estar configurando los valores para la etiqueta a, pero mi estilo en línea no parece estar sobrescribiendo lo que Outlook está agregando al correo electrónico.
He intentado crear una hoja de estilo en la sección de la cabeza, e incluso en la sección del cuerpo, pero esto no hace nada.
¿Alguien sabe una solución para esto? O bien quiero deshacerme del subrayado, o simplemente mostrar el subrayado en el color que he especificado para los enlaces.
Gracias a cualquiera que pueda ayudar.
En realidad, los estilos en línea son la única forma de aplicar estilo a su texto, pero la mejor manera es declararlo varias veces. Usar la etiqueta FONT como se mencionó anteriormente no sirve para todos los clientes de correo electrónico.
La forma correcta de usar la etiqueta FONT para los correos electrónicos HTML:
<font face="Arial, Helvetica, sans-serif" size="1" color="#333333" style="font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#333333">Example of styled text.</font>
La mejor manera de darle estilo a tu texto es haciendo lo siguiente:
<table cellpadding="0" cellspacing="0" border="0" align="center" width="600">
<tr>
<td width="600" bgcolor="#ffffff" align="left" style="font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#333333;">
<a href="#" style="color:#333333; text-decoration:underline;"><span style="color:#333333;">Example of styled linktext.</span></a>
</td>
</tr>
</table>
Puse un estilo extra en la cabeza , que se aplica en Outlook (pero no en Gmail):
<style type="text/css">
a, a:link, a:visited { color:#333333; }
</style>
Es un error conocido en Outlook que si una etiqueta de anclaje no contiene una URL válida, el estilo definido probablemente se ignorará.
No - No utilice etiquetas de fuente. La etiqueta de fuente se representa de forma diferente de una combinación de correo electrónico cliente-navegador de internet a otra. Puedes probarlo.
- Firefox-Yahoo
- Internet Explorer-Yahoo
Cambios en las etiquetas de fuente:
Diferentes alturas de linea
Diferente espacio entre caracteres y palabras.
Para evitar esto, use siempre <span style=font-family: or <td style=font-family: ..
también
Arreglo para Outlook y otros clientes de correo electrónico:
<a href="#" style="color:#735a29 !important; text-decoration:none !important; "><span style="color:#735a29; text-decoration:none;>LINK
</span></a>
En este caso, Outlook ignora! Importante, pero los clientes de correo electrónico web no lo hacen. Es por eso que debemos repetir la misma declaración de CSS dos veces y otra vez en la técnica a prueba de balas.
No debe utilizar estilos, en línea o de otro tipo, en las plantillas de correo electrónico. El código en desuso es el orden del día y el subrayado de la fuente se evita aplicando correctamente la declaración de color de fuente alrededor del enlace, incluso si ya está dentro de una declaración de fuente para el texto circundante. Ejemplo:
<font face="Arial, Helvetica, sans-serif" color="#ffffff" size="2">Some non link text here followed by <a href="http://www.yourlink.com" target="_blank"><font color="#ffffff"><u><em>the text for the link here surrounded by the font style specifically for the link</em></u></font></a> irrespective of the text that surrounds it</font>
Disfrutar. Los correos electrónicos HTML están muy atrasados en la forma en que deben construirse para satisfacer a todos los clientes de correo electrónico.
No recuerdo dónde encontré esta solución, pero coloco el siguiente CSS en el <head> de mis correos electrónicos (envuelto dentro de una etiqueta <style> por supuesto.
/*outlook links visited state fix*/
span.MsoHyperlink { mso-style-priority:99; color:inherit; }
span.MsoHyperlinkFollowed { mso-style-priority:99; color:inherit; }
Para deshacerse del azul en Gmail, simplemente cambie el color de # 000000 a # 000001. Gmail hace que todos los enlaces negros sean azules.
Si su problema es tan simple como no poder anular la hoja de estilos de Outlook, debe probar la declaración !important con sus estilos en línea, por ejemplo:
<a href="./" style="color: #E3A216 !important; text-decoration: none !important;">Mauris commodo hendrerit risus</a>
Tuve un gran lío con este problema pero encontré una buena solución.
Digamos que desea que el enlace sea rojo sin un estilo especial para una situación de desplazamiento:
a:link{color: red}
a:visited{color: red}
a:hover{color: red}
a:active{color: red}
Si omite alguno de estos 4 enunciados o lo hace en otro orden, esto podría hacer que su estilo de enlace no funcione. También funciona en un cliente de gmail.
Actualización: esta respuesta fue correcta en el momento de escribir este artículo en 2012, pero parece que ya no funciona.
Envuelve tu texto con una etiqueta <span> con un atributo de style .
También deberías usar <font> para tener más cuidado.
Por ejemplo:
<a style="color:#E3A216; text-decoration:none;">
<span style="color:#E3A216;">
<font color="#E3A216">
Click me
</font>
</span>
</a>