Última modificação: 12 abril 2011
Quando você terminar de fazer seu email marketing com HTML e partir para testar no Internet Explorer, o layout fica quebrado, com linhas entre as fatias (normalmente este problema acontece no Hotmail).
Veja um exemplo: Quebra de layout no email marketing.
[as divs com style que vocês irão ver, servem para corrigir um Bug de renderização no Hotmail, para evitar as linhas de quebra de layout]
Exemplo do Código HTML (ainda com defeito):
<tr> <td width="100" height="100"> <img src="blog.jpg" alt="Blog" width="100" height="100" /> </td> </tr>
Deve estar igualzinho seu código, e tudo era para dar certo mas não deu? Veja o código que vai resolver seus problemas:
<tr> <td width="100" height="100"><img src="blog.jpg" alt="Blog" width="100" height="100" /></td> </tr>
O IE interpreta o ENTER que você coloca para organizar seu código e indentação, como uma quebra de linha.
— RESUMO —
A solução é deixar o elemento e tudo que tem dentro, na mesma linha.
Gerador de e-mail marketing
Para facilitar o trabalho de inserção das medidas de cada imagem em sua célula-mãe e a criação de uma div envolvendo com sua altura correspondente, criamos o Gerador de e-mail marketing:
http://www.webstandards.blog.br/exemplos/gerador-email-marketing/
10 comentários
Respondered1nh0 disse:
Na verdade isso não resolveu meu problema. Tenho enfrentado esse tipo de problema somente com o Hotmail. Já consultei na internet sobre o assunto e ainda não encontrei a solução. Essa quebra de linha acontece no hotmail tanto aberto no IE qto no Firefox e outros navegadores.
g3 disse:
@ed1nh0: Além dá solução de remover os espaços coloque também uma div com a mesma altura que a td.
exemplo:
...
<td width="300" height="50"><div style="height:50px;">{ aqui o conteúdo }</div></td>
...
ed1 disse:
“Descobri” o problema! Vou postar aqui pra compartilhar com todos. A solução pra isso na verdade são duas. A primeira é usar alinhamento médio-absoluto em TODAS AS IMAGENS. Ex.: e a segunda é exibi-la (a imagem) como bloco. Ex.:
1ª – <img … align=”absmiddle”>
2ª – <img … style=”display:block;”>
E é isso! Eu particularmente prefiro a primeira solução por ser nativa da tag . Mas é gosto pessoal. Ambas fazem uma tabela HTML não sofrer quebra de linha no Hotmail.
Entendido? Abraço!
Jason disse:
Usei esta dica:
1ª –
para o Gmail e funcionou perfeitamente…
Valeu Ed1
Fred Fontes disse:
Verdade, a 1ª solução, usando align=”absmiddle” funcionou perfeitamente!
Anãndara disse:
já usei o “display: block” porem no firefox desconfigurou muuiito … alguma dica?
Olivia disse:
Cara, você vai pro céu!! Estavamos procurando a solução do gmail, muito obrigada 😀 agora posso ir dormir!
Eduardo disse:
Cara, minha imagem é a seguinte:
como ponho este código dentro dela? já tentei diversas vezes e realmente não consigo.
obrigado!
g3 disse:
Apenas inclua o atributo na tag da imagem,
Dessa forma:
<img src="sua-imagem.jpg" align="absmiddle" />Eduardo disse:
Comigo só deu certo no GMAIL aplicando as 2 dicas simultaneamente. Foi difícil achar essa solução! Num encontrei nada na web de forma clara, somente aqui! Inclusive tem muito e-mail mkt, de empresa grande e conhecida até, que vem com a imagem desconfigurada…rs… Muitíssimo obrigado!