I am a creating an email signature using HTML. I am using the HTML table to build it.
Here is my HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p {
padding : 0 0 0 0;
margin: 0 0 2px 0;
}
table {
table-layout: fixed;
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="329" height="314">
<tr>
<td style="line-height: 0;">
<img src="CC-email-sig_01.png" alt="" style="padding: 0; margin : 0; border : 0; display : block; width: 100%; ">
</td>
<td style="font-family: Helvetica; font-size: 12px; text-align: right; padding-right: 20px; font-weight: bold;">
<p style="color: #3F4B54;">Sean Clough</p>
<p style="color: #3F4B54;">Writer/Owner </p>
<p style="color: #25408F;">Clough Copywriting</p>
<br/>
<p><span style="color: #25408F;">m</span> <span style="color: #3F4B54;">0419 031 052</span> </p>
<p><span style="color: #25408F;">a</span> <span style="color: #3F4B54; font-weight: bold;">PO Box 439</span> </p>
<p style="color: #3F4B54;">Bedford WA 6052</p>
<p>cloughcopywriting.com.au</p>
</td>
</tr>
<tr bgcolor="#25408F">
<td style="padding-left: 22px;">
<p style="font-family: Helvetica; font-size: 12px; font-weight: bold; color : #fff; margin: 10px 0 10px 5px;">Follow me on</p>
<img src="CC-email-sig_06.png" alt="">
<img src="CC-email-sig_08.png" alt="">
<img src="CC-email-sig_10.png" alt="">
</td>
<td width="184">
<img src="CC-email-sig_04.png" alt="" style="padding: 0; margin : 0; border : 0; display : block; width: 100%; ">
</td>
</tr>
<tr style="vertical-align: baseline;">
<td colspan="2" style="line-height: 100%;">
<img src="CC-email-sig_12.png" alt="" width="329" style="padding: 0; margin : 0; border : 0; display : block; width: 100%; ">
</td>
</tr>
</table>
</body>
</html>
Now In the browser, it looks like bellow image:
but in outlook, the image looks like bellow:
If you see then you can notice the red arrow. Here I am using an image for showing the curve but It's not full width in outlook but perfect on the browser.
Also, padding between Man image and text is not same.
How can I solve this issue?
Thanks.
So, basically,because of the outlook limitations, I recommend you to use an entire background image for your last row.
https://jsfiddle.net/pablodarde/css60wL2/
<tr background="https://s20.postimg.org/cz6xu0nz1/bg_Footer.png">
<td style="padding-left: 22px;">
<p style="font-family: Helvetica; font-size: 12px; font-weight: bold; color : #fff; margin: 10px 0 10px 5px;">Follow me on</p>
<img src="CC-email-sig_06.png" alt="">
<img src="CC-email-sig_08.png" alt="">
<img src="CC-email-sig_10.png" alt="">
</td>
<td width="184">
<img src="CC-email-sig_04.png" alt="" style="padding: 0; margin : 0; border : 0; display : block; width: 100%; ">
</td>
</tr>
Related
I've been having an issue where the signature we've built works on nearly everything except IOS devices like Iphone and Ipad. on those devices the second cell is much thinner than it's supposed to be, and I can't tell if it's because the first cell is too big or if something else is causing this.
I figured standard table HTML would be fairly universal, and I don't have any fancy code going in here, so I expect it's some sort of odd interaction in how it's being translated by the mail app.
I've tried making the cells one pixel shorter, in case it's somehow not liking how it fits in the full 600 pixel width table. No dice.
Any idea what might be causing this? Thanks a ton for any help.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<table style="width: 600px; border-collapse: collapse; font-family: Arial;">
<tr style="width: 600px;">
<td colspan="2" style="width: 314px; border-bottom: 2px solid #1a206c; padding-top: 0px; padding-bottom: 8px; vertical-align: top; " >
<span style="font-size: 18pt; font-weight: bold; color: #1a206c;">
John Doe
<a href="https://en.wikipedia.org/wiki/ITIL" style="text-decoration: none;">
<img src="http://www.gosafe.com/signatures/personalcerts/itil.png" border="0" alt="Certification"/>
</a>
</span>
<br>
<span style="font-size: 11pt; font-weight: bold; color: #ff6400; line-height: 20px;">
Senior Operating Officer
</span>
</td>
<td colspan="2" style="width: 284px; border-bottom: 2px solid #1a206c; padding-top: 0px; padding-bottom: 8px; vertical-align: top;">
<span style="font-size: 9pt; color: #1a206c; font-family: Arial;">
<img src="https://www.gosafe.com/signatures/5-2021-images/tollfree.png" alt="Phone Number" vertical-align="center"/>
<strong style="line-height: 20px;"> 555.555.5555</strong>
<img src="https://www.gosafe.com/signatures/5-2021-images/mobile.png" border="0" alt="Mobile"/>
<strong style="line-height: 20px;"> 555.555.5555</strong>
</span>
<br style="font-size: 9pt;" />
<span style="font-size: 9pt; color: #1a206c; font-family: Arial; line-height: 20px; vertical-align: middle;">
<img src="https://www.gosafe.com/signatures/5-2021-images/email.png" border="0" alt="Email"/>
<strong style="line-height: 20px;"> John_Doe#exampleguy.com</strong>
</span>
<span style="font-size: 9pt; color: #1a206c; font-family: Arial;"></span>
<br style="font-size: 8pt;" />
<span style="font-size: 9pt; color: #1a206c; font-family: Arial; margin-bottom: 0px;">
<img src="https://www.gosafe.com/signatures/5-2021-images/location.png" border="0" alt="Location"/>
<strong style="line-height: 20px;"> 3343 Main Street, Albany, New York, 33939</strong>
</span>
</td>
</tr>
<tr style="width: 600px;">
<td style="width: 200px; padding-top: 15px; padding-bottom: 10px;">
<a href="http://www.goSafe.com">
<img src="https://www.gosafe.com/signatures/5-2021-images/goSafeLogo.png" border="0" alt="goSafe"/>
</a>
</td>
<td colspan="2" style="width: 200px; padding-top: 5px; text-align: center;">
<a title="Member of the AD Safety Network" style="text-decoration: none;" href="https://www.adhq.com">
<img src="https://www.gosafe.com/signatures/5-2021-images/ADsnPerfect.png" border="0" alt="AD Safety Network"/>
</a>
</td>
<td style="width: 200px; padding-top: 15px; padding-bottom: 10px;">
<p style="font-size: 10pt; font-family: Arial; text-decoration: none;" align="right">
<a title="goSafe on LinkedIn" style="text-decoration: none;" href="https://www.linkedin.com/company/948460">
<img src="https://www.gosafe.com/signatures/5-2021-images/li.png" border="0" alt="Linked In"/>
</a>
<a title="goSafe on FaceBook" style="text-decoration: none;" href="https://www.facebook.com/gosafesupply">
<img src="https://www.gosafe.com/signatures/5-2021-images/FB.png" border="0" alt="Facebook"/>
</a>
<a title="goSafe on Instagram" style="text-decoration: none;" href="https://www.instagram.com/gosafesupply">
<img src="https://www.gosafe.com/signatures/5-2021-images/ig.png" border="0" alt="Instagram"/>
</a>
<a title="goSafe on Twitter" style="text-decoration: none;" href="https://twitter.com/gosafesupply">
<img src="https://www.gosafe.com/signatures/5-2021-images/tw.png" border="0" alt="Twitter"/>
</a>
<br>
<a href="http://www.goSafe.com" style="text-decoration: none;">
<span style="color: #ff6400;">
<strong title="">www.goSafe.com</strong>
</span>
</a>
</p>
</td>
</tr>
<tr style="width: 600px;">
<td colspan="4">
<p style="width: 600px; padding-top: 0px; padding-bottom: 10px; font-size: 7pt; color: #1a206c; font-family: Arial;">This email and any attachments may contain confidential or proprietary information, the review and usage of which is restricted to the sender and the intended recipient(s). If you are not the intended recipient, please contact the sender and delete all copies of this message and any attachments.</p>
</td>
</tr>
</table>
<br /><br />
It's 600px wide, and mobiles only have about 300px! So there is going to be downscaling or chopping or squeezing to compensate.
I'd suggest re-creating according to 'fluid design' principles.
Creating an email signature.
Currently it looks as expected in a browser.
However when I copy this in to an email client as a signature the right hand column "#float-me-right" wont float right. Could someone please advise the best practice to keep this fixed along the right hand side of the table.
kindest regards
<table class="footer-table" border="0" cellpadding="0" style="max-width: 1900px; font-family: Trebuchet MS,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Tahoma,sans-serif; font-size: 15px">
<tbody>
<tr>
<td class="col">
<img width="280" border="0" src="http://stevenmacdonald.co.uk/wp-content/uploads/2020/02/team-chris-500x400-1.gif" alt="Hello">
<p style="margin:0"><a name="_MailAutoSig"><strong style="font-size: 21px;font-weight: 100;line-height:28px; color: #728bfc; margin-left: 12px;">Name</strong></a></p>
<p style="margin: 0; font-size: 15px; line-height: 24px; font-weight: 100; margin-left: 12px;">Job Title</p>
<p style="font-size: 13px; line-height: 18px; margin-left: 12px; margin-bottom: 0;">07123456789
<br><span style="color: #000 !important;">test#test.com</span></p>
</td>
<td id="float-me-right" class="col" style="text-align: right;">
<table class="inner-table" style="width: 320px; text-align: right; margin-top: 131px; text-align: left; display: inline-block;">
<tbody>
<!-- top row right -->
<tr>
<td>
</td>
<td>
<span><img border="0" style="padding-top: 0px; padding-bottom: 10px; display:inline-block; width:120px;" src="http://stevenmacdonald.co.uk/wp-content/uploads/2020/02/Screenshot-2020-02-18-at-16.57.16.png" alt="Hello"></span>
</td>
</tr>
<!-- bottom row right -->
<tr>
<td>
<p style="font-size: 13px; line-height: 18px; margin: 0;">Address Top Line<br> addresss line one<br> addresss line two<br> addresss line three<br>
</td>
<td>
<span style="display: inline-block; font-size: 13px; line-height: 18px; padding-top: 18px;">0151 012 0192<br>
info#mywebsite.co.uk<br>
mywebsite.co.uk</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
https://jsfiddle.net/stevenmacdonald180/5L8myxnv/9/
Instead of using float:right try using table property align="right". That will make your table align right. Check the codepen link.
Email Signature
Since you're using tables, it's better to use table properties as first priority instead of CSS.
Try using the align="right" in the table element which you want to align right.
align="right"
Do let me know if this works.
I'm very new to HTML and have been trying to build a HTML signature, I've managed to get it to work in a number of email clients and look how I want but sometimes, for instance on iPhone and in Hotmail/Outlook the social media icons in the second cell move below the company logo. Is there something I have missed or can improve upon so that they stay inline with the rest of the signature?
Below is the current code - I probably have things in the code that either don't need to be there or seem a bit strange but this is best I've managed to achieve.
<div id="sig" style="min-width: 400px; min-height: 130px; max-width: 600px; max-height: 150px; padding: 5px 0 0 5px;">
<tbody>
<tr>
<td>
<img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/Signature-for-forum.jpg"alt=" width="500" height="119" alt="Lozi Designs" style="float: left; border: none;"/></td>
<td valign="bottom"><a href="http://www.facebook.com/lozidesigns"> <img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/FB-LBS.jpg" alt="www.facbeook.com/lozidesigns" width="38" height="38" style="margin: 0; border: 0; padding: 1.5; display: block;">
<a href="http://www.instagram.com/lozi_designs"> <img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/Instagram-LBS.jpg" alt="www.instagram.com/lozi_designs" width="38" height="38" style="margin: 0; border: 0; padding: 1.5; display: block;">
<a href="http://www.lozidesigns.com"> <img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/Home-LBS.jpg" alt="www.lozidesigns.com" width="38" height="38" style="margin: 0; border: 0; padding: 1.5; display: block;">
</td>
<div style="clear:both"></div>
Many thanks
If you mean to leave images in the same line you should use display : inline instead of display : block
<div id="sig" style="min-width: 400px; min-height: 130px; max-width: 600px; max-height: 150px; padding: 5px 0 0 5px;">
<tbody>
<tr>
<td>
<img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/Signature-for-forum.jpg"alt=" width="500" height="119" alt="Lozi Designs" style="float: left; border: none;"/></td>
<td valign="bottom"><a href="http://www.facebook.com/lozidesigns"> <img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/FB-LBS.jpg" alt="www.facbeook.com/lozidesigns" width="38" height="38" style="margin: 0; border: 0; padding: 1.5; display: inline;">
<a href="http://www.instagram.com/lozi_designs"> <img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/Instagram-LBS.jpg" alt="www.instagram.com/lozi_designs" width="38" height="38" style="margin: 0; border: 0; padding: 1.5; display: inline;">
<a href="http://www.lozidesigns.com"> <img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/Home-LBS.jpg" alt="www.lozidesigns.com" width="38" height="38" style="margin: 0; border: 0; padding: 1.5; display: inline;">
</td>
<div style="clear:both"></div>
edit Updated codepen and litmus.
Try this. codepen. Looks the same in all litmus tests.
edit updated HTML
<div id="sig" style="min-width:400px;min-height:130px;max-width:600px;max-height:150px;padding:5px 0 0 5px;">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td rowspan="3">
<img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/Signature-for-forum.jpg" width="454" height="117" alt="Lozi Designs" border="0" style="display:block;"/>
</td>
<td valign="middle">
<img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/FB-LBS.jpg" alt="www.facbeook.com/lozidesigns" width="38" height="38" border="0" style="display:block;"/>
</td>
</tr>
<tr>
<td valign="middle">
<img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/Instagram-LBS.jpg" alt="www.instagram.com/lozi_designs" width="38" height="38" border="0" style="display:block;">
</td>
</tr>
<tr>
<td valign="middle">
<img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/Home-LBS.jpg" alt="www.lozidesigns.com" width="38" height="38" border="0" style="display:block;">
</td>
</tr>
</table>
</div>
Be sure to validate your html code. You used table elements but didn't surround them with a <table> tag, there were more than one alt text given for the same images, and some of your quotes did not were not closed (not the width attribute below as an example).
Open:
width="122 height="122"
Closed:
width="122" height="122"
edit
I cleaned up some of the styles in the image (you didn't need to float the logo), and removed cellpadding/cellspacing by setting them to zero in the table element. I rechecked Litmus and the social media icons appear as I believe they should.
Try this:
<table>
<tr><td>
<div style="float:left;"><img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/Signature-for-forum.jpg" style="width:100%;max-width:600px;"></div></td><td>
<div width="38px" style="display:inline;">
<img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/FB-LBS.jpg" alt="www.facbeook.com/lozidesigns" width="100%" style="max-width:38px;"><br>
<img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/Instagram-LBS.jpg" alt="www.instagram.com/lozi_designs" width="100%" style="max-width:38px;"><br>
<img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/Home-LBS.jpg" alt="www.lozidesigns.com" width="100%" style="max-width:38px;"></div></td></tr></table>
It should be fully responsive for any email client or mobile device.
I Have 3 Images as icons for different use.
Now what I want is,
If the first icon is clicked, the first icon should be highlighted, if second is clicked the second icon should be highlighted.
Please see the HTML for your ref:-
<tr>
<td width="18%" height="40" align="left" valign="middle"></td>
<td style="text-align: left; vertical-align: middle;" width="6%">
<input type="checkbox" id="branchChkbx" title="Branch" checked="checked" class="hideChkbx" />
<a href="locateBranches_rbl_view.aspx" style="color: #666; font-family: 'signika_negativeRegular', sans-serif;">
<img alt="Branch" src="images/branch_icon.png" height="40" width="40" title="Branch" style="border: 0;" />
<p class="para01">Branch</p>
</a>
</td>
<td style="text-align: left; vertical-align: middle;" width="5%">
<input type="checkbox" id="atmChkbx" title="ATM" checked="checked" class="hideChkbx" />
<a href="locateATM_rbl.aspx" style="color: #666; font-family: 'signika_negativeRegular', sans-serif;">
<img alt="ATM" src="images/atm_icon.png" height="40" width="40" title="ATM" style="border: 0;" /><p class="para01">ATM</p>
</a>
</td>
<td style="text-align: left; vertical-align: middle;" width="6%">
<input type="checkbox" id="lockerChkbx" title="Locker" checked="checked" class="hideChkbx" />
<a href="locateLockers_rbl.aspx" style="color: #666; font-family: 'signika_negativeRegular', sans-serif;">
<img alt="Locker" src="images/locker_icon.png" height="40" width="40" title="Locker" style="border: 0;" /><p class="para01">Locker</p>
</a>
</td>
<td width="6%" height="40" align="left" valign="middle" style="border-left: 1px solid #cccccc;">
<a id="A1" href="Default.aspx" runat="server" style="float: left; text-decoration: underline; color: #666; margin-left: 12px; font-family: 'signika_negativeRegular', sans-serif;">
<p class="para01">View All</p>
</a>
</td>
</tr>
Also see the CSS:-
.para01 {
font-size: 16px;
margin-top: 6px;
font-weight: bold;
margin-top: 10px;
}
Please help
Your best option should be to make the images into css sprite, and change background-sizes. If that's hard for you, you can just make images background of the A tag. Like so:
a {
background: url('image.png') no-repeat center center;
}
a.highlighted {
background-image: url('image-highlight.png');
}
Did it like this
CSS
para01 {
font-size: 16px;
margin-top: 6px;
font-weight: bold;
/*line-height: 1.5em;*/
margin-top: 10px;
}
.highlight {
background: yellow;
}
.imghighlight{
height:50px;
width:50px;
}
JQuery:-
$(document).ready(function () {
$('input.hideChkbx').on('change', function () {
$('input.hideChkbx').not(this).prop('checked', false);
$('input.hideChkbx').not(this).parent().find("img").removeClass("imghighlight");
$('input.hideChkbx').not(this).parent().find(".para01").removeClass("highlight");
if ($(this).is(':checked')) {
$(this).parent().find("img").addClass("imghighlight");
$(this).parent().find(".para01").addClass("highlight");
}
});
});
And it worked
I have put together the following email signature and pasted it in to gmail. I've tested it thoroughly, but have recently noticed a problem where iOS Mail app forces the body text of the email to 50% width of the screen (See screenshot attached).
I've tried inserting media queries which I now know get stripped from Gmail. I also tried removing the table and creating the signature with p tags and inline styles. That messed up the width even more.
So I just can't understand why iOS mail changes the width of the body text above the signature?
<table cellpadding="0" cellspacing="0" border="0" id="backgroundTable">
<tbody><tr>
<td style="line-height: 100%;">
<table cellpadding="0" cellspacing="0" border="0" align="left" height="274"
style=" border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; width: 480px;">
<tbody>
<tr>
<td colspan="2">
<a href="http://www.hostel.com/" target="_blank">
<img src="http://i57.tinypic.com/2vmar0i.png" style="padding: 12px 20px 0 0;">
</a>
</td>
</tr>
<tr>
<td colspan="2" valign="center" height="5">
<p style="font-family: Arial; font-weight: bold;
font-size: 19px; line-height: 1.3; text-align: left; padding: 10px 0; margin: 20px 0 10px 20px;">
Senders Name<br>
<span style="font-size: 16px;">Job Title</span>
</p>
</td>
</tr>
<tr style="height: 50px;">
<td valign="top" style="line-height: 100%; width: 47%;">
<p style="line-height:1.7; margin-top: 0px; font-size: 11px; padding-right: 10px; margin-left: 20px;">
<a href="https://goo.gl/maps/twgHt" target="_blank" style="text-decoration: none !important; color: #000 !important;">
<strong>Address</strong><br>
Street Name<br>
London</p></a>
</td>
<td width="230" valign="top" style="line-height:1.7">
<p style="line-height:1.7; margin-top: 0px; font-size: 11px;">
<strong>T</strong>:
+44 (0)207 729 1833<br>
<strong>M</strong>:
+44 (0)771 216 9796<br>
<strong>W</strong>:
<a href="http://www.hostel.com/" target="_blank" style="color: #000; text-decoration: none;">
www.hostel.com </a></p>
</td>
</tr>
<tr>
<td colspan="2">
<p style="
padding: 7px 15px;
font-size: 12px;
font-weight:bold;
letter-spacing: 0.8px;
display: inline-block;
background: #FFD558;
margin: 20px 0 0 20px;">
<a href="https://twitter.com" target="_blank" style="
color: #000 !important; text-decoration: none;">
Twitter</a> |
<a href="https://www.facebook.com" target="_blank" style="
color: #000 !important; text-decoration: none;">
Facebook</a> |
<a href="https://plus.google.com" target="_blank" style="
color: #000 !important; text-decoration: none;">
Google+</a> |
<a href="http://instagram.com" target="_blank" style="
color: #000 !important; text-decoration: none;">
Instagram</a> |
<a href="http://www.pinterest.com" target="_blank" style="
color: #000 !important; text-decoration: none;">
Pinterest</a>
</p>
</td>
</tr>
<tr>
<td colspan="4">
<p style="
font-size: 10px;
color: #ADADAD;
padding-top: 15px;
border-top: 2px solid #CCC;
line-height: 1.5;
margin: 0 20px;
width: 83%;">
This email and any files transmitted with it are confidential and intended
solely for the use of the individual or entity to whom they are addressed.
No Curfew Ltd trading as 'Name' is a registered company
with registration number 123456789.
</p>
</td>
</tr>
</tbody></table>
</td>
The iPhone resizes the email to the largest element. (Email on Acid)
The cause of the resize is your signature, as the largest element, and is likely caused by the 2 columns you have for address and contact info. Despite being resized by your media queries, the table cells of these two columns are pushed wider to accommodate the text. This causes the table to become wider than defined and break the CSS layout you set up.
To fix this, I would change it to a responsive design with 2 tables (left and right align) instead of 2 columns. This should likely solve your problem.
By having it 2 tables, you can make the contact info slide underneath the address when mobile (or vice versa) so that both can still be full width and not stretch the table. (Campaign Monitor 2-1 column Responsive Design walkthrough)