5

I am developing a html email signature for a client and I discovered what appears to be a bug with the way other mail clients render the text color when the text is within a nested table in a signature sent from gmail. Please see my example code below.

Please note that the text will always default to black when inside a nested table.

I have tried setting the text color and background color on all elements and for all elements with no way to override this bug. The only way I could force the text to be yellow was to rewrite my HTML and not use nested tables at all.

<table width="600" border="0" cellspacing="0" cellpadding="0" bgcolor="#0084C9" style="background-color: #0084C9; color: #ffff00;">
  <tbody>
    <tr>
      <td style="color: #ffff00;">Text color is honoured in parent table</td>
    </tr>
    <tr>
      <td style="color: #ffff00;">
        <table width="600" border="0" cellspacing="0" cellpadding="0" bgcolor="#0084C9" style="background-color: #0084C9; color: #ffff00; ">
          <tbody>
            <tr>
              <td style="color: #ffff00;">Text color is not honoured inside a nested table</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>
&nbsp;
<table width="600" border="0" cellspacing="0" cellpadding="0" bgcolor="#0084C9" style="background-color: #0084C9; color: #ffff00;">
  <tbody>
    <tr>
      <td style="color: #ffff00;">Text color is honoured in parent table</td>
    </tr>
    <tr>
      <td style="color: #ffff00;">
        <table width="600" border="0" cellspacing="0" cellpadding="0" bgcolor="#0084C9" style="background-color: #0084C9; color: #ffff00; ">
          <tbody>
            <tr>
              <td style="color: #ffff00;"><span style="color: #ffff00;">Text color is not honoured inside a nested table even inside another element</span></td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>
&nbsp;
<table width="600" border="0" cellspacing="0" cellpadding="0" bgcolor="#0084C9" style="background-color: #0084C9; color: #ffff00;">
  <tbody>
    <tr>
      <td style="color: #ffff00;">Text color is honoured in parent table</td>
    </tr>
    <tr>
      <td style="color: #ffff00;">Text color is honoured when not inside a nested table</td>
    </tr>
  </tbody>
</table>

Screenshots:

a litmus screenshot for a signature sent from gmail to apple mail

nicole2292
  • 111
  • 1
  • 9
  • Please add a screenshot of your issue (if you don't have enough rep, post it here in the comments and I'll add it in). – Sumner Evans Jan 27 '16 at 04:40
  • I have done some further tests and this problem wasn't exclusive to Apple Mail. I thought it was exclusive to Apple mail as it looks fine in Android Gmail App, Gmail, and Yahoo (I had only tested in these and Apple mail previously). However I have now discovered with further testing that the problem is also present in Outlook on desktop, Thunderbird and a few other clients. – nicole2292 Feb 08 '16 at 05:32
  • The source code coming through is clearly not the same as I pasted into the gmail signature area: – nicole2292 Feb 08 '16 at 05:38
  • @nicole2292 than please, paste that one too! :) –  Oct 02 '16 at 03:52
  • You might be able to create an alternative using column and row spans, without nesting tables. A really important point for Gmail signatures though: you *MUST* use a browser that is *not Chrome* to paste the signature into Gmail's settings for it not to be mangled. When pasting in Chrome, the code is altered. Credit: https://stackoverflow.com/questions/7996567/remove-link-formatting-from-google-mail-signature/57916993#57916993 – J Griffiths Jun 11 '20 at 13:08

0 Answers0