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
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.
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.
Problem
The image is displayed in a different size than what you have specified in the HTML code.
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.
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.
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.
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.
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):
This is the email signature when it arrives in Outlook 2016:
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 (") around the first font that is specified in the font-family style attribute.
font-family:"Arial",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 ( ) in front of the element that is getting changed in Outlook.
<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.
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”.
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.
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.
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.
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.
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.
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.
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.
Problem
Thunderbird is showing red borders inside and around the email signature when you compose a new email.
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.
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>.
Solution
Go to Settings > Mail > Include Attachments with Replies > Always. Once changing this setting, all attachments will be included in your replies.
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.
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.
Problem
When viewing received emails in Outlook for Mac, you’re seeing blue question mark boxes popping up in place of images.
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.
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.
Solution
To remove the 2 dashes above your Gmail email signature:
- Go into the Gmail settings and scroll down to the email signature section.
- Tick the checkbox that says “Insert signature before the quoted text in replies, and remove the ‘–‘ line that precedes it.”
- 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.
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.
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.
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;
