What's new
HTML Forums | An HTML and CSS Coding Community

Welcome to HTMLForums; home of web development discussion! Please sign in or register your free account to get involved. Once registered you will be able to connect with other members, send and receive private messages, reply to topics and create your very own. Our registration process is hassle-free and takes no time at all!

Struggling With an HTML Signature

Joel Van Beek

New member
Hello! I am very new to HTML, I am creating HTML email signatures but it only works sometimes. Sometimes in gmail is show properly, other times - the photos are randomly place all over the place. In my preview and browser the email signature looks fine. What is my issue?

<!DOCTYPE html>
<html>
<head><title>Joel's Email Signature</title></head>
<body>
<table cellpadding="0" cellspacing="0" style="width: 100%;
max-width: 500px;">
<tr>
<td width="51%" style="line-height: 0px; border-collapse: collapse; padding: 0px;">
<img src="https://sabc.ca/wp-content/uploads/2023/09/Email-Signature-V2_Column1Row1.png"
style="width: 100%; min-width: 260px;">
<img src="https://sabc.ca/wp-content/uploads/2023/09/Email-Signature-V2_Column1Row2.png"
style="width: 100%; min-width: 260px;"></td>
<td width="7%" style="line-height: 0px; border-collapse: collapse; padding: 0px;">
<img src="https://sabc.ca/wp-content/uploads/2023/09/Email-Signature-V2_Column2Row1.png"
style="width: 100%; min-width: 34px;">
<a href="https://www.facebook.com/southernalbertabiblecamp"><img src="https://sabc.ca/wp-content/uploads/2023/09/Email-Signature-V2_Column2-Row2.png"
style="width: 100%; min-width: 34px;"></a></td>
<td width="6%" style="line-height: 0px; border-collapse: collapse; padding: 0px;">
<img src="https://sabc.ca/wp-content/uploads/2023/09/Email-Signature-V2_Column3Row1.png"
style="width: 100%; min-width: 30px;">
<a href="https://www.youtube.com/channel/UCxDTAv5beRwqfwaODJ_X7bQ"><img src="https://sabc.ca/wp-content/uploads/2023/09/Email-Signature-V2_Column3Row2-09.png"
style="width: 100%; min-width: 30px;"></a></td>
<td width="6%" style="line-height: 0px; border-collapse: collapse; padding: 0px;">
<img src="https://sabc.ca/wp-content/uploads/2023/09/Email-Signature-V2_Column4Row1.png"
style="width: 100%; min-width: 30px;">
<a href="https://www.instagram.com/southernalbertabiblecamp/"><img src="https://sabc.ca/wp-content/uploads/2023/09/Email-Signature-V2_Column3Row2-11.png"
style="width: 100%; min-width: 30px;"></a></td>
<td width="30%" style="line-height: 0px; border-collapse: collapse; padding: 0px;">
<img src="https://sabc.ca/wp-content/uploads/2023/09/Email-Signature-V2_Column5Row1.png"
style="width: 100%; min-width: 146px;">
<a href="https://sabc.ca/"><img src="https://sabc.ca/wp-content/uploads/2023/09/Email-Signature-V2_Column5Row2.png"
style="width: 100%; min-width: 146px;"></a>
<a href="mailto:joel@sabc.ca"><img src="https://sabc.ca/wp-content/uploads/2023/09/Email-Signature-V2_Column5Row3.png"
style="width: 100%; min-width: 146px;"></a>
<img src="https://sabc.ca/wp-content/uploads/2023/09/Email-Signature-V2_Column5Row4.png"
style="width: 100%; min-width: 146px;"></td>
</tr>
</table>
</body>
</html>
 
Well, in my opinion, if you want to improve the compatibility of your email signature, you can follow the below steps.
1. Inline your CSS.
2. Use tables for layout
3. Specify the dimension of your image.
Thanks
 
Back
Top