HTML Email signature erroneous layout

IRowden · ‎Jul 30, 2024

Hi. I appreciate this is similar to a recent post but I couldn't see what the solution was in that post, hence this new post by me.

When setting up in HTML the email signature I'm using looks fine and set out properly. When I email myself a test the sizing of elements are all off and aren't influenced by change in the code.

When I send the same test email (from HubSpot & forwarding email) to someone else in my organisation, it is displayed as it is in a standard HTML window.

Is there a sure-fire way to ensure the footer is displayed the same across email platforms?

I had initially used flexboxes, but then read up that emails don't like flexbox. I changed the felxes for tables which has helped; but as I say, it is still erroneous between platforms.

My day job isn't codewriting, so if it's just bad code on my part I can understand

<!DOCTYPE html>
<html lang="en">
<body>
    <table width="780" cellpadding="0" cellspacing="0" border="0" style="height: 450px;">
        <tr>
            <td>
                <table width="100%" cellpadding="0" cellspacing="0" border="0">
                    <tr>
                        <td style="padding-left:1.2rem; font-family:Calibri,Verdana; font-size:1rem;">
                            Best wishes<br>
                            name
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <table width="100%" cellpadding="0" cellspacing="0" border="0">
                                <tr>
                                    <td style="padding-left:1rem; padding-right:1.5rem; padding-top: 1rem;">
                                        <img src="https://6aac80e449800f7f4d2c-dc5461586532f603665b44bf625cea35.ssl.cf3.rackcdn.com/aldercote/logo_image.jpg?_1704879869" width="200" height="150" style="width:200px; height:150px;">
                                    </td>
                                    <td style="border-left:solid grey 1px; padding-right:3rem; padding-left:1.5rem; font-family:Calibri,Verdana; font-size: 0.9rem;">
                                        <span style="color:#D91A2A;"><strong>name</strong></span>
                                        <br>Sales &amp; Service
                                        <br>
                                        <br><span style="color:#D91A2A;">+44 </span>1482 222377
                                        <br><a href="http://www.aldercote.com/" target="_blank" style="color:#D91A2A;">www.aldercote.com</a>
                                        <br>
                                        <br><strong>Aldercote Limited</strong>
                                        <br>The Embankment, Woodhouse Street,
                                        <br>Kingston-upon-Hull, HU9 1RJ.
                                    </td>
                                    <td>
                                        <img src="https://aldercote.com/files/dal/MAN_VZ140-humber-bridge.jpg" alt="Picture of Vehicle Mounted Access Platform" width="237" height="150" style="width:237px; height:150px;">
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td style="padding-top: 1rem;">
                            <table cellpadding="1" cellspacing="0" border="0">
                                <tr>
                                    <td>
                                        <a href="https://x.com/aldercote" target="_blank">
                                            <img src="https://img.freepik.com/free-vector/new-2023-twitter-logo-x-icon-design_1017-45418.jpg?size=338&ext=jpg&ga=GA1.1.2008272138.1722211200&semt=ais_hybrid" alt="Twitter (X) Link" width="30" height="30" style="padding-left:1rem; padding-right:0.8rem; height:30px; width:30px;">
                                        </a>
                                    </td>
                                    <td>
                                        <a href="https://www.facebook.com/vanmounted/" target="_blank">
                                            <img src="https://t3.ftcdn.net/jpg/07/83/37/38/360_F_783373860_OFUl6HiiZRWEkRCQ1RpdW4wduUqhTllz.jpg" alt="Facebook Link" width="31" height="31" style="padding-right:0.8rem; height:31px; width:31px;">
                                        </a>
                                    </td>
                                    <td>
                                        <a href="https://www.instagram.com/aldercote/" target="_blank">
                                            <img src="https://seeklogo.com/images/I/instagram-new-2016-glyph-logo-84CB825424-seeklogo.com.png" alt="Instagram Link" width="32" height="32" style="padding-right:0.8rem; height:32px; width:32px;">
                                        </a>
                                    </td>
                                    <td>
                                        <a href="https://www.linkedin.com/company/aldercote/" target="_blank">
                                            <img src="https://t4.ftcdn.net/jpg/05/46/78/23/360_F_546782398_26V3pL84dJYL7ovgIIIjcDJ7IhPUDxSA.jpg" alt="LinkedIn Link" width="35" height="35" style="padding-right:0.8rem; height:35px; width:35px;">
                                        </a>
                                    </td>
                                    <td>
                                        <a href="https://www.youtube.com/channel/UC3N7s9-Z325DQdZeWHXiFfg" target="_blank">
                                            <img src="https://i.pinimg.com/originals/81/1a/67/811a673704ddaabd253e9b3a5dc53d17.png" alt="YouTube Link" width="27" height="27" style="height:27px; width:27px;">
                                        </a>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td style="padding-left:1rem; color:grey; font-family:Calibri, Verdana; font-size:0.8rem; padding-top: 1rem;">
                            This email and any files transmitted with it are confidential and intended solely for the use of the individual(s)
                            <br>to whom it is addressed. Any views or opinions presented are solely those of the author and do not necessarily 
                            <br>represent those of Aldercote Limited unless otherwise stated. If you are not the intended recipient, be advised 
                            <br>that you have received this email in error and that any use, dissemination, forwarding, printing or copying of this 
                            <br>email is strictly prohibited, and that the email should be returned to the sender. If you are not the intended recipient 
                            <br>please contact <a href="mailto:mail@aldercote.com" target="_blank" style="color:#D91A2A;">mail@aldercote.com</a>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>

IRowden · ‎Jul 30, 2024

After some trial and error... and bugging my brother (who is a web developer) we have a solution!

It may work for others, may not but worth sharing!

In each of the table opening tags, add style="table-layout:fixed;".

This has locked everything down for me when I email Gmail & outlook inboxes from HubSpot

View solution in original post

IRowden · ‎Jul 30, 2024

After some trial and error... and bugging my brother (who is a web developer) we have a solution!

It may work for others, may not but worth sharing!

In each of the table opening tags, add style="table-layout:fixed;".

This has locked everything down for me when I email Gmail & outlook inboxes from HubSpot

Jaycee_Lewis · ‎Jul 30, 2024

Hey, @IRowden 👋 Thanks for taking the time to come back and share what worked for you! — Jaycee

Jaycee Lewis

Developer Community Manager

Community | HubSpot

CMS Development