Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

lucas1silva1s

Problema com espaçamento em imagens HTML na assinatura do Outlook

Recommended Posts

Olá pessoal, bom dia! Estou com um problema que tô tentando resolver tem uns dias no trabalho já.. seguinte, tem essa assinatura de e-mail que criei o código HTML "na unha" que tentei fazer o mais limpo e padronizado possível, e ficou ótimo em todos os e-mails que testei, MENOS quando adiciono como assinatura no Outlook 2013, quando eu adiciono no outlook, faço aquele processo de ir no %appdata% e achar o arquivo da assinatura em HTML e trocar o código de lá por esse meu HTML. Mas em todos os bilhares de testes que fiz, inclusive o mais básico deles que é o tal do "display:block" não funciona porque o problema é com o outlook quando envia a mensagem, quando ele envia acho que ele faz alguma codificação que dá esses espaços na mensagem, se eu mando do gmail para o outlook, chega perfeito no outlook, mas se for o contrário, aí dá problema! Tem ideia do que deve ser? Vou mandar abaixo o HTML da assinatura, e uma imagem de como ela deveria ficar, e como ela fica no outlook:

 

caso a imagem não apareça abaixo, o link é:

http://provisaovendas.com.br/marketing/temporario/exemplo.png

 

image.png

 

 

<table border="0" cellpadding="0" cellspacing="0" width="600" style="max-width:600px; display:block; border:1px solid #aaaabe; border-collapse: collapse" bgcolor="white">
<tbody>
<tr>
<td width="145" height="90">
<a href="http://www.provisaopromotora.com" target="new"><img src="http://www.provisaovendas.com.br/marketing/assinatura/imagens/logo_4x.png" width="145" height="90" style="display:block; width: 100%; max-width: 145px" alt="Provisão Promotora"></a>
</td>
<td width="355" height="90" style="max-width:355px; max-height:90px; mso-line-height-rule:exactly; line-height:20px">
<font style="font-family:Calibri, Arial; font-size:11px; color:teal; font-weight:bold">

Lucas Souza

</font>
<font style="font-family:Calibri, Arial; font-size:11px; color:#808080">

&nbsp;- Depto de Marketing

</font>
<br>
<a href="tel:+553125313535"><font style="font-family:Calibri, Arial; font-size:11px; color:#3282ff">

(31) 2531-3535

</font></a>
<font style="font-family:Calibri, Arial; font-size:11px; color:#808080">

&nbsp;|&nbsp;

</font>
<a href="tel:+5531999999999"><font style="font-family:Calibri, Arial; font-size:11px; color:#3282ff">

(31) 99999-9999

</font></a>
<font style="font-family:Calibri, Arial; font-size:11px; color:#808080">

&nbsp;(whatsapp)

</font>
<br>
<a href="https://goo.gl/maps/omS9Zt9aQN12" target="new"><font style="font-family:Calibri, Arial; font-size:11px; color:#3282ff">

Av. Afonso Pena, 578 - Sala 702 | Centro - BH

</font></a>
<br>
<a href="mailto:marketing@provisaopromotora.com"><font style="font-family:Calibri, Arial; font-size:11px; color:#3282ff">

marketing@provisaopromotora.com

</font></a>
<font style="font-family:Calibri, Arial; font-size:11px; color:#808080">

&nbsp;|&nbsp;

</font>
<a href="http://www.provisaopromotora.com" target="new"><font style="font-family:Calibri, Arial; font-size:11px; color:#3282ff">

Nosso Site

</font></a>
</td>
<td width="100" height="90">
<img src="http://www.provisaovendas.com.br/marketing/assinatura/imagens/qr_code_4x.png" width="100" height="90" style="display:block; width: 100%; max-width: 100px" alt="QR Code">
</td>
</tr>
<tr>
<td colspan="3" width="600" height="40">
<img src="http://www.provisaovendas.com.br/marketing/assinatura/imagens/rodape_4x.png" width="600" height="40" style="display:block; width: 100%; max-width: 600px" alt="Rodapé | Se não aparece nenhuma imagem aqui, configure seu e-mail para baixar imagens!">
</td>
</tr>
</tbody>
</table>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Bom.. eu descobri que o problema está na formatação de texto da <td> por mais que não tenha texto, no outlook quando coloco aquela formatação de texto "sem espaçamento" aí ela dá certo na visualização e finalmente corrige o problema, mas quando envio, no gmail e e-mail web do outlook ainda recebe errado com os espaços, eu precisava descobrir qual tag o outlook usa para esse "sem espaçamento" e colocar no html, aí acho que daria.. alguém sabe esse código?

Compartilhar este post


Link para o post
Compartilhar em outros sites
Em 27/06/2018 at 09:55, lucas1silva1s disse:

Bom.. eu descobri que o problema está na formatação de texto da <td> por mais que não tenha texto, no outlook quando coloco aquela formatação de texto "sem espaçamento" aí ela dá certo na visualização e finalmente corrige o problema, mas quando envio, no gmail e e-mail web do outlook ainda recebe errado com os espaços, eu precisava descobrir qual tag o outlook usa para esse "sem espaçamento" e colocar no html, aí acho que daria.. alguém sabe esse código?

opa tem como me manda um email pra mim ver como ta retornando

Compartilhar este post


Link para o post
Compartilhar em outros sites

Em mais uma bateria de testes, descobri no fim das contas que o problema não é com o código, e sim com o Outlook! Quando enviamos texto ou imagem com ele, ele envolve esse texto ou imagem com a tag <p class="MsoNormal">

 

E acontece que ele coloca os parâmetros de formatação nessa classe no <style> mas acontece que muitos provedores de e-mail não aceitam <style>! E no meu caso, o da Locaweb e nem o Gmail para celular! Logo, acaba que fica configurado o parâmetro padrão de <p> que possui espaçamento.

 

Até encontrei um artigo de um cara dando a sugestão para a equipe do Google pelo Gmail, adicionarem a linha de código:

 

p.MsoNormal {margin: 0px}

 

ao código fonte deles, porque iria resolver o problema pelo menos para mensagens enviadas do Outlook para Gmail! Porque a outra solução é pedir para a Microsoft reprogramar por completo o Outlook,e me parece mais complicadinho né :sweat_smile:

 

Por fim, decidi então largar pra lá isso, se uma hora eu quiser que alguém receba perfeitamente uma mensagem, mando pelo Gmail por HTML, que fica perfeito em tudo! Vou mandar abaixo o código final que deu certo para mim no:

 

- Gmail Web pelo Google Chrome

- Outlook Web pelo Google Chrome

- Outlook Aplicativo PC (2013)

 

<html>
<head>
<meta charset="utf-8">
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="600" style="max-width:600px; display:block; border:1px solid #aaaabe; border-collapse: collapse" bgcolor="white">
<tbody>
<tr>
<td width="145" height="90" valign="bottom">
<p style="margin:0; line-height:0"><a href="http://www.provisaopromotora.com" target="new"><img src="http://www.provisaovendas.com.br/marketing/assinatura/imagens/logo_4x.png" width="145" height="90" align="left" style="display:block; width: 100%; max-width: 145px" alt="Provisão Promotora"></a></p>
</td>
<td width="355" height="90" style="max-width:355px; max-height:90px; mso-line-height-rule:exactly; line-height:20px">
<font style="font-family:Calibri, Arial; font-size:11px; color:teal; font-weight:bold">

Lucas Souza

</font>
<font style="font-family:Calibri, Arial; font-size:11px; color:#808080">

&nbsp;- Depto de Marketing

</font>
<br>
<a href="tel:+553125313535"><font style="font-family:Calibri, Arial; font-size:11px; color:#3282ff">

(31) 2531-3535

</font></a>
<font style="font-family:Calibri, Arial; font-size:11px; color:#808080">

&nbsp;|&nbsp;

</font>
<a href="tel:+5531999999999"><font style="font-family:Calibri, Arial; font-size:11px; color:#3282ff">

(31) 99999-9999

</font></a>
<font style="font-family:Calibri, Arial; font-size:11px; color:#808080">

&nbsp;(whatsapp)

</font>
<br>
<a href="https://goo.gl/maps/omS9Zt9aQN12" target="new"><font style="font-family:Calibri, Arial; font-size:11px; color:#3282ff">

Av. Afonso Pena, 578 - Sala 702 | Centro - BH

</font></a>
<br>
<a href="mailto:marketing@provisaopromotora.com"><font style="font-family:Calibri, Arial; font-size:11px; color:#3282ff">

marketing@provisaopromotora.com

</font></a>
<font style="font-family:Calibri, Arial; font-size:11px; color:#808080">

&nbsp;|&nbsp;

</font>
<a href="http://www.provisaopromotora.com" target="new"><font style="font-family:Calibri, Arial; font-size:11px; color:#3282ff">

Nosso Site

</font></a>
</td>
<td width="100" height="90" valign="bottom">
<p style="margin:0; line-height:0"><img src="http://www.provisaovendas.com.br/marketing/assinatura/imagens/qr_code_4x.png" width="100" height="90" align="left" style="display:block; width: 100%; max-width: 100px" alt="QR Code"></p>
</td>
</tr>
<tr>
<td colspan="3" width="600" height="40" valign="bottom">
<p style="margin:0; line-height:0"><img src="http://www.provisaovendas.com.br/marketing/assinatura/imagens/rodape_4x.png" width="600" height="40" align="left" style="display:block; width: 100%; max-width: 600px" alt="Rodapé | Se não aparece nenhuma imagem aqui, configure seu e-mail para baixar imagens!"></p>
</td>
</tr>
</tbody>
</table>
</body>
</html>

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por juliosonic
      Boa noite..
      Estou desenvolvendo um site de https://www.maithunatantra.com.br/ e estou com um duvida sobre o menu de navegação da versão mobile.
      O menu que tem o dropdown "Terapeutas" e "Terapias" quando clico em cima ele expande como deve ser, mas quando clico denovo para recolher os submenus
      nao acontece nada.. segue o trecho do codigo do menu..
      <div class="collapse navbar-collapse" id="navbarsExample09">             <ul class="navbar-nav ml-auto">               <li class="nav-item  active"><a class="nav-link" href="index.html">Home</a></li>               <li class="nav-item  active"><a class="nav-link" href="about-us.html">Quem Somos</a></li>               <li class="nav-item dropdown1">                     <a class="nav-link dropdown-toggle" data-toggle="dropdown1" href="#">Terapeutas</a>                     <ul class="dropdown-menu">                         <li><a class="dropdown-item" href="terapeuta-julio-cezar.html">Julio Cezar</a></li>                         <li><a class="dropdown-item" href="terapeuta-pamela-priscila.html">Pamela Priscila</a></li>                     </ul>                                    </li>               <li class="nav-item dropdown">                     <a class="nav-link dropdown-toggle" data-toggle="dropdown1" href="#">Terapias</a>                     <ul class="dropdown-menu" aria-labelledby="dropdown01">                         <li><a class="dropdown-item" href="o-que-e-reiki.html">O que é Reiki</a></li>                         <li><a class="dropdown-item" href="beneficios-reiki.html">Benefícios do Reiki</a></li>                         <li><a class="dropdown-item" href="principios-reiki.html">Princípios do Reiki</a></li>                         <li><a class="dropdown-item" href="animais-reiki.html">Reiki em Animais</a></li>                         <li><a class="dropdown-item" href="animais-reiki.html">Estudos Sobre Reiki</a></li>                         <li><a class="dropdown-item" href="terapia-massagem-tantrica.html">Terapia Tântrica</a></li>                     </ul>               </li>               <li class="nav-item  active"><a class="nav-link" href="blog.html">Blog</a></li>                <li class="nav-item"><a class="nav-link" href="contato.html">Contato</a></li>             </ul>         </div>  
      Massagem Tantrica em Curitiba
      Tantra Curitiba
      Massagem Tântrica
      Tantra
      Julio Darshan

      Obrigado
      Att
      Julio Cezar
       
       
       
    • Por joeythai
      Boa tarde pessoal,
       
      Eu criei um formulário em que tenho 3 interações: evento click, change e uma chamada ajax. No evento on change ("select#removal_table_from" )eu faço uma chamada ajax onde eu passo como parametro o id do item selecionado e construo uma tabela dinamica com o próprio javascript, após isto, tenho um input em que o usuario coloca um valor de percentual para que eu possa preencher em 3 colunas da tabela que foi criada dinamicamente: moto_atualizado, carro_atualizado e caminhao_atualizado, até aí tudo bem, o codigo está fazendo isso, porém, como a tabela é criada dinamicamente eu preciso de alguma forma enviar o arrayData para meu backend mas quando faço o calculo dentro do loop apos resposta do meu ajax, os valores desses 3 campos chegam como null, não sei se é possível fazer o que pretendo ou se é ainda não sei como faz
       
      <code>
           $(document).ready(function (event) {   let arrayData = []; let percentage; let removal_vehicle; let removal_motorcycle; let removal_tuck; let apply_removal = $('#apply_removal');   // apply_removal.on('click', function () { // percentage = $('#percentage').val();   // $('.table-body tr').each(function () {   // let veiculo = $(this).find('.veiculo').text(); // let moto = $(this).find('.moto').text(); // let caminhao = $(this).find('.caminhao').text();   // let removal_vehicle = parseFloat(veiculo) + (parseFloat(veiculo) * parseFloat(percentage)) / 100; // let removal_motorcycle = parseFloat(moto) + (parseFloat(moto) * parseFloat(percentage)) / 100; // let removal_tuck = parseFloat(caminhao) + (parseFloat(caminhao) * parseFloat(percentage)) / 100;   // arrayData.push({ // removal_vehicle, // removal_motorcycle, // removal_tuck // })   // $(this).find('.veiculo_atualizado').val(removal_vehicle.toFixed(2)); // $(this).find('.moto_atualizado').val(removal_motorcycle.toFixed(2)); // $(this).find('.caminhao_atualizado').val(removal_tuck.toFixed(2)); // }); // });   apply_removal.on('click', function () { percentage = $('#percentage').val();   $('.table-body tr').each(function () {   let veiculo = $(this).find('.veiculo').text(); let moto = $(this).find('.moto').text(); let caminhao = $(this).find('.caminhao').text();   removal_vehicle = parseFloat(veiculo) + (parseFloat(veiculo) * parseFloat(percentage)) / 100; removal_motorcycle = parseFloat(moto) + (parseFloat(moto) * parseFloat(percentage)) / 100; removal_tuck = parseFloat(caminhao) + (parseFloat(caminhao) * parseFloat(percentage)) / 100;   arrayData.push({ removal_vehicle, removal_motorcycle, removal_tuck })   $(this).find('.veiculo_atualizado').val(removal_vehicle.toFixed(2)); $(this).find('.moto_atualizado').val(removal_motorcycle.toFixed(2)); $(this).find('.caminhao_atualizado').val(removal_tuck.toFixed(2));     console.log('Removal Vehicle:', removal_vehicle); console.log('Removal Motorcycle:', removal_motorcycle); console.log('Removal Truck:', removal_tuck); }); });   $('select#removal_table_from').on('change', function (e) { let table_id = $(this).val(); let action = route('removal.removal-values.show', table_id);   $.ajax({ type: "GET", url: action, headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },   success: function (data) { $('.table-body').empty();   for (let i = 0; i < data.length; i++) { let carro = parseFloat(data[i].CARRO); let moto = parseFloat(data[i].MOTO); let caminhao = parseFloat(data[i].CAMINHAO); let distancia = data[i].DISTANCIA; let origem = data[i].ORIGEM; let destino = data[i].DESTINO; let localidadeOrigem = data[i].LocalidadeOrigem_ID; let localidadeDestino = data[i].LocalidadeDestino_ID;   let newRow = '<tr class="removal-row">' + '<td class="align-middle">' + '<div class="row">' + '<div class="col-1">' + '<span class="font-weight-bold">Origem</span><br>' + '<span class="origem">' + origem + '</span>' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Destino</span><br>' + '<span class="destino">' + destino + '</span>' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">KM</span><br>' + '<span class="km">' + distancia + '</span>' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Veículo</span><br>' + '<span class="veiculo">' + carro + '</span>' + '</div>' + '<div class="col-2">' + '<span class="font-weight-bold">Veículo Atualizado</span><br>' + '<input type="text" class="veiculo_atualizado">' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Moto</span><br>' + '<span class="moto">' + moto + '</span>' + '</div>' + '<div class="col-2">' + '<span class="font-weight-bold">Moto Atualizado</span><br>' + '<input type="text" class="moto_atualizado">' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Caminhão</span><br>' + '<span class="caminhao">' + caminhao + '</span>' + '</div>' + '<div class="col-2">' + '<span class="font-weight-bold">Caminhão Atualizado</span><br>' + '<input type="text" class="caminhao_atualizado">' + '</div>' + '</div>' + '</div>' + '</td>' + '</tr>';   $('.table-body').append(newRow); //let row = $('.removal-row:last');   // Calcula o valor atualizado e define nos campos diretamente // let veiculo_atualizado = carro + (carro * percentage) / 100; // let moto_atualizado = moto + (moto * percentage) / 100; // let caminhao_atualizado = caminhao + (caminhao * percentage) / 100; // console.log('PORCENTS: ', percentage); //console.log('Veiculo Atualizado:', veiculo_atualizado, 'Moto Atualizado:', moto_atualizado, 'Caminhao Atualizado:', caminhao_atualizado);   // Define os valores diretamente nos campos da nova linha // row.find('.veiculo_atualizado').val(veiculo_atualizado.toFixed(2)); // row.find('.moto_atualizado').val(moto_atualizado.toFixed(2)); // row.find('.caminhao_atualizado').val(caminhao_atualizado.toFixed(2));   arrayData.push({ carro, moto, caminhao, distancia, origem, destino, localidadeOrigem, localidadeDestino, removal_vehicle, removal_motorcycle, removal_tuck }); }   $('#copy_data_table').val(JSON.stringify(arrayData)); }   }); });   //javascript para o formulario de cadastro // $(document).ready(function (event) { $('#uf').change(function () { let code_city = $(this).val(); let deposit = localStorage.getItem('selected_deposit_id'); let action = route('removal.removal-values.cities', code_city); $.ajax({ type: "POST", url: action, headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, data: { code_city: code_city },   success: function (data) {   $('#city').empty(); $('#deposit').empty();   for (let i = 0; i < data.cities.length; i++) { $('#city').append('<option value="' + data.cities[i].NM + '">' + data.cities[i].NM + '<option>'); }   if (data.deposits.length > 0) { for (let i = 0; i < data.deposits.length; i++) { $('#deposit').append('<option value="' + data.deposits[i].NM + '">' + data.deposits[i].NM + '<option>'); } } else { // $('#deposit').prop('disabled', true); // $('#city').prop('disabled', false); }   $('#city').trigger('change'); } });   });   $('#deposit').on('change', function () { depositId = $(this).val(); localStorage.setItem('selected_deposit_id', depositId); });   $('#uf_destiny').change(function () { let code_city = $(this).val(); let depositDestiny = localStorage.getItem('selected_deposit_destiny_id'); let action = route('removal.removal-values.cities', code_city); $.ajax({ type: "POST", url: action, headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, data: { code_city: code_city },   success: function (data) {   $('#city_destiny').empty(); $('#deposit_destiny').empty();   for (let i = 0; i < data.cities.length; i++) { $('#city_destiny').append('<option value="' + data.cities[i].NM + '">' + data.cities[i].NM + '</option>'); }   if (data.deposits.length > 0) { // $('#deposit_destiny').prop('disabled', false); //$('#city_destiny').empty(); // $('#city_destiny').prop('disabled', true); for (let i = 0; i < data.deposits.length; i++) { $('#deposit_destiny').append('<option value="' + data.deposits[i].NM + '">' + data.deposits[i].NM + '</option>'); } } else { // $('#deposit_destiny').prop('disabled', true); // $('#city_destiny').prop('disabled', false); }   $('#city_destiny').trigger('change'); } }); });   $('#deposit_destiny').on('change', function () { let depositDestinyId = $(this).val(); localStorage.setItem('selected_deposit_destiny_id', depositDestinyId); });   }); </code>
    • Por babylon
      Olá galera tudo bem?
      Deixa eu perguntar, estava mexendo no meu site e queria adicionar em html essa tabela porem esta dando erro pois fica assim:
       

      Porem gostaria que ficasse assim:

      Segue o código da tabela:
      <center><table border="0">
          <tr>
      <td bgcolor="#0092df" width="24%"><a href="/categorias?ename=smartphones"><span style="font-size: 20px; color: #ffffff;"><b> <font color="#0092df">..</font>Bicicleta<br> <font color="#0092df">..</font>Track Bikes<br> <font color="#0092df">..</font>Aro 29 TKS</b></a></span><br><br><font size="5"><center><span style="background-color: #A1CD44">DE:</span></font> <br><font size="5"><s>R$ 1.999,99</center></font></s> </td><td><p><a href="/categorias?ename=smartphones"><img src="/static/img/itembicicleta.jpg"><br><font size="5"><center><span style="background-color: #A1CD44">COM - 60%:</span></font> <br><font size="5">1.199,99</font></center></a></td>
             <td><font color="#ffffff">....</font></td>
              <td bgcolor="#0092df" width="24%"><a href="/categorias?ename=smartphones"><span style="font-size: 20px; color: #ffffff;"><b> <font color="#0092df">..</font>Monitor 24"<br> <font color="#0092df">..</font>Samsung<font color="#0092df">aa.aa</font><br> <font color="#0092df">..</font>1ms 144hz</b></a></span></center></td><td><p><a href="/categorias?ename=smartphones"><img src="/static/img/itemmonitor.jpg"></a></td>
          </tr>
          </table></center>
      O que estaria errado, pois não sei como colocar nessa tabela outro fundo de outra cor, veja que usei td bgcolor="#0092df" para o azul escuro mas não sei como usaria pro "#e4f1fb" para o fundo ficar de azul claro em baixo bem como não ficou correto em altura o "DE:" com o "COM - 60%:".
      Bom é isso, obg.


    • Por Alessandro Bodão
      Fala galerinha, 
       
      Tenho um container com um título (h1) no cabeçalho do meu site, esse container ocupa metade da tela (50vw), e eu gostaria que esse título ocupasse toda a largura desse container, independente do seu tamanho ou do tamanho do monitor, de forma com que a palavra tenha exactamente o mesmo tamanho do container (vou anexar uma foto de exemplo). Já tentei todos os valores pra essa h1, como % e vw... mas nada parece fazer sentido.
       
       

    • Por viniciusfroner
      Tenho um pequeno sistema de envio, estou utilizando o "PHPMailerAutoload". Após o usuário inserir as informações e clicar em enviar a mensagem é enviada com sucesso, o único problema é que apresentado ao usuário a seguinte mensagem:
      if ($enviado){ echo "E-mail enviado com sucesso!"; } else { echo "Não foi possível enviar o e-mail."; echo "<b>Informações do erro:</b> " . $msg->ErrorInfo; } Acabei procurando e não achei como posso remover a mensagem "Error:"
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.