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.
Related
I made a HTML email layout using table, the design is working fine in my machine but when I put the code to test in putsmail the footer moves to the left when I view the mail in the dekstop.
It should come like this:
Its coming like this:
My HTML code:
<!--Footer-->
<table class="footer">
<tr>
<td style="padding: 50px;background-color: #f7f7f7">
<table width="100%">
<p style="text-align: center; font-size: 12px; line-height: 1.5;">
Having Trouble with something?
<br>
Reach out to us support#vantagecircle.com
</p>
<img style="display: block; margin-right: auto;margin-left: auto; padding-bottom: 25px;" src="https://i.ibb.co/1Z05xTH/vc-footer-logo.png" width="120px" />
</table>
</td>
</tr>
</table>
My CSS code:
.footer{
align-content: center;
width: max-content;
position: relative;
}
Thank You in advance
It’s safer to use inline CSS for email templates, I also don’t think any email clients supports the align-content property or even max-content on width. Maybe try it like this:
<table width="100%">
<tr width="100%">
<td style="padding: 50px;background-color:#f7f7f7">
<div style="margin-left:auto;margin-right:auto;">
<p style="text-align: center; font-size: 12px; line-height: 1.5;">
Having Trouble with something?
<br>
Reach out to us support#vantagecircle.com
</p>
<img style="display: block; margin-right: auto;margin-left: auto; padding-bottom: 25px;" src="https://i.ibb.co/1Z05xTH/vc-footer-logo.png" width="120px" />
</div>
</td>
</tr>
</table>
Note that I'm using width inline there, and added a div in the inner td to align to the center.
Change the width: max-content; to width: 100%; and it should work.
You can read more about how "max-content" works here
Use width: 100% for the table.
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.
I have the table below and in each 'td' I have two divs. One that shows a header and one that shows some number. The table is currently aligned to the left. I want to center the number under the center part of the div above it (taught, hosted, points), but still keep the header info aligned to the left as far as possible. Should I use the 'th' tag for this or some other css?
Here is my table and my fiddle
table,
th,
td {
border: 1px solid black;
}
<div id="pointsTags" style="">
<table style="width: 100%;">
<tr>
<td>
<div style="font-size: 20px;">Hosted</div>
<div id="totalHosted" style="font-size: 25px; font-family: Playfair Display,serif">6</div>
</td>
<td>
<div style="font-size: 20px;">Attended</div>
<div id="totalAttended" style="font-size: 25px; font-family: Playfair Display,serif">45</div>
</td>
<td>
<div style="font-size: 20px;">Taught</div>
<div id="totalTaught" style="font-size: 25px; font-family: Playfair Display,serif">344</div>
</td>
<td>
<div style="font-size: 20px;">Points</div>
<div id="totalPoints" style="font-size: 25px; font-family: Playfair Display,serif">0</div>
</td>
</tr>
</table>
</div>
I've edited my question a little more to reflect what I am looking for, all answers are incorrect as they are centering the number inside the td, not on the div above it
first, you need to wrap your two div into one div and give set display:inline-block to it. and add text-align:center to second div.
table,
th,
td {
border: 1px solid black;
}
<div id="pointsTags" style="">
<table style="width: 100%;">
<tr>
<td>
<div style="display:inline-block;">
<div style="font-size: 20px;">Hosted</div>
<div id="totalHosted" style="font-size: 25px; text-align:center; font-family: Playfair Display,serif">6</div>
</div>
</td>
<td>
<div style="display:inline-block;">
<div style="font-size: 20px;">Attended</div>
<div id="totalAttended" style="font-size: 25px; text-align:center; font-family: Playfair Display,serif">45</div>
</div>
</td>
<td>
<div style="display:inline-block;">
<div style="font-size: 20px;">Taught</div>
<div id="totalTaught" style="font-size: 25px; text-align:center; font-family: Playfair Display,serif">344</div>
</div>
</td>
<td>
<div style="display:inline-block;">
<div style="font-size: 20px;">Points</div>
<div id="totalPoints" style="font-size: 25px; text-align:center; font-family: Playfair Display,serif">0</div>
</div>
</td>
</tr>
</table>
</div>
hi the best way to do this is .
give the divs a same class like
<td>
<div style="font-size: 20px;" class="sameclass">Hosted</div>
<div class="centerDivText sameclass" id="totalHosted" style="font-size: 25px; font-family: Playfair Display,serif">6</div>
</td>
now you can use css to do this like-td>:nth-child(2){text-align:center;}
or
td>:nth-child(2) .sameclass{text-align:center;}
try this i hope it will work
if you want to align the upper div text use-
td:nth-child(1).sameclass{text-align:center;}
You need to add following lines to the css file. No need to create any class.
Here is the fiddle.
tr td div:nth-of-type(2){
text-align:center;
}
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)
What would be the best way to make a whole block of content clickable in an html email so that it also works in Outlook (2003, 2007, 2010).
For example, I have this Call-To-Action:
So far I've come up with this:
<table cellpadding="0" cellspacing="0" style="border: 1px #ffffff dashed;">
<!-- NAVIGATION AREA START -->
<tr>
<td width="370" style="font-family:'Times New Roman', Times, serif;font-size: 22px;font-weight:bold;line-height:52px;">
<div style="margin-left: 15px; margin-top: 0; margin-bottom: 0; height:100%;">
<a href="http://${servername}/" style="text-decoration:none;color:#fff;">
LEARN MORE ABOUT ABOUT THIS
</a>
</div>
</td>
<td width="160">
<table cellpadding="0" cellspacing="0" height="24">
<tr>
<td>
<div style="background-color:#fff; margin-top: 0; margin-bottom: 0;width:128px;height:24px;color: #000000;text-decoration: none;font-size: 12px;line-height: 24px;">
<a href="http://${servername}/" style="text-decoration:none;color:#000;margin-left: 5px;">
CLICK HERE
</a>
</div>
</td>
<td>
<img style="display: block;" width="13" height="24" border="0" alt="" title="" src="http://${servername}/images/mailing/arrow-white.png" />
</td>
</tr>
</table>
</td>
</tr>
<!-- NAVIGATION AREA END -->
</table>
The problem is that the whole area within the dashed border should be clickable. I tried wrapping the whole table with an a tag, but this doesn't work in Outlook or IE (it works in Firefox).
Or, consider this:
<table width="255" cellspacing="0" cellpadding="0" bgcolor="#000000" style="border: 10px solid #fff;">
<tr>
<td valign="top" style="width:130px;padding-bottom: 15px; padding-top: 15px; padding-left: 15px;">
<p style="color:#ffffff;font-family:'Times New Roman', Times, serif;font-size: 16px;margin-top: 0; margin-bottom: 5px;">
<strong>FAQ</strong>
</p>
<p style="font-family: arial,sans-serif; font-size: 14px; color:#d0d0d0; line-height: 20px; margin-top: 0; margin-bottom: 0;">
Learn more about our services.
</p>
</td>
<td align="center" style="padding-bottom: 15px; padding-top: 15px;">
<p style="margin-top: 0;margin-bottom: 0;">
<img width="54" height="102" border="0" src="http://${servername}/images/mailing/questionmark.png" title="" alt="">
</p>
</td>
</tr>
</table>
Here too, the whole block (within the white border) should be clickable, not just the individual lines of text.
How would you go about this, considering the bad support for CSS in Outlook 2007/2010 (e.g. no display CSS-property)?
Bottom line: How to link a block level alement without being able to wrap it with a (tried with table and div) or using display: block;?
This answer will aim to show how all different options render in Outlook (2013), starting with the "best" solution found so far:
<table width="100%" style="background-color: #ccc;"><tr>
<td style="padding: 15px; text-align: center;">
<a href="http://www.stackoverflow.com" style="text-decoration: none; color: #333;">
Go to some great website!
</a>
</td>
</tr></table>
This will be rendered like this:
Or, with the link hitbox annotated:
Yeah, that sucks: you want the entire block to be clickable. Basically I'm here to tell you that the answer to the question "how to link block elements (outlook-compatible)" is: this is not possible, not without workarounds.
To support my claim (PS. I highly welcome anyone proving this claim wrong!), here's all the variations I've tried, with their respective renderings in Outlook. I've tried to include some solutions suggested in other answers too.
Here's the code I've used to generate e-mails:
<html>
<head>
<title>My e-mail</title>
</head>
<body>
<table width="660px" align="center" border="0" cellspacing="0" cellpadding="0" style="width: 660px;">
<tr>
<td style="padding: 15px;">
<p>1. The "best" text-only version I've found:</p>
<table width="100%" style="background-color: #ccc;"><tr>
<td style="padding: 15px; text-align: center;">
<a href="http://www.stackoverflow.com" style="text-decoration: none; color: #333;">
Go to some great website!
</a>
</td>
</tr></table>
<hr />
<p>2a. Workaround using an image. Setting size through style attribute does not work.</p>
<a href="http://www.stackoverflow.com">
<img alt="Go to some great website!" src="your custom image" style="width: 100%; height: 30px;" />
</a>
<hr />
<p>2b. Workaround using an image. Kind of works, but requires an image of exactly correct size through attributes.</p>
<a href="http://www.stackoverflow.com">
<img alt="Go to some great website!" src="your custom image" width="640px" height="30px" />
</a>
<hr />
<p>3. Attempt to link the entire table. Does not work.</p>
<a href="http://www.stackoverflow.com" style="text-decoration: none; color: #333;">
<table width="100%" style="background-color: #ccc;"><tr>
<td style="padding: 15px; text-align: center;">
Go to some great website!
</td>
</tr></table>
</a>
<hr />
<p>5. Attempt to link the entire div. Does not work.</p>
<a href="http://www.stackoverflow.com" style="text-decoration: none; color: #333;">
<div style="background-color: #ccc; padding: 15px; text-align: center;">
Go to some great website!
</div>
</a>
<hr />
<p>6. Setting anchor tag to display as a block. Does not work.</p>
<a href="http://www.stackoverflow.com" style=" display: block; text-decoration: none; color: #333; background-color: #ccc; padding: 15px; text-align: center;">
Go to some great website!
</a>
<hr />
<p>6. Hacking with line-height, does not work.</p>
<div style="background-color: #ccc; text-align: center;">
<a href="http://www.stackoverflow.com" style="line-height: 3em; text-decoration: none; color: #333;">
<span style="vertical-align: middle;">Go to some great website!</span>
</a>
</div>
</td>
</tr>
</table>
</body>
</html>
And here's how they're rendered by Outlook 2013, annotated with the link hitbox:
Put an <a> in each of the fields. Not elegant, but this works.
If there is a field that is empty, just put a transparent image in there that's the right width and height. (image itself, not resized in html)
Personally I'd add the call to action as an image in the email and simply wrap it with an anchor tag.
<img src="http://myimage.com/image.png" alt="" />
Given that this is for an email, is there a reason you want to build up the call-to-action in HTML?
UPDATE
Alternatively you could do something like this:
http://jsfiddle.net/gv5aZ/
(Quick fiddle i've put together for you)
I've not tested this extensively but I did manage to get something working.
In you header styles and in the 'a href=""' add the below:
Header style:
#outlook a { padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; }
Link inline style:
<a style="font-family: #; font-size: #px; text-decoration: #; border: #color #px #; color: #; padding-bottom: #px; padding-top: #px; padding-left: #px; display: inline-block; padding-right: #px; font-style: #;" href="#" target="_blank">Read more...</a>
Replace # with your styles of course except for the display property (leave that one in!)
Again, I haven't tested this extensively but for me it worked so don't miss anything out from what I've written here :)
EDIT: You might not have a border in your design so make it the same colour as your background
Why don't you just put an anchor around the table? Not entirely sure if it works in outlook though, but it's the easiest solution
<table>....</table>