I've been working on making a signature (CSS+HTML) work across multiple platforms, and have hit the wall when it comes to Hotmail.
For some reason, when sending this signature to my Hotmail address, it gets stretched vertically. It seems that Hotmail, for one reason or another, is adding a lot of white space below the text in each table cell?
The problem is clearly illustrated in this graphic: http://www.madculture.es/images/test.jpg
The first signature there, is the intended output. I added borders on #2, to better highlight the problem. Signature three is how it looks when received in Hotmail! :(
This signature works fine in Outlook 2003-2013, Gmail, Lotus Notes, but not in Hotmail.
Does anyone know what could be the reason? I'm clueless, having experimented with this for days now.
Here's the full code for the signature:
<div>
<table border="1" cellspacing="0" cellpadding="1" height="50" style="font-family: Verdana, Arial, sans-serif; font-size: 1em;">
<tr>
<td rowspan="4">
<img src="mc2.png" nosend="1" width="170" height="86" />
</td>
<td style="padding-top: 2px;">
John D. Doe
</td>
</tr>
<tr>
<td style="font-size: 0.85em; font-weight: bold; color: #932D1F; padding-bottom: 2px;">
Marketing & analytics
</td>
</tr>
<tr>
<td style="display: block;">
johnd#doe.com
</td>
</tr>
<tr>
<td style="font-size: 1.05em; font-weight: bold; color: #444; padding-top: 1px;">
Madrid
</td>
</tr>
</table>
</div>
I hope someone can help...
Try slowly removing elements and re-testing at every stage. As a start:
Your table has a height set that's less than your main image
Use nested tables, not rowspan for better email client support
Avoid padding and use set heights instead
Don't set your td to display: block
Add font styling directly to td s (not the table) to get Outlook working correctly
Related
I'm trying to make a signature for email (Lotus Notes). However, while it looks fine on Lotus (yay) I'm getting this space between the title and email address on Gmail.
And I have no idea why that is.
Picture of how it looks on Lotus Notes:
And how it looks on gmail:
Here link to a Fiddle Doesn't work properly as it does on email (don't know why):
<table border="0" cellpadding="6" cellspacing="0">
<tr align="left">
<td valign="top" width="100" ><img src="https://i.imgur.com/XCyNdd6.png" alt="logo" ></td>
<td valign="top" width="700" ><strong><span style=" display:table;font-family: Arial; font-size: medium; "><font size="3" face="Arial">John Doe Smith</font></span></strong>
<table align="left" width="100%" cellpadding="2", cellspacing="0">
<tr >
<td><span style="display:table; font-size:small; margin-top:0px; text-decoration:none; font-family: Arial; color:#16161D;"><font size="2" face="Arial" color="#16161D">https:/URL-example.eu</font></span></td>
</tr>
<tr >
<td><span style=" display:table; font-size: small; text-decoration:none; font-family: Arial;"><font size="2" face="Arial" color="#16161D";>email#URL-example.eu</font></span></td>
</tr>
</table>
<table align="left" width="100" cellpadding="2", cellspacing="" >
<tr align="left">
<td width="30"><img src="https://i.imgur.com/f6DwyDA.png" alt="Example Name Facebook Account"></td>
<td width="35"><img src="https://i.imgur.com/BDQERsI.png" alt="Example Name Instagram Account"></td>
<td width="50"><img src="https://i.imgur.com/Xx1atey.png" alt=Example Name Twitter Account"></td>
</tr>
</table>
</td>
</tr>
</table>
Thank you for all your help.
It probably has to do with how you're adding the signature in Gmail.
The simplest method is to open your HTML + CSS in a webpage (you can even use the Stack Snippet you shared just full screen it) and hit ctrl/cmd + A to select all the content on the page it should highlight all in blue including images. Then hit ctrl/cmd + C to copy it to clipboard and just paste it into the signature field in Gmail. Your code works fine if you do the above.
I couldn't replicate this in a Gmail test. Should be fine - but check #JHeth's answer.
Nevertheless, I also found a slight difference on Outlook iOS, as it added a line-height:150% to the <font> and <a> tags. There are often defaults like this, so it's best to always specify font-size and line-height for <font> and <p> and <a> tags, and there will also be colour and text-decoration defaults for <a>.
For block elements there are default margins and paddings.
So that's how you will get consistency, by adding a HTML-email equivalent CSS reset (note it has to be inline like you've done here, as opposed to <style>).
Finding a strange behavior only in outlook.com with a button text alignment for an email build. For some reason it's aligned to the top of the button instead of being in the middle. Unable to figure out why this is. Any insights appreciated.
Thank you for your time and thoughts.
Code snippet and CTA image link below.
<table cellpadding="0" cellspacing="0" border="0" >
<tr>
<td style="padding: 0px 0px 0px 0px; background-color:#989b98; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#e4008f; cursor: pointer; display: block; min-height: 45px; vertical-align: middle; min-width: 220px;" align="center" valign="middle">16pxXXXX XXXXX XXXXX</td>
</tr>
</table>
I would first start off by reviewing this asset for anything "email" related in order to get an understanding of how different email clients react with CSS.
You will notice how display is not supported in Outlook which would result in your anchor tag not being able to use padding. I would recommend coding an email button the following way:
<table cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td align="center" valign="middle" bgcolor="#989b98" style="padding: 12px 20px; font-family: 'Arial', Helvetica, sans-serif; font-size: 16px; font-weight: bold;">
16pxXXXX XXXXX XXXXX
</td>
</tr>
</tbody>
</table>
This unfortunately only makes the text clickable and not the entire button, but it's going to be your best option in order to make it consistent across all other email clients without having to create an image.
I've recently started working on creating email templates, and have encountered some issues that I am not finding any explanation for.
I generated buttons from buttons.cm under the expectation that they would be bulletproof, and while they were great for most clients, they failed on web based outlook clients.
The results appeared like this (with slight modifications, explained later)
<table style="width: 100%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td style="font-family: arial;">
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="#" style="height:30px;v-text-anchor:middle;width:150px;font-family:arial;background-color:#72BC00;color:#ffffff;" arcsize="14%" stroke="f" fillcolor="#72BC00">
<w:anchorlock/>
<center>
<![endif]-->
Learn More
<!--[if mso]>
</center>
</v:roundrect>
<![endif]-->
</td>
</tr>
</table>
What I am aiming for is this:
Screen shot of working version
But what I get for all browser based outlook clients is this:
Screen shot of failed version
The problem being that in the failed version
cell padding fails
the buttons are not links anymore, in fact all the styles are taken from the button and applied to the parent table.
the first item is actually supposed to be the last, but it is moved to the top, and stripped of all styles, for no apparent reason.
Is there a solution for this? I have yet to find anything. Thanks!
What I've added to the generated button is: Cell padding, changed display from inline-block to table (fixes the buttons from being 100% width and allows centered text in outlook), and made the containing element a table, not a div.
Buttons.cm was a good resource, but it's getting a little outdated.
I support Outlook but try to avoid VML whenever possible. I currently use something like this:
<!-- Button : Begin -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" style="margin: auto;">
<tr>
<td style="border-radius: 3px; background: #222222; text-align: center;" class="button-td">
<a href="http://www.google.com" style="background: #222222; border: 15px solid #222222; font-family: sans-serif; font-size: 13px; line-height: 1.1; text-align: center; text-decoration: none; display: block; border-radius: 3px; font-weight: bold;" class="button-a">
<span style="color:#ffffff">A Button</span>
</a>
</td>
</tr>
</table>
<!-- Button : END -->
All the are messy, but it's something all clients universally understand.
A second, simpler option is to use border-width to fake padding, like so:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
I am a button →
</td>
</tr>
</table>
</td>
</tr>
</table>
Some email clients (mainly Outlook) don't allow a border-width more than 12 or 15 pixels, and this only works with solid colors, so this some have some drawbacks.
More options for bulletproof buttons are on Litmus.
For #2, are you updating the URL in the VML code as well as the anchor tag? Outlook uses the URL in the VML for the link, not the anchor tag.
This causes a problem for a lot of link tracking systems in email, which is one of many reasons I avoid using these kinds of buttons. We've convinced most clients to go with plain CSS styled buttons, with the understanding that Outlook will loose the rounded corners.
I've been looking for answer for this for ages, either I can make the box link or the word but never both, however I think this may be the answer. I have sent out a few emails using it and it seems to work fine.
<center>
<table align="center" cellpadding="20px" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" style="padding: 15px;height: 60px; width: 100%" class="" ><br>
<br>
Find out more <!--[if mso]> <![endif]--><br>
<br></td>
</tr>
</tbody>
</table>
</center>
Does anybody know why the © and ® don't superscript nicely without affecting the leading (i.e. line-height) like ™ and ℠ do?
I've tried wrapping © and ® with <sup> and even <small> but I can't get it to work the way I need it to. Sometimes changing the font size helps but not always.
This is for HTML emails where we use it in <h1>, subheads, and body copy.
When I do wrap it in <sup> and apply CSS it just becomes difficult to control. It behaves differently from one email client to another, and one device to another (this is for responsive emails).
Here's the fiddle: http://jsfiddle.net/cy03eov1/5/
And of course position: and em don't work well in email and margin support is spotty.
body {
font-size: 26px;
line-height: 1em;
color: #ccc;
font-family: Helvetica, sans-serif;
background: lightslategray;
}
table {
width: 80%;
margin: 30px auto 0;
background: #fff;
padding: 5px 20px;
}
.copyright {
font-size:70%;
}
<table cellspacing="0" border="0">
<tr>
<td>
<p>Do you know that horrible fear when you’ve broken something on a client project and you have no idea how to fix it? I do… Sometimes I’ll have been<span class="copyright" style="color:red;"><sup>©</sup></span> wading through templates on a site, getting it all up to scratch, then suddenly I’m faced with a page of doom—a whole<span style="color:red; font-size: 70%; vertical-align:text-top;">®</span> page of garbled semi-English that sort of resembles an error<span style="color:red;">™</span> message, but nothing I’ve ever seen before.</p>
<p>As a freelancer, I’ve always been proud to have the time to dedicate to learning<span style="color:red;">℠</span>. Keeping up with the industry, and being able to level up my skills on each new project, is very important to me.</p>
<p>But sometimes I struggled when I pushed myself that little bit too far. A few times I’ve had to request a lifeline from kind people on Twitter to pull me out of a hole. And then I feel a bit daft, having to admit my inadequacies on a social network in order to save myself from a worse situation.</p>
</td>
</tr>
</table>
Unicode does not have superscript or subscript glyphs for these characters so you have to modify the font style separately
http://jsfiddle.net/cy03eov1/8/embedded/result/
I just added
p span { }
and made the font smaller and moved it up by 8 pixels.
I noticed you mentioned your doing this for an email. While the above mentioned solution would work fine for a webpage, it's best not to use CSS in email, especially positioning attributes like position:relative;
You can achieve the same affect with tables though (see demo)
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="20" style="font-size:18px;">Line of text followed by a </td>
<td height="20">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="10" style="font-size:9px;">©</td>
</tr>
<tr>
<td height="10"><table border="0" cellpadding="0" cellspacing="0"><tr><td><table border="0" cellpadding="0" cellspacing="0"><tr><td></td></tr></table></td></tr></table></td><!-- this is a standard table spacer alternative to email shim -->
</tr>
</table>
</td>
<td height="20" style="font-size:18px;">character.</td>
</tr>
</table>
Takes a lot more work but works across all email clients.
I've been attempting to format an email template to work cross-client. I've tried different frameworks and I've read about compatibility issues, especially with Outlook. Although I've been able to format the template to display pretty well in Outlook, I'm still having an issue where there are large spaces between words. It does not happen in every paragraph and it seems to only happen with one or two words at a time. I've taken this screenshot for reference. Notice the disclaimer text under the 'Chocolate World' section.
Here is the code for that section, all styles are inline. Is there a compatibility issue with any of the inline styles that might be causing this issue?
<table align="left" cellpadding="0" cellspacing="0" class="deviceWidth" style="width: 33%;">
<tbody>
<tr>
<td style="padding: 0 10px 20px 10px;" align="center" valign="top">
<p style="mso-table-lspace: 0; mso-table-rspace: 0; margin: 0;"><img align="left" alt="" border="0" class="deviceWidth" src="http://www.ctsciencecenter.org/cm_mailer/impact/chocolate-world-expo_impaCT.jpg" style=" width: 128px;padding:0px 0px 0px 10px;" width="128" /></p>
</td>
</tr>
<tr>
<td style="padding: 0 10px 20px 10px;"><a style="text-decoration: none; font-size: 16px; color: #333; font-weight: bold; font-family: Arial, sans-serif;" href="#">Chocolate World Expo</a>
<p style="color: #333; text-align: left; font-size: 12px; line-height: 24px;"><strong>April 27, 10AM–7PM<br />
Special Member Pricing:<br />
$15 Adults, $10 Youth<br />
Coupon Code: Bonbon</strong></p>
<p style="color: #333; text-align: left; font-size: 12px; line-height: 24px;">Sample chocolate offerings, baked goods, cheeses and gelato that will perk up your taste buds. Enjoy a different treat with every step. All of these delicious items will be available for purchase! Visit Chocolate World Expo on the web to find what you fancy.<br /><br /><strong style="font-size:11px;">Please note that we will be CLOSED to the public on April 27. Purchasing tickets in advance is highly recommended.</strong></p>
<table align="left" style="width: 90px;">
<tbody>
<tr>
<td style="padding: 10px 16px; background-color: #666; border-top: 1px solid #eee; background-repeat: repeat-x;" align="center" bgcolor="#666"><a style="color: #FFF; font-size: 12px; font-weight: bold; text-align: center; text-decoration: none; font-family: Arial, sans-serif; -webkit-text-size-adjust: none;">Tickets » </a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Thank you for your help!
I'm not sure where your CSS is that is causing the text to justify (do you have it in your head <style>?), but it looks as though you are trying to prevent it happening locally as you are using text-align:left;.
text-align doesn't always work - in html email, you should instead use align="left" in your <td> element. This will affect all within it.
Example:
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left">
This text will align left
</td>
</tr>
</table>
Full text justification in narrow block of HTML is never going to look good. This has nothing to do with your styling, but rather the limitations of the text justification algorithm.
Since it cannot break-words and use hyphens to wrap (as you'll see in properly typeset magazines and books) you often end up with this exact problem. It's best to avoid full-justification unless you have much wider columns.
You could try using a soft hyphen:
or
Words which are to long to fit in a column, are broken in to two using a dash.
This dash can be placed in every part of the sentence and will only show, if the word breaks at that soft hyphen.
Se this example:
averylongwordwillbreakwhenasofthyphenisaddedattherightspotandaddsadashtobreakthewordatthenextrowwithoutaddingtoomuchdashes
averylongwordwillbreakwhenasofthyphenisaddedattherightspotandaddsadashtobreakthewordatthenextrowwithoutaddingtoomuchdashes
Did you try add a align left and vertical align top to the td and set the width and height?
Replace all the td for
<td align="left" valign="top" width="value-image" height="value-image" > </td>
Also, you must to set up a display: block for any image
<img style="display:block;" height="value-image" width="value-image">
I hope to be helpful