Email Signature Generator Issue

[JQuelcutti]

Hello

I am having an issue with how the icons and social images are showing up having used your signature generator. The signature looks fine until I send the email and it comes through like the screenshot below (sent through Outlook 16.69.1). 

I have tried the suggestions here but haven't been able to resolve the problem: https://community.hubspot.com/t5/Account-Settings/Email-Signature-Generator-Issue/m-p/650197

[DvanDyk3]

Hi Could someone from Hubspot please assist me with your Email signature tool? I have the same issue as above

[kvlschaefer]

Hi @DvanDyk3,

Thank you for reaching out! 

I see that @TomM2 helped with your query here: https://community.hubspot.com/t5/Tickets-Conversations/Hubspot-Email-Signature-Generator-problem/td-...  

Email clients such as Outlook do not render HTML emails the same way. To provide some context, Outlook has a history of rendering emails to their own standard of CSS and HTML which causes marketing emails and email signatures to look different. 

I would recommend following Toms's advice on updating the code of your email signature to make it more consistent across email clients. 

Best,

Kristen

[Anton · Accepted solution]

Hi @JQuelcutti, 

seems that the cells of each icon have an background color - which will be visibile in the client. 

I've removed it - could you please check the following code?

<table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 jWJRxL" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Tahoma;">
  <tbody>
    <tr>
      <td><table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 jWJRxL" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Tahoma;">
          <tbody>
            <tr>
              <td style="vertical-align: middle;"><h2 color="#000000" class="name__NameContainer-sc-1m457h3-0 hkyYrA" style="margin: 0px; font-size: 18px; color: rgb(0, 0, 0); font-weight: 600;"><span>Jenny</span><span>&nbsp;</span><span>Quelcutti</span></h2>
                <p color="#000000" font-size="medium" class="job-title__Container-sc-1hmtp73-0 iJcqpv" style="margin: 0px; color: rgb(0, 0, 0); font-size: 14px; line-height: 22px;"><span>Head of Marketing</span></p>
                <p color="#000000" font-size="medium" class="company-details__CompanyContainer-sc-j5pyy8-0 bEBXsp" style="margin: 0px; font-weight: 500; color: rgb(0, 0, 0); font-size: 14px; line-height: 22px;"><span>Bridgewater Resources UK</span></p></td>
              <td width="30"><div style="width: 30px;"></div></td>
              <td color="#96172A" direction="vertical" width="1" height="auto" class="color-divider__Divider-sc-1h38qjv-0 dcKmvZ" style="width: 1px; border-bottom: none; border-left: 1px solid rgb(150, 23, 42);"></td>
              <td width="30"><div style="width: 30px;"></div></td>
              <td style="vertical-align: middle;"><table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 jWJRxL" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Tahoma;">
                  <tbody>
                    <tr height="25" style="vertical-align: middle;">
                      <td width="30" style="vertical-align: middle;"><table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 jWJRxL" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Tahoma;">
                          <tbody>
                            <tr>
                              <td style="vertical-align: bottom;"><span color="#96172A" width="11" class="contact-info__IconWrapper-sc-mmkjr6-1 hBHfIp" style="display: inline-block;"><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/phone-icon-2x.png" color="#96172A" alt="mobilePhone" width="13" class="contact-info__ContactLabelIcon-sc-mmkjr6-0 dGVIJx" style="display: block; background-color: rgb(150, 23, 42);"></span></td>
                            </tr>
                          </tbody>
                        </table></td>
                      <td style="padding: 0px; color: rgb(0, 0, 0);"><a href="tel:0161 804 8437" color="#000000" class="contact-info__ExternalLink-sc-mmkjr6-2 bibcmr" style="text-decoration: none; color: rgb(0, 0, 0); font-size: 12px;"><span>0161 804 8437</span></a></td>
                    </tr>
                    <tr height="25" style="vertical-align: middle;">
                      <td width="30" style="vertical-align: middle;"><table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 jWJRxL" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Tahoma;">
                          <tbody>
                            <tr>
                              <td style="vertical-align: bottom;"><span color="#96172A" width="11" class="contact-info__IconWrapper-sc-mmkjr6-1 hBHfIp" style="display: inline-block; "><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/email-icon-2x.png" color="#96172A" alt="emailAddress" width="13" class="contact-info__ContactLabelIcon-sc-mmkjr6-0 dGVIJx" style="display: block; background-color: rgb(150, 23, 42);"></span></td>
                            </tr>
                          </tbody>
                        </table></td>
                      <td style="padding: 0px;"><a href="mailto:jenny.quelcutti@bridgewateruk.com" color="#000000" class="contact-info__ExternalLink-sc-mmkjr6-2 bibcmr" style="text-decoration: none; color: rgb(0, 0, 0); font-size: 12px;"><span>jenny.quelcutti@bridgewateruk.com</span></a></td>
                    </tr>
                    <tr height="25" style="vertical-align: middle;">
                      <td width="30" style="vertical-align: middle;"><table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 jWJRxL" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Tahoma;">
                          <tbody>
                            <tr>
                              <td style="vertical-align: bottom;"><span color="#96172A" width="11" class="contact-info__IconWrapper-sc-mmkjr6-1 hBHfIp" style="display: inline-block;"><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/link-icon-2x.png" color="#96172A" alt="website" width="13" class="contact-info__ContactLabelIcon-sc-mmkjr6-0 dGVIJx" style="display: block; background-color: rgb(150, 23, 42);"></span></td>
                            </tr>
                          </tbody>
                        </table></td>
                      <td style="padding: 0px;"><a href="//www.bridgewateruk.com" color="#000000" class="contact-info__ExternalLink-sc-mmkjr6-2 bibcmr" style="text-decoration: none; color: rgb(0, 0, 0); font-size: 12px;"><span>www.bridgewateruk.com</span></a></td>
                    </tr>
                    <tr height="25" style="vertical-align: middle;">
                      <td width="30" style="vertical-align: middle;"><table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 jWJRxL" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Tahoma;">
                          <tbody>
                            <tr>
                              <td style="vertical-align: bottom;"><span color="#96172A" width="11" class="contact-info__IconWrapper-sc-mmkjr6-1 hBHfIp" style="display: inline-block; "><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/address-icon-2x.png" color="#96172A" alt="address" width="13" class="contact-info__ContactLabelIcon-sc-mmkjr6-0 dGVIJx" style="display: block; background-color: rgb(150, 23, 42);"></span></td>
                            </tr>
                          </tbody>
                        </table></td>
                      <td style="padding: 0px;"><span color="#000000" class="contact-info__Address-sc-mmkjr6-3 fhjLwd" style="font-size: 12px; color: rgb(0, 0, 0);"><span>Adamson House, Towers Business Park, Manchester, M20 2YY</span></span></td>
                    </tr>
                  </tbody>
                </table></td>
            </tr>
          </tbody>
        </table></td>
    </tr>
    <tr>
      <td><table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 jWJRxL" style="width: 100%; vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Tahoma;">
          <tbody>
            <tr>
              <td height="30"></td>
            </tr>
            <tr>
              <td color="#96172A" direction="horizontal" width="auto" height="1" class="color-divider__Divider-sc-1h38qjv-0 dcKmvZ" style="width: 100%; border-bottom: 1px solid rgb(150, 23, 42); border-left: none; display: block;"></td>
            </tr>
            <tr>
              <td height="30"></td>
            </tr>
          </tbody>
        </table></td>
    </tr>
    <tr>
      <td><table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 jWJRxL" style="width: 100%; vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Tahoma;">
          <tbody>
            <tr>
              <td style="vertical-align: top;"><img src="https://www.dropbox.com/s/72b072i7ld19ufu/BRG%20main%20logo.png?raw=1" role="presentation" width="130" class="image__StyledImage-sc-hupvqm-0 fQKUvi" style="display: inline-block; max-width: 130px;"></td>
              <td style="text-align: right; vertical-align: top;"><table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 jWJRxL" style="display: inline-block; vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Tahoma;">
                  <tbody>
                    <tr style="text-align: right;">
                      <td><a href="https://www.facebook.com/BridgewaterUK" color="#1D4A69" class="social-links__LinkAnchor-sc-py8uhj-2 jhqNFe" style="display: inline-block; padding: 0px;"><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/facebook-icon-2x.png" alt="facebook" color="#1D4A69" height="24" class="social-links__LinkImage-sc-py8uhj-1 kLZBAf" style="background-color: rgb(29, 74, 105); max-width: 135px; display: block;"></a></td>
                      <td width="5"><div></div></td>
                      <td><a href="https://www.linkedin.com/in/jennifer-tait/" color="#1D4A69" class="social-links__LinkAnchor-sc-py8uhj-2 jhqNFe" style="display: inline-block; padding: 0px;"><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/linkedin-icon-2x.png" alt="linkedin" color="#1D4A69" height="24" class="social-links__LinkImage-sc-py8uhj-1 kLZBAf" style="background-color: rgb(29, 74, 105); max-width: 135px; display: block;"></a></td>
                      <td width="5"><div></div></td>
                      <td><a href="https://www.instagram.com/bridgewater_graduates/" color="#1D4A69" class="social-links__LinkAnchor-sc-py8uhj-2 jhqNFe" style="display: inline-block; padding: 0px;"><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/instagram-icon-2x.png" alt="instagram" color="#1D4A69" height="24" class="social-links__LinkImage-sc-py8uhj-1 kLZBAf" style="background-color: rgb(29, 74, 105); max-width: 135px; display: block;"></a></td>
                      <td width="5"><div></div></td>
                    </tr>
                  </tbody>
                </table></td>
            </tr>
          </tbody>
        </table></td>
    </tr>
  </tbody>
</table>

If this shouldn't work I can only recommend to upload the icons to the file manager and replace the links in the code. 

I've created the icons in the right size and color for you - see attachment below

      

best, 

Anton

       

[DvanDyk3]

Hi Anton, I have the same issue with your online email signature generator. Are you abke to assist please?

[JQuelcutti]

<table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 jWJRxL" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Tahoma;"><tbody><tr><td><table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 jWJRxL" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Tahoma;"><tbody><tr><td style="vertical-align: middle;"><h2 color="#000000" class="name__NameContainer-sc-1m457h3-0 hkyYrA" style="margin: 0px; font-size: 18px; color: rgb(0, 0, 0); font-weight: 600;"><span>Jenny</span><span>&nbsp;</span><span>Quelcutti</span></h2><p color="#000000" font-size="medium" class="job-title__Container-sc-1hmtp73-0 iJcqpv" style="margin: 0px; color: rgb(0, 0, 0); font-size: 14px; line-height: 22px;"><span>Head of Marketing</span></p><p color="#000000" font-size="medium" class="company-details__CompanyContainer-sc-j5pyy8-0 bEBXsp" style="margin: 0px; font-weight: 500; color: rgb(0, 0, 0); font-size: 14px; line-height: 22px;"><span>Bridgewater Resources UK</span></p></td><td width="30"><div style="width: 30px;"></div></td><td color="#96172A" direction="vertical" width="1" height="auto" class="color-divider__Divider-sc-1h38qjv-0 dcKmvZ" style="width: 1px; border-bottom: none; border-left: 1px solid rgb(150, 23, 42);"></td><td width="30"><div style="width: 30px;"></div></td><td style="vertical-align: middle;"><table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 jWJRxL" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Tahoma;"><tbody><tr height="25" style="vertical-align: middle;"><td width="30" style="vertical-align: middle;"><table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 jWJRxL" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Tahoma;"><tbody><tr><td style="vertical-align: bottom;"><span color="#96172A" width="11" class="contact-info__IconWrapper-sc-mmkjr6-1 hBHfIp" style="display: inline-block; background-color: rgb(150, 23, 42);"><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/phone-icon-2x.png" color="#96172A" alt="mobilePhone" width="13" class="contact-info__ContactLabelIcon-sc-mmkjr6-0 dGVIJx" style="display: block; background-color: rgb(150, 23, 42);"></span></td></tr></tbody></table></td><td style="padding: 0px; color: rgb(0, 0, 0);"><a href="tel:0161 804 8437" color="#000000" class="contact-info__ExternalLink-sc-mmkjr6-2 bibcmr" style="text-decoration: none; color: rgb(0, 0, 0); font-size: 12px;"><span>0161 804 8437</span></a></td></tr><tr height="25" style="vertical-align: middle;"><td width="30" style="vertical-align: middle;"><table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 jWJRxL" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Tahoma;"><tbody><tr><td style="vertical-align: bottom;"><span color="#96172A" width="11" class="contact-info__IconWrapper-sc-mmkjr6-1 hBHfIp" style="display: inline-block; background-color: rgb(150, 23, 42);"><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/email-icon-2x.png" color="#96172A" alt="emailAddress" width="13" class="contact-info__ContactLabelIcon-sc-mmkjr6-0 dGVIJx" style="display: block; background-color: rgb(150, 23, 42);"></span></td></tr></tbody></table></td><td style="padding: 0px;"><a href="mailto:jenny.quelcutti@bridgewateruk.com" color="#000000" class="contact-info__ExternalLink-sc-mmkjr6-2 bibcmr" style="text-decoration: none; color: rgb(0, 0, 0); font-size: 12px;"><span>jenny.quelcutti@bridgewateruk.com</span></a></td></tr><tr height="25" style="vertical-align: middle;"><td width="30" style="vertical-align: middle;"><table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 jWJRxL" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Tahoma;"><tbody><tr><td style="vertical-align: bottom;"><span color="#96172A" width="11" class="contact-info__IconWrapper-sc-mmkjr6-1 hBHfIp" style="display: inline-block; background-color: rgb(150, 23, 42);"><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/link-icon-2x.png" color="#96172A" alt="website" width="13" class="contact-info__ContactLabelIcon-sc-mmkjr6-0 dGVIJx" style="display: block; background-color: rgb(150, 23, 42);"></span></td></tr></tbody></table></td><td style="padding: 0px;"><a href="//www.bridgewateruk.com" color="#000000" class="contact-info__ExternalLink-sc-mmkjr6-2 bibcmr" style="text-decoration: none; color: rgb(0, 0, 0); font-size: 12px;"><span>www.bridgewateruk.com</span></a></td></tr><tr height="25" style="vertical-align: middle;"><td width="30" style="vertical-align: middle;"><table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 jWJRxL" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Tahoma;"><tbody><tr><td style="vertical-align: bottom;"><span color="#96172A" width="11" class="contact-info__IconWrapper-sc-mmkjr6-1 hBHfIp" style="display: inline-block; background-color: rgb(150, 23, 42);"><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/address-icon-2x.png" color="#96172A" alt="address" width="13" class="contact-info__ContactLabelIcon-sc-mmkjr6-0 dGVIJx" style="display: block; background-color: rgb(150, 23, 42);"></span></td></tr></tbody></table></td><td style="padding: 0px;"><span color="#000000" class="contact-info__Address-sc-mmkjr6-3 fhjLwd" style="font-size: 12px; color: rgb(0, 0, 0);"><span>Adamson House, Towers Business Park, Manchester, M20 2YY</span></span></td></tr></tbody></table></td></tr></tbody></table></td></tr><tr><td><table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 jWJRxL" style="width: 100%; vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Tahoma;"><tbody><tr><td height="30"></td></tr><tr><td color="#96172A" direction="horizontal" width="auto" height="1" class="color-divider__Divider-sc-1h38qjv-0 dcKmvZ" style="width: 100%; border-bottom: 1px solid rgb(150, 23, 42); border-left: none; display: block;"></td></tr><tr><td height="30"></td></tr></tbody></table></td></tr><tr><td><table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 jWJRxL" style="width: 100%; vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Tahoma;"><tbody><tr><td style="vertical-align: top;"><img src="https://www.dropbox.com/s/72b072i7ld19ufu/BRG%20main%20logo.png?raw=1" role="presentation" width="130" class="image__StyledImage-sc-hupvqm-0 fQKUvi" style="display: inline-block; max-width: 130px;"></td><td style="text-align: right; vertical-align: top;"><table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 jWJRxL" style="display: inline-block; vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Tahoma;"><tbody><tr style="text-align: right;"><td><a href="https://www.facebook.com/BridgewaterUK" color="#1D4A69" class="social-links__LinkAnchor-sc-py8uhj-2 jhqNFe" style="display: inline-block; padding: 0px; background-color: rgb(29, 74, 105);"><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/facebook-icon-2x.png" alt="facebook" color="#1D4A69" height="24" class="social-links__LinkImage-sc-py8uhj-1 kLZBAf" style="background-color: rgb(29, 74, 105); max-width: 135px; display: block;"></a></td><td width="5"><div></div></td><td><a href="https://www.linkedin.com/in/jennifer-tait/" color="#1D4A69" class="social-links__LinkAnchor-sc-py8uhj-2 jhqNFe" style="display: inline-block; padding: 0px; background-color: rgb(29, 74, 105);"><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/linkedin-icon-2x.png" alt="linkedin" color="#1D4A69" height="24" class="social-links__LinkImage-sc-py8uhj-1 kLZBAf" style="background-color: rgb(29, 74, 105); max-width: 135px; display: block;"></a></td><td width="5"><div></div></td><td><a href="https://www.instagram.com/bridgewater_graduates/" color="#1D4A69" class="social-links__LinkAnchor-sc-py8uhj-2 jhqNFe" style="display: inline-block; padding: 0px; background-color: rgb(29, 74, 105);"><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/instagram-icon-2x.png" alt="instagram" color="#1D4A69" height="24" class="social-links__LinkImage-sc-py8uhj-1 kLZBAf" style="background-color: rgb(29, 74, 105); max-width: 135px; display: block;"></a></td><td width="5"><div></div></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table>

[kvlschaefer]

Hi @JQuelcutti,

Thank you for the code!

I would like to invite our subject matter experts to this conversation to see if they have any insight.

Hi @Anton, @Teun, @piersg - Do you have any suggestions for @JQuelcutti?

Thank you! 

Best,

Kristen

[kvlschaefer]

Hi @JQuelcutti,

Thank you for reaching out! 

It sounds like this is related to how Outlook is displaying your signature. 

Can you please include the full HTML source code of your signature so we can take a look?  

Thank you!

Best,

Kristen

[JQuelcutti]

Hello,

I have replied to this on multiple occasions with the coding but my response seems to be removed. Please advise on how I can send you the coding.

Thanks

[kvlschaefer]

Hi @JQuelcutti,

Thanks for flagging this issue!

It looks like our automated system accidentally marked your content as spam. The code is here in the thread now 🙂

Best,

Kristen