Nenhum estilo CSS visto no e-mail

StackOverflow https://stackoverflow.com//questions/20007948

Pergunta

Não consigo ver os estilos CSS quando a seguinte página HTML é enviada por e-mail (Yahoo/Gmail) usando mutt. Acabei de ver uma tabela simples.Por que ?Estou esquecendo de algo ?

mutt -e "set content_type=text/html" me@mail.com -s "Test" < Test.html

Teste.html

<!DOCTYPE html>
<html>
<head>
<style>
rd{ color: red; }
gn{ color: green; }
body { background-color:#E0E0E0; font-family: helvetica;font-size: 15px;}
</style>
</head>
<body>
<table border="1" align ="left">
<tr><th>No.</th><th>Item</th></tr>
<tr><td>1</td><td><gn>abc</gn></td></tr>
<tr><td>2</td><td><rd>ghi</rd></td></tr>
</table>
</body>
</html>
Foi útil?

Solução

html-email é muito limitado a ponto de até mesmo as tags div e p nem sempre funcionarem conforme o esperado.Tentar criar suas próprias tags é simplesmente causar problemas.

Suas duas células da tabela devem ficar assim:

<tr><td>1</td><td style="font-family: Helvetica, Arial, sans-serif; font-size: 15px; color:#007700;">abc</td></tr>
<tr><td>2</td><td style="font-family: Helvetica, Arial, sans-serif; font-size: 15px; color:#770000;">ghi</td></tr>

Além de sempre incorporar seu CSS, você precisa usar a cor hexadecimal de 6 dígitos para obter suporte máximo ao cliente de e-mail.Você também deve declarar novamente seus estilos de fonte em cada célula da tabela.Por mais redundante que seja, infelizmente é isso que é necessário no email html.

Não se esqueça também da pilha de fontes, pois você está assumindo que o leitor tem o Helvetica instalado.

Outras dicas

A maneira de incluir CSS em um e-mail HTML é usar estilos embutidos.

    <!DOCTYPE html>
    <html>
    <body style='background-color:#E0E0E0; font-family: helvetica;font-size: 15px;'>
        <table border="1" align="left" style="color:red;">
            <tr><th>No.</th><th>Item</th></tr>
            <tr><td>1</td><td><gn>abc</gn></td></tr>
        </table>
    </body>
    </html>

Referência: http://www.htmlgoodies.com/beyond/css/article.php/3679231

Você pode precisar dar uma olhada neste tutorial Primeiros passos com e-mails HTML sobre tuts plus este é um tutorial antigo, mas muito útil.

boa sorte.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top