Blog Web Standards

Soluções para os problemas enfrentados pelos desenvolvedores HTML e CSS no dia-a-dia

Ú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

Responder
  1. 9 de dezembro de 2009

    ed1nh0 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.

  2. 10 de dezembro de 2009

    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>
    ...

  3. 10 de dezembro de 2009

    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!

  4. 16 de junho de 2010

    Jason disse:

    Usei esta dica:

    1ª –

    para o Gmail e funcionou perfeitamente…

    Valeu Ed1

  5. 26 de julho de 2010

    Fred Fontes disse:

    Verdade, a 1ª solução, usando align=”absmiddle” funcionou perfeitamente!

  6. 25 de setembro de 2010

    Anãndara disse:

    já usei o “display: block” porem no firefox desconfigurou muuiito … alguma dica?

  7. 5 de novembro de 2010

    Olivia disse:

    Cara, você vai pro céu!! Estavamos procurando a solução do gmail, muito obrigada 😀 agora posso ir dormir!

  8. 19 de janeiro de 2011

    Eduardo disse:

    Cara, minha imagem é a seguinte:

    como ponho este código dentro dela? já tentei diversas vezes e realmente não consigo.
    obrigado!

  9. 25 de janeiro de 2011

    g3 disse:

    Apenas inclua o atributo na tag da imagem,

    Dessa forma:

    <img src="sua-imagem.jpg" align="absmiddle" />

  10. 29 de março de 2011

    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!

Escreva seu comentário