Gmail signature - text-decoration:none

Asked 22/5, 2017 at 12:42 Answered 5/8, 2021 at 12:24

I realise this has been asked many times before so apologies if I'm repeating myself but having followed many other tips on this I'm getting some weird behaviours in Gmail.

If I open the below code in a browser, copy it and then paste it into a Gmail sig (via Settings) the text respects the text-decoration attribute (I'm using the span and !important as advised by other posts).

I can now create/send emails and the styling is respected.

But if I quit Gmail and then log-in again, the text-decoration:none styling is suddenly ignored. The only way to 'repair' is to copy/paste the sig back in again (via Settings).

I'm wondering if something has changed in Gmail as I've been using this sig for a good year or so and it's only recently that I've noticed this behaviour.

Anybody else experienced this (or can see anything wrong with my code)?

<body>
  <table width="98%" border="0" cellspacing="0" cellpadding="0" style="font-family:'Lucida Grande','Lucida Sans','Lucida Sans 
        Unicode';font-size:12px;margin:0px">
    <tr>
      <td>
        <a href="http://maps.google.com?q=Mainframe North" target="_blank" style="text-decoration:none !important;color:rgb(180,180,180);">
          <span style="text-decoration:none !important;color:rgb(180,180,180);">
            82 Silk Street<br>Manchester M4 6BJ
        </span>
        </a>
      </td>
    </tr>
  </table>
</body>

Updated code as per comments below:

<table width="98%" border="0" cellspacing="0" cellpadding="0" style="font-family:'Arial';font-size:12px;margin:0px;color:#B4B4B4">
  <tr>
    <td>
    <a href="http://maps.google.com?q=Mainframe North" target="_blank" style="text-decoration:none">
        <span style="text-decoration:none;color:#B4B4B4">
        82 Silk Street<br>Manchester M4 6BJ
        </span>
    </a>
    </td>
  </tr>
</table>

Matlock answered 22/5, 2017 at 12:42 Comment(6)

Have you tried it without !@important? Gmail doesn't like it at times. – Malkin 23/5, 2017 at 4:34

Thanks, I have. Same issue. Copy paste the html in via Gmail Settings and everything is fine (i.e. no underline). But if I then close down my Gmail Chrome tab, open a new one and go back to Gmail the underlining comes back. – Matlock 23/5, 2017 at 16:11

Try the colours in hex and change the font to Arial to see if both sticks. Try one at a time. If this doesn't work I will try and recode. – Malkin 23/5, 2017 at 21:9

Also drop the body code, you signature should be tables only. – Malkin 23/5, 2017 at 21:10

Still no joy I'm afraid. I've tried your suggestions. I've also tried moving the color into the table style and removing it from the divs. Here's my current code. If it gives any clues the underlining with this code is now blue when I log in/out of gmail. – Matlock 24/5, 2017 at 10:11

So, this makes no sense to me but doing exactly the same steps in Safari (rather than Chrome) seems to have resolved the issue. Same code, different browser. Thanks for your time @Malkin – Matlock 30/5, 2017 at 9:44

The issue is a bug with Google's fork of Webkit Layout Engine, Blink. When just viewing the Gmail Settings page in Chrome, the "text-decoration:none" style tag is completely removed from your signature permanently.

I found a hack to fix this issue though:

Either paste your HTML signature into Gmail Settings using any other browser,
or do the following:
- Right-click the underscored element in your signature and inspect
- In the inspection window, add the "text-decoration:none" back into your style attribute
- Introduce a text change in the signature like a space so that the "Save Changes" button activates.
- Save your changes.

Voila, no more underscores ever (or at least until you change your signature once again).

Caithness answered 11/8, 2017 at 20:27 Comment(3)

I see that this answer came after you answered yourself. This one is more complete, though, and doesn't require you to leave whatever browser you find yourself using. – Dysplasia 13/7, 2018 at 4:21

This is the only true solution that worked for me – Ruffner 3/6, 2021 at 10:24

This is not a real solution, it's a hack. See below tor the real solution, use: text-decoration: unset; – Antarctic 5/12, 2022 at 15:16

Use text-decoration: unset;

This issue still exists in Gmail and since most browsers are now Chromium-based, using "another browser" generally presents the exact same issue.

Adding text-decoration: none; via Inspect Element and making a minor change to enable "Save Changes" still works.

Alternatively, use text-decoration: unset; instead and paste the signature into Gmail. Gmail doesn't remove text-decoration: unset; and the signature loads without links underlined.

Territoriality answered 5/8, 2021 at 12:24 Comment(4)

this should be the right answer! thanks mate! – Impossibly 8/3, 2022 at 22:18

text-decoration: unset works perfectly. Thanks! – Eldwun 20/7, 2022 at 9:2

Using text-decoration: unset instead of text-decoration: none; fixed the issue. Note: you should use it instead of text-decoration-line: none; too – Antarctic 5/12, 2022 at 15:13

This works but you should know that Outlook (native client) does not interpret text-decoration: unset correctly and your links will display an underline. – Mm 5/2 at 8:18

It seems adding and saving my signature in Gmail via Safari (rather than Chrome) fixed my issue.

Matlock answered 30/5, 2017 at 9:45 Comment(0)

Recommended topics

Hot tags