Why is my html formatting not staying when I put my email signature into gmail?

Question

I am trying to create a custom html email signature (for fun mostly) but I keep running into nonstop issues when it comes to the formatting staying when I copy and paste the html into my gmail signature.

I initially made it with a stylesheet (which I found out was very wrong). Then I switched to inline css but used flexbox (another thing I found out was very wrong). But now I switched to using html tables and now can't find why my inline css formatting isn't copying over completely. Here is what the email signature looks like from the html file

But this is what I get when I send an email with it as my signature

Here is the code. Hopefully someone can point me in the right direction on this. Thanks!

<html style="margin: 0; padding: 0; font-size: 14px; height: 150px; width: 362px;">
    <body style="height: 100%; width: 100%;">
        <table cellspacing=0 cellpadding = 0 style="height: 100%; width: 100%; border-spacing: 0; border-collapse: collapse;">
            <tbody>
                <tr style="height: 100%; width: 100%;">
                    <td style="height: 100%; width: 150px; padding-right: 10px;">
                        <img src="https://i.imgur.com/YHnpwGD.png" alt="ASU Logo" style="width: 100%;">
                    </td>
                    <td style="height: 100%; width: 2px; background-color: #8C1D40;"></td>
                    <td style="height: 100%; width: 210px">
                        <table cellspacing=0 cellpadding=0 style="height: 100%; width: 100%; border-spacing: 0; border-collapse: collapse; table-layout: fixed;">
                            <tbody>
                                <tr style="height: 30px;">
                                    <td style="padding-left: 10px; width: 100%;">
                                        <span style="font-weight: bold;">John Smith</span> | That Guy
                                    </td>
                                </tr>
                                <tr style="height: 90px;">
                                    <td style="width: 100%;">
                                        <ul style="list-style: none; padding-left: 10px; margin: 0; height: 100%; width: 100%;">
                                            <li style="padding-top: 8px;">
                                                <span style="color: #8C1D40;">mobile:</span> (999) 999-9999
                                            </li>
                                            <li style="padding-top: 8px;">
                                                <span style="color: #8C1D40;">email:</span> email@something.com
                                            </li>
                                            <li style="padding-top: 8px;">
                                                <span style="color: #8C1D40;">website: </span> <a href="https://google.com" style="text-decoration: none;">examplesite.com</a>
                                            </li>
                                        </ul>
                                    </td>
                                </tr>
                                <tr style="height: 30px;">
                                    <td>
                                        <a href="#"><img src="https://i.imgur.com/n4IwpVN.png" alt="Facebook" style="height: 25px; padding-left: 10px; display: inline-block;"></a>
                                        <a href="#"><img src="https://i.imgur.com/6bmaWUK.png" alt="Twitter" style="height: 25px; padding-left: 10px; display: inline-block;"></a>
                                        <a href="#"><img src="https://i.imgur.com/sIvnPjO.png" alt="LinkedIn" style="height: 25px; padding-left: 10px; display: inline-block;"></a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

edit: I have made some fixes so that now it looks almost 100% correct in gmail and outlook

However it is still coming across like so in windows Mail

Any ideas? Thanks!

Nicolasvalade · Answer 1 · 2022-11-23T00:01:58.337

1

I believe it is caused by the email systems not fully supporting this styling proprety

list-style: none

You may have better results using just regulars <p> for your contact infos instead of ul / li

Email system are very limited but <p> should work.

Or use <br/> as a last resort.

edited Nov 23 '22 at 00:01

answered Nov 23 '22 at 00:00

Nicolasvalade

11
2

That would probably solve the padding error on the left of the contacts but what do you think about the line being smaller for some reason and the font being very faded? – Tyler Jarvis Nov 23 '22 at 00:32
I believe the lines being smaller is due to default font-size. Set a specific value for `font-size`, maybe 12, 14 ou 16px. The faded part I think is just color, set `color` to `#000000` for your name. – Nicolasvalade Nov 23 '22 at 05:56
I did those changes and it works almost perfect in gmail and outlook but definitely good enough for my purposes (see the edits to the post). But now I have another issue. It won't scale down my images when I try to resize them and doesn't hold even more of my styling when on windows mail – Tyler Jarvis Nov 24 '22 at 00:45

Why is my html formatting not staying when I put my email signature into gmail?

1 Answers1