I have an HTML email signature. I have added this signature to my Gmail account by using Gmail settings in a desktop web browser. When I send an email with this signature and view that email in a web browser(Chrome) the signature displays perfectly. When I open the same email in the Gmail App on iPhone or using Chrome on iPhone or using Safari on iPhone the signature is not correct. The signature is a table with two columns(cells/td elements). The left column contains an image and the right column contains the contact data. When viewed in the mobile app/mobile web browser, the right cell is positioned further left so that it obscures/overlaps the left column (the picture).
Here are screenshots showing the signature as viewed in a desktop web browser and the signature viewed in the Gmail app on iPhone:
| On a web browser: | iPhone Gmail app: |
|---|---|
Here is the HTML:
<div>
<table
width="100%"
cellpadding="0"
cellspacing="0"
border="0"
style="
background: repeat;
border-spacing: 0px;
border-collapse: collapse;
margin: 0px;
font-family: Cerebri-sans, Helvetica, Arial, sans-serif;
font-size: 14px;
width: 640px;
border: 0px;
padding: 0px;
color: rgb(51, 51, 51);
"
>
<tbody style="font-family: Cerebri-sans, Helvetica, Arial, sans-serif">
<tr style="font-family: Cerebri-sans, Helvetica, Arial, sans-serif">
<td
valign="middle"
width="50"
style="
padding: 0px 9px 0px 1px;
border-width: medium 3px medium medium;
border-style: none solid none none;
font-family: Cerebri-sans, Helvetica, Arial, sans-serif;
border-color: rgb(0, 9, 255);
"
>
<img
width="50"
height="50"
alt="upload image"
src="https://picsum.photos/180"
style="border: 0px; vertical-align: middle; max-width: 50px; min-width: 90px; height: auto; width: 50px; border-radius: 10px; font-family: Cerebri-sans, Helvetica, Arial, sans-serif"
class="CToWUd"
data-bit="iit"
/>
</td>
<td cellpadding="0" cellspacing="0" border="0" valign="middle" style="margin: 0.1px; padding: 0px 0px 0px 7px; font-family: Cerebri-sans, Helvetica, Arial, sans-serif">
<table style="border-spacing: 0px; border-collapse: collapse; font-family: Cerebri-sans, Helvetica, Arial, sans-serif; background-color: transparent">
<tbody style="font-family: Cerebri-sans, Helvetica, Arial, sans-serif">
<tr style="font-family: Cerebri-sans, Helvetica, Arial, sans-serif">
<td colspan="2" style="margin: 0.1px; padding: 0px; line-height: 1.6em; font-family: Cerebri-sans, Helvetica, Arial, sans-serif">
<span style="font-family: Arial, sans-serif; font-size: 18px; color: rgb(0, 9, 255)">Test</span> <span
style="font-family: Arial, sans-serif; font-size: 18px; color: rgb(0, 9, 255)"
>Name</span
>
</td>
</tr>
<tr style="font-family: Cerebri-sans, Helvetica, Arial, sans-serif">
<td colspan="2" style="margin: 0.1px; padding: 0px; line-height: 1.6em; font-family: Cerebri-sans, Helvetica, Arial, sans-serif">
<span style="display: inline-block; font-family: Arial, sans-serif; font-weight: bold">My Company</span>
</td>
</tr>
<tr style="font-family: Cerebri-sans, Helvetica, Arial, sans-serif">
<td colspan="2" style="margin: 0.1px; padding: 0px; font-family: Cerebri-sans, Helvetica, Arial, sans-serif">
<table
cellspacing="0"
cellpadding="0"
border="0"
style="border-spacing: 0px; border-collapse: collapse; font-family: Cerebri-sans, Helvetica, Arial, sans-serif; background-color: transparent"
>
<tbody style="font-family: Cerebri-sans, Helvetica, Arial, sans-serif">
<tr style="font-family: Cerebri-sans, Helvetica, Arial, sans-serif">
<td style="margin: 0.1px; padding: 0px 10px 0px 0px; line-height: 1.6em; font-family: Cerebri-sans, Helvetica, Arial, sans-serif">
<span style="font-family: Arial, sans-serif; color: rgb(0, 9, 255)">P: </span><span style="font-family: Arial, sans-serif">(866) 555-5555</span>
</td>
<td style="margin: 0.1px; padding: 0px 10px 0px 0px; line-height: 1.6em; font-family: Cerebri-sans, Helvetica, Arial, sans-serif">
<span style="font-family: Arial, sans-serif; color: rgb(0, 9, 255)">M: </span><span style="font-family: Arial, sans-serif">(866) 555-555</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="font-family: Cerebri-sans, Helvetica, Arial, sans-serif">
<td colspan="2" style="margin: 0.1px; padding: 0px; font-family: Cerebri-sans, Helvetica, Arial, sans-serif">
<table
cellspacing="0"
cellpadding="0"
border="0"
style="border-spacing: 0px; border-collapse: collapse; font-family: Cerebri-sans, Helvetica, Arial, sans-serif; background-color: transparent"
>
<tbody style="font-family: Cerebri-sans, Helvetica, Arial, sans-serif">
<tr style="font-family: Cerebri-sans, Helvetica, Arial, sans-serif">
<td style="margin: 0.1px; padding: 0px 10px 0px 0px; line-height: 1.6em; font-family: Cerebri-sans, Helvetica, Arial, sans-serif">
<span style="font-family: Arial, sans-serif; color: rgb(0, 9, 255)">E: </span
><a
href="mailto:[email protected]"
style="outline: 0px; font-family: Cerebri-sans, Helvetica, Arial, sans-serif; background-color: transparent; color: rgb(51, 51, 51)"
target="_blank"
><span style="font-family: Arial, sans-serif">[email protected]</span></a
>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table
cellspacing="0"
cellpadding="0"
border="0"
style="border-spacing: 0px; border-collapse: collapse; margin: 0.1px; padding-top: 1px; font-family: Arial, sans-serif; line-height: 1.3; font-size: 10px; width: 644px; color: gray"
>
<tbody style="font-family: Arial, sans-serif">
<tr style="font-family: Arial, sans-serif">
<td style="margin: 0.1px; padding: 4px 0px 0px; font-family: Arial, sans-serif">
IMPORTANT: Standard email confidentiality notice. This is a multi line statement. Thank you. Standard email confidentiality notice. This is a multi line statement. Thank you. Standard email
confidentiality notice. This is a multi line statement. Thank you. Standard email confidentiality notice. This is a multi line statement. Thank you. Standard email confidentiality notice.
This is a multi line statement. Thank you. Standard email confidentiality notice. This is a multi line statement. Thank you. Standard email confidentiality notice. This is a multi line
statement. Thank you.
</td>
</tr>
</tbody>
</table>
</div>
I am expecting the right cell with the contact data to be positioned further right so that it does not overlap the left cell. I had no idea it was even possible for a column on the right side to overlap a column on the left side, it seems counterintuitive to the concept of a table with columns. However I am not an html specialist by trade and so I’m sure others will be quick to offer corrections.
Tested in desktop Chrome browser, desktop Edge(Chromium) browser, iPhone Safari, iPhone Chrome and iPhone Gmail App. Desktop works perfectly, mobile does not.
I am at a loss as to what is causing this behavior. I have experimented with min-width which doesn’t seem to make a differene. Perhaps I am putting it in the wrong element? Any ideas what needs to be changed in the html to prevent this happening on mobile app?