Problemas em email com HTML e imagens

Johnny_Montserrat · December 20, 2011

Olá, pessoal.

estou com um problema bizarro aqui ao enviar emails com html. Eu fiz uma arte no Photoshop CS5 e como precisava de links nessa arte eu usei a slice tool para linkar partes da imagem, daí eu gerei o html e tudo o mais... Até aí tudo bem, abri o html e tudo abria exatamente como deveria abrir.

Então fui na minha ferramenta de mailing e colei o código e fiz alguns testes, abri no webmail e estava tudo ok, mas quando abri a imagem pelo Microsoft Outlook, ele carrega as imagens normalmente, fica tudo maravilhoso, mas, após carregar todas as imagens ele dá uma espécie de "refresh" e "distorce" o código, criando um espaçamento indevido entre as imagens das tabelas...

Tirei um print de como ele fica no Outlook: http://lmrs.com.br/externo/erro.png

Aqui é como ele deveria abrir: http://lmrs.com.br/mailing/kinect_natal_2011/kinect.html

Eu notei que no próprio editor da minha ferramenta de mailing ele parece que já fica com um certo espaçamento entre as imagens: http://lmrs.com.br/externo/erro2.png

O código que estou colando no email é:

<table border="0" cellpadding="0" cellspacing="0" height="1251" id="Table_01" width="651">
    <tbody>
        <tr>
            <td colspan="7">
                <img alt="" height="531" src="http://lmrs.com.br/mailing/kinect_natal_2011/images/kinect_01.gif" width="650" /></td>
            <td>
                <img alt="" height="531" src="http://lmrs.com.br/mailing/kinect_natal_2011/images/spacer.gif" width="1" /></td>
        </tr>
        <tr>
            <td colspan="2" rowspan="4">
                <img alt="" height="293" src="http://lmrs.com.br/mailing/kinect_natal_2011/images/kinect_02.gif" width="32" /></td>
            <td colspan="2">
                <img alt="" height="28" src="http://lmrs.com.br/mailing/kinect_natal_2011/images/comprar.gif" width="116" /></td>
            <td colspan="3">
                <img alt="" height="28" src="http://lmrs.com.br/mailing/kinect_natal_2011/images/kinect_04.gif" width="502" /></td>
            <td>
                <img alt="" height="28" src="http://lmrs.com.br/mailing/kinect_natal_2011/images/spacer.gif" width="1" /></td>
        </tr>
        <tr>
            <td>
                <img alt="" height="20" src="http://lmrs.com.br/mailing/kinect_natal_2011/images/comprar-06.gif" width="66" /></td>
            <td colspan="2" rowspan="2">
                <a href="http://www.lmrs.com.br/kit-kinect-xbox-360-prod-5432.html"> <img alt="" border="0" height="48" src="http://lmrs.com.br/mailing/kinect_natal_2011/images/comprar1.gif" width="113" /></a></td>
            <td colspan="2" rowspan="3">
                <img alt="" height="265" src="http://lmrs.com.br/mailing/kinect_natal_2011/images/kinect_07.gif" width="439" /></td>
            <td>
                <img alt="" height="20" src="http://lmrs.com.br/mailing/kinect_natal_2011/images/spacer.gif" width="1" /></td>
        </tr>
        <tr>
            <td rowspan="2">
                <img alt="" height="245" src="http://lmrs.com.br/mailing/kinect_natal_2011/images/kinect_08.gif" width="66" /></td>
            <td>
                <img alt="" height="28" src="http://lmrs.com.br/mailing/kinect_natal_2011/images/spacer.gif" width="1" /></td>
        </tr>
        <tr>
            <td colspan="2">
                <img alt="" height="217" src="http://lmrs.com.br/mailing/kinect_natal_2011/images/kinect_09.gif" width="113" /></td>
            <td>
                <img alt="" height="217" src="http://lmrs.com.br/mailing/kinect_natal_2011/images/spacer.gif" width="1" /></td>
        </tr>
        <tr>
            <td rowspan="2">
                <img alt="" height="426" src="http://lmrs.com.br/mailing/kinect_natal_2011/images/kinect_10.gif" width="17" /></td>
            <td colspan="5">
                <a href="http://www.youtube.com/watch?v=DWwP9aRHV7A"> <img alt="" border="0" height="273" src="http://lmrs.com.br/mailing/kinect_natal_2011/images/video.jpg" width="402" /></a></td>
            <td rowspan="2">
                <img alt="" height="426" src="http://lmrs.com.br/mailing/kinect_natal_2011/images/kinect_12.gif" width="231" /></td>
            <td>
                <img alt="" height="273" src="http://lmrs.com.br/mailing/kinect_natal_2011/images/spacer.gif" width="1" /></td>
        </tr>
        <tr>
            <td colspan="5">
                <img alt="" height="153" src="http://lmrs.com.br/mailing/kinect_natal_2011/images/kinect_13.gif" width="402" /></td>
            <td>
                <img alt="" height="153" src="http://lmrs.com.br/mailing/kinect_natal_2011/images/spacer.gif" width="1" /></td>
        </tr>
        <tr>
            <td>
                <img alt="" height="1" src="http://lmrs.com.br/mailing/kinect_natal_2011/images/spacer.gif" width="17" /></td>
            <td>
                <img alt="" height="1" src="http://lmrs.com.br/mailing/kinect_natal_2011/images/spacer.gif" width="15" /></td>
            <td>
                <img alt="" height="1" src="http://lmrs.com.br/mailing/kinect_natal_2011/images/spacer.gif" width="66" /></td>
            <td>
                <img alt="" height="1" src="http://lmrs.com.br/mailing/kinect_natal_2011/images/spacer.gif" width="50" /></td>
            <td>
                <img alt="" height="1" src="http://lmrs.com.br/mailing/kinect_natal_2011/images/spacer.gif" width="63" /></td>
            <td>
                <img alt="" height="1" src="http://lmrs.com.br/mailing/kinect_natal_2011/images/spacer.gif" width="208" /></td>
            <td>
                <img alt="" height="1" src="http://lmrs.com.br/mailing/kinect_natal_2011/images/spacer.gif" width="231" /></td>
            <td>
                 </td>
        </tr>
    </tbody>
</table>
<p>Se você não está conseguindo visualizar corretamente o conteúdo deste email, clique <a href="mailing/kinect_natal_2011/kinect.html">aqui</a>.</p>

maureucio · December 21, 2011

Olá, pessoal.

estou com um problema bizarro aqui ao enviar emails com html. Eu fiz uma arte no Photoshop CS5 e como precisava de links nessa arte eu usei a slice tool para linkar partes da imagem, daí eu gerei o html e tudo o mais... Até aí tudo bem, abri o html e tudo abria exatamente como deveria abrir.

Então fui na minha ferramenta de mailing e colei o código e fiz alguns testes, abri no webmail e estava tudo ok, mas quando abri a imagem pelo Microsoft Outlook, ele carrega as imagens normalmente, fica tudo maravilhoso, mas, após carregar todas as imagens ele dá uma espécie de "refresh" e "distorce" o código, criando um espaçamento indevido entre as imagens das tabelas...

Tirei um print de como ele fica no Outlook: http://lmrs.com.br/externo/erro.png

Aqui é como ele deveria abrir: http://lmrs.com.br/mailing/kinect_natal_2011/kinect.html

Eu notei que no próprio editor da minha ferramenta de mailing ele parece que já fica com um certo espaçamento entre as imagens: http://lmrs.com.br/externo/erro2.png

O código que estou colando no email é:

<table border="0" cellpadding="0" cellspacing="0" height="1251" id="Table_01" width="651">
    <tbody>
        <tr>
            <td colspan="7">
                <img alt="" height="531" src="http://lmrs.com.br/mailing/kinect_natal_2011/images/kinect_01.gif" width="650" /></td>
            <td>
                <img alt="" height="531" src="http://lmrs.com.br/mailing/kinect_natal_2011/images/spacer.gif" width="1" /></td>
        </tr>
        <tr>
            <td colspan="2" rowspan="4">
                <img alt="" height="293" src="http://lmrs.com.br/mailing/kinect_natal_2011/images/kinect_02.gif" width="32" /></td>
            <td colspan="2">
                <img alt="" height="28" src="http://lmrs.com.br/mailing/kinect_natal_2011/images/comprar.gif" width="116" /></td>
            <td colspan="3">
                <img alt="" height="28" src="http://lmrs.com.br/mailing/kinect_natal_2011/images/kinect_04.gif" width="502" /></td>
            <td>
                <img alt="" height="28" src="http://lmrs.com.br/mailing/kinect_natal_2011/images/spacer.gif" width="1" /></td>
        </tr>
        <tr>
            <td>
                <img alt="" height="20" src="http://lmrs.com.br/mailing/kinect_natal_2011/images/comprar-06.gif" width="66" /></td>
            <td colspan="2" rowspan="2">
                <a href="http://www.lmrs.com.br/kit-kinect-xbox-360-prod-5432.html"> <img alt="" border="0" height="48" src="http://lmrs.com.br/mailing/kinect_natal_2011/images/comprar1.gif" width="113" /></a></td>
            <td colspan="2" rowspan="3">
                <img alt="" height="265" src="http://lmrs.com.br/mailing/kinect_natal_2011/images/kinect_07.gif" width="439" /></td>
            <td>
                <img alt="" height="20" src="http://lmrs.com.br/mailing/kinect_natal_2011/images/spacer.gif" width="1" /></td>
        </tr>
        <tr>
            <td rowspan="2">
                <img alt="" height="245" src="http://lmrs.com.br/mailing/kinect_natal_2011/images/kinect_08.gif" width="66" /></td>
            <td>
                <img alt="" height="28" src="http://lmrs.com.br/mailing/kinect_natal_2011/images/spacer.gif" width="1" /></td>
        </tr>
        <tr>
            <td colspan="2">
                <img alt="" height="217" src="http://lmrs.com.br/mailing/kinect_natal_2011/images/kinect_09.gif" width="113" /></td>
            <td>
                <img alt="" height="217" src="http://lmrs.com.br/mailing/kinect_natal_2011/images/spacer.gif" width="1" /></td>
        </tr>
        <tr>
            <td rowspan="2">
                <img alt="" height="426" src="http://lmrs.com.br/mailing/kinect_natal_2011/images/kinect_10.gif" width="17" /></td>
            <td colspan="5">
                <a href="http://www.youtube.com/watch?v=DWwP9aRHV7A"> <img alt="" border="0" height="273" src="http://lmrs.com.br/mailing/kinect_natal_2011/images/video.jpg" width="402" /></a></td>
            <td rowspan="2">
                <img alt="" height="426" src="http://lmrs.com.br/mailing/kinect_natal_2011/images/kinect_12.gif" width="231" /></td>
            <td>
                <img alt="" height="273" src="http://lmrs.com.br/mailing/kinect_natal_2011/images/spacer.gif" width="1" /></td>
        </tr>
        <tr>
            <td colspan="5">
                <img alt="" height="153" src="http://lmrs.com.br/mailing/kinect_natal_2011/images/kinect_13.gif" width="402" /></td>
            <td>
                <img alt="" height="153" src="http://lmrs.com.br/mailing/kinect_natal_2011/images/spacer.gif" width="1" /></td>
        </tr>
        <tr>
            <td>
                <img alt="" height="1" src="http://lmrs.com.br/mailing/kinect_natal_2011/images/spacer.gif" width="17" /></td>
            <td>
                <img alt="" height="1" src="http://lmrs.com.br/mailing/kinect_natal_2011/images/spacer.gif" width="15" /></td>
            <td>
                <img alt="" height="1" src="http://lmrs.com.br/mailing/kinect_natal_2011/images/spacer.gif" width="66" /></td>
            <td>
                <img alt="" height="1" src="http://lmrs.com.br/mailing/kinect_natal_2011/images/spacer.gif" width="50" /></td>
            <td>
                <img alt="" height="1" src="http://lmrs.com.br/mailing/kinect_natal_2011/images/spacer.gif" width="63" /></td>
            <td>
                <img alt="" height="1" src="http://lmrs.com.br/mailing/kinect_natal_2011/images/spacer.gif" width="208" /></td>
            <td>
                <img alt="" height="1" src="http://lmrs.com.br/mailing/kinect_natal_2011/images/spacer.gif" width="231" /></td>
            <td>
                 </td>
        </tr>
    </tbody>
</table>
<p>Se você não está conseguindo visualizar corretamente o conteúdo deste email, clique <a href="mailing/kinect_natal_2011/kinect.html">aqui</a>.</p>

não sei c intendi bem seu problema mas vou dar pitaco assim mesmo ... faz o seguinte .... formata isso tudo aí com CSS , usa <DIV> ao invés de tabela ... a confecção de páginas com tabelas sempre da esses erros !!!

Johnny_Montserrat · December 22, 2011

não sei c intendi bem seu problema mas vou dar pitaco assim mesmo ... faz o seguinte .... formata isso tudo aí com CSS , usa <DIV> ao invés de tabela ... a confecção de páginas com tabelas sempre da esses erros !!!

Olá, obrigado pela resposta.

Mas olha só, até onde eu saiba o Outlook não lê muito bem a tag <div>...

Johnny_Montserrat · December 22, 2011

Primeiro, desculpem o flood... xD

Bom, tentei fazer com css e não tá abrindo, eu tentei usar uma única imagem e coloquei ela como background e colocar uma div com o link por cima do fundo...

Só que não sei se é o Outlook ou a ferramenta que estou utilizando para enviar os emails, mas não carrega o css nem a imagem do bg...

O código que usei foi:

<div style="width:650px;
    height:1250px;
    background-image:url(http://www.lmrs.com.br/mailing/kinect_natal_2011/kinect.jpg);
    background-repeat:no-repeat;">
<div style="width:100px;
    height:50px;
    float:left;
    margin-top:545px;
    margin-left:100px;"> <a href="http://www.lmrs.com.br/kit-kinect-xbox-360-prod-5432.html"><img src="http://www.lmrs.com.br/mailing/kinect_natal_2011/comprar.png" /></a>
</div>
</div>

Edited December 22, 2011 by Johnny_Montserrat

Sign In

Problemas em email com HTML e imagens

Question

Johnny_Montserrat

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

maureucio

Link to comment

Share on other sites

Johnny_Montserrat

Link to comment

Share on other sites

Johnny_Montserrat

Link to comment

Share on other sites

Join the conversation

Forum Statistics

Browse

Activity