1

I have an existing Gmail signature that works fine. It was saved and implemented over a year ago. I tried copying/pasting the same signature, but even it breaks. It's almost like Gmail has changed the way they allow HTML signatures.

I wanted to ask if anyone had any tips for me. I tried changing all classes to inline styles but still no luck. To be clear, it breaks to a new line right after the logo image, but only after its sent.

When I'm composing and in the Drafts, the signature is fine. Only after sending does it break to a new line after the logo.

Any tips? Can anyone can offer any guidance into formatting this HTML to work as a Gmail signature?

Here is my code:

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      img { margin: 0; padding: 0; outline: none; border: none; }

      h1, h2, div, a { font-family: Tahoma, Sans-Serif; }

      h1, h2 { margin: 0 0 0 0; font-weight: 500; }

      a, a:hover { color: #000; text-decoration: none; }

      h1 { font-size: 16px; }
      h2 { font-size: 14px; }


      .column { display: inline-block; }
      .column:first-of-type {
        margin-right: 5px;
        padding-right: 5px;
        border-right: 1px solid #343a40;
      }

      img.logo {
        width: 55px;
        height: 55px;
      }




      .contact { margin: 0 0 0 0; font-weight: 500; }
      .contact > a:first-of-type {
        display: inline-block;
        font-size: 14px;
        color: #777;
        margin-right: 25px;
        padding-top: 3px;
      }

      .social-icons { float: right; }
      .social-icons img {
        width: 18px;
        height: 18px;

        margin: 4px 0 0 5px;

        line-height: 0;
      }


    </style>
  </head>
  <body>

    <section class="email-signature-container">

      <div class="column">
        <img class="logo" src="https://i.imgur.com/x8NDcYM.png" alt="SISYN Networking" />
      </div>
      <div class="column">
        <h1>Dan Lindsey</h1>
        <h2>Full Stack Engineer, <a target="_blank" href="http://luxdig.com">LuxDigital</a></h2>
        <div class="contact">
          <a href="tel:336-355-5575">336-355-5575</a>
          <div class="social-icons">
            <a target="_blank" href="https://linkedin.com/in/mdlindsey"><img src="https://i.imgur.com/tkL1tNk.png" alt="LinkedIn" /></a>
            <a target="_blank" href="https://stackoverflow.com/users/9468754/lux"><img src="https://i.imgur.com/0luxbot.png" alt="StackOverflow" /></a>
            <a target="_blank" href="https://github.com/sisyn"><img src="https://i.imgur.com/pBv6GHr.png" alt="GitHub" /></a>
            <!--

            <a target="_blank" href="Skype:336-355-5575"><img src="https://i.imgur.com/83Jil5D.png" alt="Skype" /></a>
            <a target="_blank" href="https://fb.com/dan.sisyn"><img src="https://i.imgur.com/LU362Re.png" alt="Facebook" /></a>
            <a target="_blank" href="#"><img src="twitter.png" alt="Twitter" class="social-icon" /></a>
            <a href="#"><img src="youtube.png" alt="YouTube" class="social-icon" /></a>
            <a href="#"><img src="google.png" alt="Google+" class="social-icon" /></a>

          -->
          </div>
        </div>
      </div>



    </section>



  </body>
</html>
Syfer
  • 4,262
  • 3
  • 20
  • 37
Lux
  • 129
  • 2
  • 12

1 Answers1

1

I see you were missing display block, borders on your images and you are using divs. I have added display block to images and borders. Also i placed a table around the social media icons.

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      img { margin: 0; padding: 0; outline: none; border: none; }

      h1, h2, div, a { font-family: Tahoma, Sans-Serif; }

      h1, h2 { margin: 0 0 0 0; font-weight: 500; }

      a, a:hover { color: #000; text-decoration: none; }

      h1 { font-size: 16px; }
      h2 { font-size: 14px; }


      .column { display: inline-block; }
      .column:first-of-type {
        margin-right: 5px;
        padding-right: 5px;
        border-right: 1px solid #343a40;
      }

      img.logo {
        width: 55px;
        height: 55px;
      }




      .contact { margin: 0 0 0 0; font-weight: 500; }
      .contact > a:first-of-type {
        display: inline-block;
        font-size: 14px;
        color: #777;
        margin-right: 25px;
        padding-top: 3px;
      }

      .social-icons { float: right; }
      .social-icons img {
        width: 18px;
        height: 18px;

        margin: 4px 0 0 5px;

        line-height: 0;
      }


    </style>
  </head>
  <body>

    <section class="email-signature-container">

      <div class="column">
        <img class="logo" src="https://i.imgur.com/x8NDcYM.png" alt="SISYN Networking" style="display: block;border:0px;" />
      </div>
      <div class="column">
        <h1>Dan Lindsey</h1>
        <h2>Full Stack Engineer, <a target="_blank" href="http://luxdig.com">LuxDigital</a></h2>
        <div class="contact">
          <a href="tel:336-355-5575">336-355-5575</a>
          <div class="social-icons">
     <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td><a target="_blank" href="https://linkedin.com/in/mdlindsey"><img src="https://i.imgur.com/tkL1tNk.png" alt="LinkedIn" style="display: block;border:0px;" /></a></td>
      <td><a target="_blank" href="https://stackoverflow.com/users/9468754/lux"><img src="https://i.imgur.com/0luxbot.png" alt="StackOverflow" style="display: block;border:0px;" /></a></td>
      <td><a target="_blank" href="https://github.com/sisyn"><img src="https://i.imgur.com/pBv6GHr.png" alt="GitHub" style="display: block;border:0px;" /></a></td>
    </tr>
  </tbody>
</table>

            
            
            
            <!--

            <a target="_blank" href="Skype:336-355-5575"><img src="https://i.imgur.com/83Jil5D.png" alt="Skype" /></a>
            <a target="_blank" href="https://fb.com/dan.sisyn"><img src="https://i.imgur.com/LU362Re.png" alt="Facebook" /></a>
            <a target="_blank" href="#"><img src="twitter.png" alt="Twitter" class="social-icon" /></a>
            <a href="#"><img src="youtube.png" alt="YouTube" class="social-icon" /></a>
            <a href="#"><img src="google.png" alt="Google+" class="social-icon" /></a>

          -->
          </div>
        </div>
      </div>



    </section>



  </body>
</html>

Let me know if this works for you ( i think it will)

Syfer
  • 4,262
  • 3
  • 20
  • 37
  • This still has the same line break issue. :( Also, for some reason it shows a weird table border when pasting to Gmail. Is there a way to prevent this? – Lux Apr 10 '18 at 23:39
  • Can you add a screenshot to this comment, let me see what it shows as. – Syfer Apr 10 '18 at 23:56
  • [Here is a series of screenshots](https://imgur.com/a/7TxYr) The first is how it appears in [HTMLMail.pro website tool](http://HTMLMail.pro). The second is how it appears in my sent/inbox folder. The third is how it appears after expanding the 3 dots from the 2nd screenshot. Thank you for taking the time to help me, I really appreciate it. – Lux Apr 11 '18 at 12:01
  • 1st Image:The first screenshot is showing the table that is used to put the social media icons together. 2nd Image: It seems you have conversation view turned on? If it please turn it off to see how it looks. Just like we cant do anything with Gmail conversion view the same might be with this (sent/inbox folder). 3rd Image: Check proposed solution for #2 – Syfer Apr 12 '18 at 00:01
  • Also I don't think I will sign up htmlmail.pro as their Gmail connector is not verified by Google. – Syfer Apr 12 '18 at 00:02