CODEWITHSUNDEEP
htmlcssgmailhtml-email
Lux
Lux

Reputation: 129

Formatting HTML for Gmail signature

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>

Upvotes: 1

Views: 3215

Answers (1)

Syfer
Syfer

Reputation: 4479

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)

Upvotes: 1

Related Questions