Email Signature Troubleshooting

email-signature-troubleshooting

There are many known problems with HTML email signatures ranging across a variety of email clients. The good news is that many of the problems can be fixed by implementing the solutions in this email signature troubleshooting guide. The bad news is that not all of them can be fixed.

Solving email signature problems can often be difficult and very time-consuming, which is why we recommend using an email signature generator – it’s just easier!

Email Signature Problems and Solutions

Problem

There is a visible gap below images, even if your HTML code doesn’t have a gap below the image.

This can happen in most email clients, but it is most noticeable in Outlook and Gmail.

email signature gap below images

Solution

Add a line-height style attribute to the containing <td> element.

<td style="line-height:0px; {add other inline styles here as needed}">

This would not work if there is text within the same <td> element. However, text should not be there in the first place since it should be in its own <td> element, separate from the image.

You will also need to add a <p> element directly inside the <td> element, but outside the <img> element. The <p> element should have a margin style attribute, with a small margin such as 0.05px.

<td style="border-collapse: collapse; line-height: 0px; padding-right: 1px;">
  <p style="margin: 0.05px;">
    <img height="120" width="120" alt="image" border="0" src="{image URL source}">
  </p>
</td>

The added <p> element (with a small margin) reduces the gap between images/text when you’re viewing your email signature in the Gmail App (iOS/Android).

Problem

When composing an email, the image in your email signature looks much larger than it should be. The image may look bigger in your email client than it looks in your web browser.

email signature images changing size

Solution

Check/Change the DPI setting of the image you’re using in your email signature. If the DPI setting on your image is not correct, you’ll end up with an enlarged image when you compose a new email. This is because Microsoft Outlook and Apple Mail scale images using the DPI values.

  • If you’re using older versions of Microsoft Outlook (2016 and earlier), the image should be 96 DPI.
  • For all other email clients, the image should be 72 DPI.

To fix this, you will need to use an image processing tool such as Photoshop to change the DPI setting on the image.

Click here for more information

Problem

The image is displayed in a different size than what you have specified in the HTML code.

Email Signature Images Not Correct Size HTML

Solution

You will need to ensure that you have set the height and width attributes in the <img> element.

<img height="120" width="120" alt="image" border="0" src="{image URL source}">

Also, ensure that the image height and width attributes on the <img> element are without units such as px.

Good:

<img height="120" width="120">

Bad:

<img height="120px" width="120px">

In order for your images to be mobile-optimized, be sure that the height and width attributes are 1/3 of the actual dimensions of the image in pixels. So if your image is 360 pixels tall, the <img> element should have a height attribute equal to just “120” without any units. This allows for scaling when displayed on mobile devices.

Problem

The images in your email signature are blurry, especially when viewed on a mobile device such as an iPhone or Android, or a newer laptop or desktop device with display scaling enabled.

email-signature-blurry-images

Solution

If the images in your email signature don’t look as clear as they should, there are a few things that need to be considered.

  • Ensure your image resolution is 3x higher than what your HTML <img> height and width attributes are set to. So, if your <img> height and width are set to “120”, your image resolution should be 360 x 360 pixels. This is so it will still look crisp and clear when scaled up on mobile devices.
  • Your image resolution should be set to 72 DPI. If using older versions of Outlook (2016 and earlier), your image resolution should be set to 96 DPI.

Click here for more information

Problem

Sometimes your email signature will show up in plain text and not be displayed like it was when you first created it.

This happens due to the email in question being composed, or converted to plain text / rich text format.

When this happens, Outlook will automatically convert any images that were in the email signature, into attachments.

Email Signature Troubleshooting

Solution

Make sure your email client is set to compose new emails in HTML format and if needed, change the email formatting on each incoming email that has been formatted in plain text / rich text format.

Also, check that your mail server is not automatically converting your outgoing/incoming emails to plain text.

Click here for more information

Problem

This is an issue that has been plaguing Outlook for quite some time, and it can be a very difficult problem to fix unless you know where to look. The versions of Outlook it affects is 2007, 2010, 2013 and 2016. This also depends on the platform you are sending the email from.

For example, if you send from Outlook for Mac to Outlook 2016 in Windows, the problem likely wont appear. However, if you send from Office 365 to Outlook 2016, you will notice the problem come up.

So it’s easier to understand what the problem actually is, we will first illustrate with some pictures on the right.

Notice the difference in fonts between the originally sent email signature and the one that was received in Outlook 2016? The original email signature was sent using Arial font and Outlook converted it to Times New Roman.

Original email signature in Office 365 (this is the way the signature is supposed to look like):

email-signature-font-changing-problem1

This is the email signature when it arrives in Outlook 2016:

email-signature-font-changing-problem2

Solution

Thankfully, there are a few known working fixes for this issue, but you may need to try a couple of different fixes in order to figure out which one works for you.

  • Add double quotation marks (&quot;) around the first font that is specified in the font-family style attribute.
    font-family:&quot;Arial&quot;,Helvetica,sans-serif;

    Be careful not to add actual double quotation marks (“) as this will confuse your email client into thinking that the double quotation mark is indicating an end to the style attribute. This will break the rest of your email signature.

  • Put a non-breaking space (&nbsp;) in front of the element that is getting changed in Outlook.
    &nbsp;<span style="font-family:Arial,Helvetica,sans-serif;">Bob Smith</span>
  • Ensure that sans-serif is not the last font in the font-family or any other font property. Have another font as the last one, otherwise, Outlook may convert it to Times New Roman.
    font-family:Arial,Helvetica,Tahoma;

Problem

When sending an email from Outlook to Gmail, and viewing it in the Gmail App (iOS/Android), the email signature appears to have very large vertical spacing between the signature elements.

Solution

When sending emails from Outlook, it automatically adds a <p> element to the inside of every <td> element. When that email is viewed in the Gmail App, it simply renders the <p> element as a paragraph and applies its own style to it, which has a margin of around 14px.

To fix this issue, you will need to preemptively add a <p> element directly inside every <td> element, but outside the <img>, <span>, or <a> element.

The <p> element should have a margin style attribute, with a small margin such as 0.05px. Since we are specifying the margin in the <p> element, the Gmail App will use our defined margin instead of their large (14px) margin which causes the spacing issue.

<td style="border-collapse: collapse; line-height: 0px; padding-right: 1px;">
  <p style="margin: 0.05px;">
    <img height="120" width="120" alt="image" border="0" src="{image URL source}">
  </p>
</td>

The added <p> element (with a small margin) reduces the gap between images/text when you’re viewing your email signature in the Gmail App (iOS/Android).

Problem

Outlook has a security feature that is enabled by default which prevents images from being automatically downloaded on all incoming emails. The purpose of this feature is to stop hackers from being able to validate your email address by checking if you have downloaded an image.

outlook-click-here-to-download-pictures

Solution

Set your Trust Center settings in Outlook to allow the automatic download of images in email messages.

Windows:

Go to File > Options > Trust Center > Trust Center Settings > Automatic Download and then uncheck “Don’t download pictures automatically in HTML e-mail messages or RSS items”.

Mac:

Go to Outlook > Preferences > Reading > under the Security heading > Automatically download pictures from the Internet > select “In all messages”.

Click here for more information

Problem

Gmail will display an error message saying “Sorry, the signature for <your email address> is too long. Please try a shorter signature.” if your email signature has more than around 10,000 characters in the HTML code.

Gmail Email Signature Too Long

Solution

Ensure your email signature has less than 10,000 characters and you’re using Google Chrome when updating the signature in Gmail. If your email signature has more than 10,000 characters, you will need to lower the character count for it to work with Gmail.

Click here for more information

Problem

When trying to add an email signature to Office 365 OWA (Outlook Web Access) you may notice the Signature section is missing, grayed out, or you may see a message like “The option you chose isn’t available”. This happens because the email signatures feature is disabled in your OWA policy.

Office365 OWA Email Signature Not Available

Solution

There is an easy way to fix this if you have administrative rights to your Office 365. Edit the OWA Mailbox Policy permissions and allow email signatures as a feature.

Click here for more information

Problem

When creating an email signature in Gimmio (or any other email signature generator), you may get formatting problems when pasting your email signature into your email client. The most common reason for this happening is that your browser isn’t copying all of the HTML tables in the email signature.

For example, if you are using Gimmio with the Safari browser and you attempt to copy the email signature, Safari will not copy all of the HTML tables correctly, and the formatting of the email signature will be broken when you paste it into your email client.

Email Signature Broken Formatting

Solution

Use Google Chrome when copying your email signature, this will ensure that all HTML tables are copied correctly.

Problem

When installing your email signature in Apple Mail, the formatting of the email signature is broken and the images are not shown in the signature preview window. The email signature looks to be just plain text with no styling.

apple-mail-email-signature-always-match-default-message-font

Solution

When installing your email signature, ensure you untick the box at the bottom of the signature preview window which says “Always match my default message font” as this will turn your email signature into plain text format.

Click here for more information

Problem

Thunderbird is showing red borders inside and around the email signature when you compose a new email.

Thunderbird Red Borders Around Email Signature

Solution

This cannot be turned off or changed as it’s normal Thunderbird functionality. Those borders will not be visible to your recipients, and your email signature will look normal to them.

Problem

Email clients such as Outlook, Apple Mail, Gmail, and many more will automatically adjust hyperlinks in email signatures to be blue and/or be underlined for security purposes.

Additionally, many email applications will automatically detect addresses in email signatures and hyperlink them to Bing Maps, Apple Maps, or Google Maps and also convert them to blue text.

links-underlines-in-outlook-email-signature

Solution

You can add a text-decoration style attribute to the <a> element. This tells the email client not to underline the element. However, most email clients simply ignore this and still underline and change the color of hyperlinks.

Unfortunately, there isn’t too much you can do about this, as this is standard behavior for most email clients.

Problem

When replying to emails using the Mail App on your iPhone or iPad, you might notice that the images in the reply are being removed. The images are replaced with the file name instead, eg. <filename.png>.

images-removed-from-reply-on-iphone

Solution

Go to Settings > Mail > Include Attachments with Replies > Always. Once changing this setting, all attachments will be included in your replies.

Click here for more information

Problem

When sending emails from Outlook, the recipient gets a Winmail.dat attachment. This can be annoying and unwanted by many users.

The winmail.dat file contains all the instructions about text formatting within the email that other email clients can use to determine how to format the email.

Winmail.dat Attachment In Outlook

Solution

Change the settings in Outlook to compose new emails in HTML format. Also, set outgoing Rich Text format emails to automatically convert to HTML format.

Click here for more information

Problem

When viewing received emails in Outlook for Mac, you’re seeing blue question mark boxes popping up in place of images.

Blue Question Mark Boxes Images Outlook for Mac

Solution

To fix the blue question mark boxes in Outlook for Mac, you need to allow the automatic download of remote images. When you do this, the actual images will load, instead of the blue question mark boxes.

By default, Outlook doesn’t automatically download remote images, and there’s a really good reason for this.

If you were a spammer that is monitoring the web server where your images are hosted, you could easily find out if an email address is a valid one just by checking to see if the image was downloaded when you sent the spam email.

This is why Outlook has this feature disabled by default. However, if you’re savvy and don’t open emails from random unknown senders, then there’s no need to worry and it’s likely safe to allow remote images to download automatically.

Click here for more information

Problem

When you install your Gmail email signature and compose a new email, you may notice there are 2 dashes above your email signature.

These 2 dashes are automatically added by Gmail in order to separate the email body content from the signature section.

Gmail 2 Dashes Above Email Signature

Solution

To remove the 2 dashes above your Gmail email signature:

  1. Go into the Gmail settings and scroll down to the email signature section.
  2. Tick the checkbox that says “Insert signature before the quoted text in replies, and remove the ‘–‘ line that precedes it.”
  3. Click Save Changes.

Problem

When viewing your email signature in Outlook, the spacing between elements appears to be slightly bigger when compared to viewing it in a web browser.

For example, if you’re copying an email signature from Google Chrome, the spacing may look different when it’s pasted into Outlook.

outlook-signature-line-spacing-problem

Solution

Outlook interprets line breaks in HTML signatures as paragraph breaks, making the lines space out more than intended.

Unfortunately, there are no real solutions to this. The problem is related to the way that Outlook renders HTML.

A known workaround is to minimize the padding/margin between each element to compensate for the spacing out.

Problem

When viewing your email signature on the Gmail app (iOS), some of the longer email signature text is wrapped to the next line.

email-signature-word-wrapping-gmail-app-ios

Solution

Reduce the overall width of your email signature to under 400 pixels.

An email signature with a width higher than around 400 pixels tends to text wrap when viewed on the Gmail app for iOS (and many other mobile email apps).

This is because mobile phone screens are narrow and their viewport is much smaller than a PC.

Optimizing your email signature for dark mode is an extremely important factor when designing your signature.

Problem

When composing a new email in Outlook, the images/icons in your email signature appear to have about 1 pixel cut off at the end.

Sometimes the right-hand side is cut off, other times it’s the top of the image.

images-and-icons-partially-cut-when-composing-in-outlook

Solution

This is a visual glitch that only occurs when composing a new email in Outlook. Once the email (together with the signature) has been sent, the images and icons will display correctly (not cut off) to the recipient.

However, if you want to fix the issue anyway, you will need to add a padding-right or padding-top style attribute (depending on where the image is being cut off) to the parent <td> element. The amount of padding you put in can be anything small such as 1px.

<td style="padding-right: 1px;">
  <img height="24" width="24" alt="image" border="0" src="{image URL source}">
</td>

If your image is cut off on the right:

padding-right: 1px;

If your image is cut off on the top:

padding-top: 1px;