0

I have created a HTML signature that looks fine when I copy and paste it into the signature creator in Outlook. Then when I click create a new message the signature still looks fine but then the email is sent it creates gaps underneath 2 parts. The gaps happen where the signature goes onto a new line.

This is the code for the part that breaks:

<td style="margin: 0;padding: 0;border: 0;vertical-align: top;font-size: 0px; line-height: 0px;">
    <span style="display:block;max-height:166px;padding: 0; margin: 0;">
      <img style="float:left;padding: 0; margin: 0;" src="#" height="45" alt="">
<!-- Line Break & 1st GAP HERE -->
      <a height="0" href="#" target="_blank"><img src="#" height="43" alt="" style="float: left;padding: 0; margin: 0;"></a>
      <a height="0" href="#" target="_blank"><img src="#" height="43" alt="" style="float: left;padding: 0; margin: 0;"></a>
      <a height="0" href="#" target="_blank"><img src="#" height="43" alt="" style="float: left;padding: 0; margin: 0;"></a>
      <a height="0" href="#" target="_blank"><img src="#" height="43" alt="" style="float: left;padding: 0; margin: 0;"></a>
<!-- Line Break & 2nd GAP HERE -->
      <img src="#" style="float: left;padding: 0; margin: 0;" alt="">
    </span>
  </td>

Full Code:

    <table style="table-layout: fixed;border-spacing: 0px;border-collapse: collapse;margin: 0;padding: 0;
border: 0;vertical-align: top; background: white;border-spacing: 0;" cellspacing="0" cellpadding="0" role="presentation">
  <tbody style="margin: 0;padding: 0;border: 0;">
    <tr style="margin: 0;padding: 0;border: 0;font-size: 0px; line-height: 0px;">
      <td style="margin: 0;padding: 0;border: 0;vertical-align: top;font-size: 0px; line-height: 0px;">
          <a href="https://www.timbertight.com/" target="_blank"><img src="https://puddle.agency/email/timber-tight/Timbertight-1.png" alt="" style="float: left;padding: 0; margin: 0;"></a>
      </td>
      <td style="margin: 0;padding: 0;border: 0;vertical-align: top;font-size: 0px; line-height: 0px;">
        <span style="float:left;padding: 0; margin: 0;">
          <img style="float:left;padding: 0; margin: 0;" src="https://puddle.agency/email/timber-tight/Timbertight-2.png" alt="">
          <br />
          <a href="https://www.linkedin.com/company/timbertight/" target="_blank"><img src="https://puddle.agency/email/timber-tight/Timbertight-3.png" alt="" style="float: left;padding: 0; margin: 0;"></a>
          <a href="https://www.facebook.com/timbertight/" target="_blank"><img src="https://puddle.agency/email/timber-tight/Timbertight-4.png" alt="" style="float: left;padding: 0; margin: 0;"></a>
          <a href="https://twitter.com/TimberTight" target="_blank"><img src="https://puddle.agency/email/timber-tight/Timbertight-5.png" alt="" style="float: left;padding: 0; margin: 0;"></a>
          <a href="https://www.instagram.com/timbertight/" target="_blank"><img src="https://puddle.agency/email/timber-tight/Timbertight-6.png" alt="" style="float: left;padding: 0; margin: 0;"></a><br />
          <img src="https://puddle.agency/email/timber-tight/Timbertight-7.png" alt="">
          </span>
      </td>
    </tr>
  </tbody>
</table>

Thanks

CarbonCoder
  • 15
  • 1
  • 6
  • Just a few points of clarification: 1. Outlook browser app or Outlook Windows app? 2. When it is sent does the gap occur in the sender's app or the receiver's app. 3. If it is the receiver, which app is it? – KIKO Software Jul 21 '23 at 13:13
  • Those are some weird image you include. What happens if you do not use non-existing images? – KIKO Software Jul 21 '23 at 13:16
  • Hi @KIKOSoftware, sorry for not clarifying it's the Mac and Windows App and both sender and receiver get the gaps. – CarbonCoder Jul 21 '23 at 13:16
  • @KIKOSoftware I only used non existing images here, I am using real images in the signature. – CarbonCoder Jul 21 '23 at 13:17
  • That was a bad idea. How can we help you if the HTML code in your question differs from what you really use? I don't like the HTML comments you added either. Email HTML is quite different from normal HTML5 and sometimes even a line break can already cause a gap. – KIKO Software Jul 21 '23 at 13:22
  • To be sure, I do recognize the problem that Outlook changes the layout after an email has been sent. It's rather frustrating. The cause can vary, so I don't know why it happens in your case. – KIKO Software Jul 21 '23 at 13:26
  • Hi @KIKOSoftware I've added the full code for you to view. – CarbonCoder Jul 21 '23 at 13:30
  • I don't have Outlook anymore, I'm using Thunderbird nowadays, so I cannot test your HTML. However, I do notice that you mix two layout styles: A table with cells, and simple line breaks. Your problems seem to occur where you use those line breaks. It could be a line height issue, but I would avoid mixing those styles altogether. Why not only use tables and cells? – KIKO Software Jul 21 '23 at 13:37

0 Answers0