Hi there,
I’m trying to alter a e-mail signature code to fit my needs. When I send and review my signature in Apple Mail it shows up perfectly. However, when the e-mail is being opened in Gmail, it is totally off. The text is not on the background picture anymore. I’ve selected the text to show what happens.
The code I am using is:
<div><table><tbody><tr><td><table class="html wisestamp_app main_sig new_10" style="width: 260px;padding-bottom:10px;margin-bottom:8px" border="0" cellpadding="0" cellspacing="0"> <tbody><tr> <td style="padding-top: 0px; padding-bottom: 15px; padding-left: 10px; padding-right: 10px; text-align:center"> <table border="0" cellpadding="0" cellspacing="0" style="width: 100%" width="100"> <tbody><tr> <td valign="top" style="padding-bottom: 8px; vertical-align: top;width:10px;text-align: center" width="10"> </td> </tr><tr> <td style="color: #FFFFFF;text-align: center">
<img src="https://cdn.shopify.com/s/files/1/0273/8608/5445/files/shd_signature_background.png" alt="photo" width="272.25"><p style="text-transform: uppercase; font-size:19px;font-family: Courier New;margin:0; margin-top: -70px;">Twan Peeters</p>
<span style="font-family: Courier New;font-size:13px;">Brand Developer</span> <br> <span style="font-family: Courier New;font-size:13px;"><b>Side Hustle Designs</b></span> </td> </tr> </tbody></table> </td> </tr>
<tr> <td valign="top" style="vertical-align: top;text-align: center;padding: 10px;"><table border="0" cellpadding="0" cellspacing="0" width="100%" style="width: 100%"> <tbody><tr> <td style="text-align: center;padding-bottom: 2px"> <a href="tel:+1 (417) 263 0690" style="text-decoration: none; font-family: Courier New; color: #333333; font-size:13px;"> +44 (0)7552 -XXX- </a> </td> </tr> <tr> <td style="text-align: center;padding-bottom: 2px"> <a href="mailto:twan@sidehustledesigns.net" style="text-decoration: none; font-family: Courier New; color: #333333; font-size:13px;"> email@sidehustledesigns.net </a> </td> </tr> <tr> <td style="text-align: center;padding-bottom: 2px"> <a href="http://www.sidehustledesigns.net" target="_black" style="text-decoration: none; font-family: Courier New; color: #333333;; font-size:13px;"> www.sidehustledesigns.net </a> </td> </tr> <tr> <td style="padding-top: 1px;text-align:center;font-size:13px; font-family: Courier New;color:#333333;padding-bottom:3px"> Portland, OR | London, UK </td> </tr> <tr> <td style="padding-top: 10px; text-align: center" id="center-social-icons" class="center-social-icons"> <table border="0" cellpadding="0" cellspacing="0" style="text-align: center" align="center"> <tbody><tr> <td> <table border="0" cellpadding="0" cellspacing="0"><tbody><tr style="padding-top: 10px;"><td align="left" style="padding-right: 5px;text-align: center; padding-top: 0;"> <a href="http://instagram.com/side_hustle_designs" target="_blank"><img width="24" src="https://cdn.shopify.com/s/files/1/0273/8608/5445/files/instagram_social-turqoise.png" alt="Social icon"></a></td></tr></tbody></table> </td> </tr> </tbody></table> </td> </tr> </tbody></table> </td> </tr> </tbody></table> <table cellpadding="0" cellspacing="0" border="0"><tbody><tr><td></td></tr></tbody></table></td></tr></tbody></table></div>
It seems like Gmail is not recognizing my ‘margin-top 70px;’ as I implemented it in this section: <img src="https://cdn.shopify.com/s/files/1/0273/8608/5445/files/shd_signature_background.png" alt="photo" width="272.25"><p style="text-transform: uppercase; font-size:19px;font-family: Courier New;margin:0; margin-top: -70px;">Twan Peeters</p>
What could I be doing wrong? After some research on Google I also tried including style="position: relative;" to the <img> tag and position: absolute; to the <p> section that contains the upper part of the text, but that hasn’t brought me any succes.
I have some basic experience in altering HTML and CSS to get the result I need, but I cannot seem to resolve the problem for this piece of code. I was wondering if anyone would be able to help? What is wrong with the code which causes it to show incorrectly in Gmail?
Thank you so much in advance,
Twan