Gmail override font color

Question

My code :

<tr>
     <td align="center" style="font-size:9pt; font-weight : bold;font-family:Arial; color:black;">
           SELLE ZETA CONFORT GEL
     </td>
</tr>

When i try on different mail client, the text is black, but on gmail (explorer,chrome and firefox) this text is blue. How can i fix this?

If you want to look an exemple: http://issl.fr/test/test_validator.html Take all the code html and copy it there : https://litmus.com/email-testing You will be able to have a preview on every client. Look the gmail one.

Answer 1

With gmail you need to be redundant on your colors.

Not only would you have to declare a color with in the but you should also wrap it in a span with the color as well.

This is one of your items below with the correct code:

<Track Link>
<a style="text-decoration : none; color:#000000;" href="http://www.decathlon.be/selle-zeta-confort-gel-id_8052361.html">
    <table height="100%" width="100%" cellspacing="0" cellpadding="0" border="0"> <tbody>
        <tr><td>
            <table height="100%" width="100%" cellspacing="0" cellpadding="0" border="0"> <tbody>
                <tr height="3"></tr><tr style="height : 32px !important; min-height : 32px !important; max-height : 32px !important; ">
                    <td width="6"></td>
                    <td align="left">
                        <div style="height :32px !important; min-height : 32px !important; max-height : 32px !important; "></div>
                    </td>
                    <td width="58"></td>
                    <td align="right">
                        <div style="height :32px !important; min-height : 32px !important; max-height : 32px !important; "><img border="0" style="display:block;" width="64" height="32" alt=" " src="http://decathlonbe.net/images/Marques/geonaute.png"></div>
                    </td>
                    <td width="6"></td>
                </tr><tr height="1"></tr>
            </tbody></table>
        </td></tr>
        <tr><td>
            <table height="100%" width="100%" cellspacing="0" cellpadding="0" border="0"><tbody>
                <tr>
                    <td align="center">
                        <table height="100%" width="100%" cellspacing="0" cellpadding="0" border="0">
                            <tr>
                                <td width="5"></td>
                                <td><img width="188" border="0" alt="" src="http://www.decathlon.be/media/805/8052361/classic_400PX_asset_71685950.jpg" style="display : block;"></td>
                                <td width="5"></td>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td align="center" style="font-size:9pt; font-weight : bold;font-family:Arial; color:black;"><span style="color:#000000;">SELLE ZETA CONFORT GEL</span></td>
                </tr>
                <tr>
                    <td align="center" style="font-size:9pt; font-family:Arial; color:#6f6f6f;"></td>
                </tr>
            </tbody></table>
        </td></tr><tr><td>
            <div class="price" style="font-family : Arial; font-size : 22pt; color : black; text-align : center;"><div class="nopromo" style="font-weight:bold;font-family : Arial; font-size : 19pt; color : black; text-align : center;">29<sup style="font-size:12pt;">&#128;95</sup></div></div>
        </td></tr><tr><td>
            <table height="100%" width="100%" cellspacing="0" cellpadding="0" border="0"><tbody>
                <tr>
                    <td width="15"></td>
                    <td valign="middle" align="center">
                        <Track Link><a style="text-decoration : none; font-family : Arial; font-weight : bold; font-size : 11pt; color : white;" href="http://www.decathlon.be/selle-zeta-confort-gel-id_8052361.html"><table align="center" cellspacing="0" cellpadding="0" border="0" style="background : #efefef;" >
                                <tr height="32" style="background-color : #FF7100;">
                                    <td width="5" ><span style="color: #FF7100;">i<span></td>
                                    <td style = "max-width: 144px;"> <div style="color : white;text-align:center; font-size : 10pt;font-family:Arial;font-weight: bold; ">sefsefse </div></td>
                                    <td style="padding-left : 5px;">
                                        <span style="color : white; font-weight : bold; font-size : 12pt;">  > </span>
                                    </td>
                                    <td width="5"><span style="color: #FF7100;">i</span></td>
                                </tr>
                            </table>
                        </a></Track Link>
                    </td>
                    <td width="15"></td>
                </tr>
                <tr height="8"></tr>
            </tbody></table>    
        </td></tr>
    </tbody></table>
</a>

Answer 2

Darryl Vos's Answer is correct.

I style links with color:#00001 to achieve a black link in emails all the time.

I work in an agency and no one has ever complained it does not look black.

Answer 3

Because your text is sitting in an <a> tag (your <a> is wrapping the table with your text in it). That's why your text is turning to blue. Apply a color to your <a> and that should solve it... John is right to use a proper hex code for the color.

As well, Gmail likes to change color:#000000 on links to default blue even if you state that it should be color:#000000. Use color:#000001. That will solve it.

Answer 4

In email you must use the 6-digit hex codes for maximum compatibility across email clients. Use CSS for text ie: color:#000000;, and html's bgcolor="#FFFFFF" for backgrounds