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 created an hr line but when I view it on other browsers, the color I set for it doesn't retain and it defaults to a grey color. Is there another code I could use to create a line? I also need to create two lines to be stacked on top of each other. Thanks!
Here's the code!
<tr>
<td><table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 30px 0 0; font-family: Century gothic; font-weight: bold; text-align: center; mso-height-rule: exactly; color: #4F2C1D"><span style="font-size: 40px;">FIRSTNAME LASTNAME</span><br><span style="font-size: 20px; color: #4F2C1D">(415) 333-3333<br>john.doe#gmail.com</span>
<br><br><hr width="60%" size="8" align="center" color="B7DD79"><br>
</td>
</tr>
</table></td>
</tr>
<hr> layout attributes are removed in HTML5, possibly the browser it's "working" on allows you to use the outdated version. Try using a CSS file to style it instead.
source
It's hard to answer with no code provided.
Firstly try adding
hr {
clear: both;
}
to the css to clear floating elements.
Secondly you could always make an empty div with a border bottom which should work?
What is the best way to specify the font-family when coding emails for Outlook 2013? I have found that font-family is ignored when it is added inline like this:
<span style="font-family: Helvetica, Arial, sans-serif;">Text</span>
I have found that this works:
<span><font face="Helvetica, Arial, sans-serif">Text</font></span>
However, this is a pain as I have to add the tag everywhere that text is added. Wrapping a tag around several elements is ignored. Is there a way that I can set the font once and forget about it?
I had this problem and found the following post that fixed the issue:
https://litmus.com/community/discussions/982-outlook-overrides-font-to-times-new-roman
Basically, you need to add the following conditional css style snippet right after the body tag in the email template you want Outlook to take the desired font-family (in this case Arial, Helvetica or San-Serif) instead of the sticky MSO Times-New-Roman font:
<!--[if mso]>
<style type="text/css">
body, table, td {font-family: Arial, Helvetica, sans-serif !important;}
</style>
<![endif]-->
An effective way to force Outlook 2013 to use specified font stack is to wrap the text in question in a <span> and to use !important when defining the font-family. Outlook will still remove any Google fonts that are defined in the head, but other email clients will use them. Here is an example:
<head>
<link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
</head>
<body>
<table>
<tr>
<td style="font-family: Helvetica, Arial, sans-serif; font-size: 12px;">
This will always be Helvetica.
</td>
</tr>
</table>
<table>
<tr>
<td style="font-family: 'Indie Flower', Helvetica, Arial, sans-serif; font-size: 12px;">
Outlook will display Times New Roman. Others will display Helvetica or Indie Flower.
</td>
</tr>
</table>
<table>
<tr>
<td style="font-family: Helvetica, Arial, sans-serif; font-size: 12px;">
<span style="font-family: 'Indie Flower', Helvetica, Arial, sans-serif !important;">
Outlook will display Helvetica, others will display Indie Flower.
</span>
</td>
</tr>
</table>
</body>
This came from this awesome article: https://www.emailonacid.com/blog/article/email-development/custom-font-stacks-in-outlook
I just wanted to point out something about this font issue, that it isn't necessary to put your font-family declaration inside the body tag as CoderRoller mentioned in the previous answers.
Also I found something else about this issue, I was using a google Api's font inside the of the email like this:
And then inside the body tag:
<!--[if mso]>
<style type="text/css">
body, table, td {font-family: 'Playfair Display', Helvetica, sans-serif !important;}
</style>
<![endif]-->
But Outlook doesn't agree with having a custom font like that, so then it ignores all the other fallbacks of fonts that are after your custom font, so if this is your case then just remove the custom google font, and use something like:
<!--[if mso]>
<style type="text/css">
body, table, td {font-family: Arial, Helvetica, sans-serif !important;}
</style>
<![endif]-->
I have currently this css style in the head of the HTML, I tested this with litmus, and it doesn't matter if you have the declaration inside the body tag, or in the head tag.
How are you building your emails? If you are using tables then
<td style="font-family: Helvetica, Arial, sans-serif;">
Will work fine in ANY client. Only need to use a span if part of the text in the differs from the rest.
Outlook 2013 DOES NOT ignore in the header. I know this because I've built a lot of emails and I style a:visited in the header so Outlook (specifically) doesn't change them purple and it definitely works!
EDIT: A more accurate answer would be for me to say no unfortunately you have to specify the style inline everytime. (Didn't see that bit of the Question at first!)
Snippet:
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="font-family: arial, helvetica, sans-serif; font-size: 14px; line-height: 18px; text-align: center; color: #000000;">
Some text here.....
</td>
</tr>
</table>
There is a very simple solution that works.
Just wrap everything inside the deprecated font element!
<font face="Arial">
<!-- content -->
</font>
Unfortunately in my experience the font tag is the only thing that works consistently on Outlook (and Windows Phone, go figure). You're going to want to add the standard CSS inline for your text as well because some clients don't render font's face attribute.
Custom font is not a universally supported feature.
AOL Mail
Native Android mail app (not Gmail app)
Apple Mail
iOS Mail
Outlook 2000
Outlook.com app
Outlook iOS
Are the only email clients that support custom web fonts.
a useful article.
https://litmus.com/blog/the-ultimate-guide-to-web-fonts
I made an html email on dreamweaver, and used margin for some text.
for example:
<td width="453" height="115" bgcolor="#18b581"><p style="font-family: Arial, Helvetica, sans-serif; margin-left: 25px;"><strong><font size="4">Hello world?</font>
this shows perfect in dreamweaver. when i send it through outlook, i save it as outlook template. i send it to my outlook account and my hotmail. the margins work on my outlook, but the margins does not sure on hotmail, i have no idea why!!
update:
<td colspan="2" bgcolor="#FFFFFF"><h3 style="font-family: Arial, Helvetica, sans-serif; color:#1d95a5; padding-left: 25px; padding-top:30px; ">What are the benefits of the NP-C directory?</h3>
<p style="font-family: Arial, Helvetica, sans-serif; color:#555555; font-size:15px; padding-left: 25px; padding-right: 22px; padding-top:-20px;">The NP-C directory offers you the opportunity to: </p>
<ul style="font-family: Arial, Helvetica, sans-serif; color:#555555; font-size:15px; padding-left: 80px; padding-right: 51px; padding-top:-12px;">
<li><strong>Connect</strong> with healthcare professional colleagues in your local country/area who have a shared interest in NP-C</li>
<li><strong>Network</strong> with healthcare professionals around the world to share experiences of NP-C</li>
<li><strong>Exchange</strong> the latest news and information about NP-C</li>
</ul>
Margin is not supported in Outlook.com. Instead use padding in the parent <td> element.
Don't do this:
<td>
<p style="margin-left:25px;">Paragraph</p>
</td>
Instead do this:
<td style="padding-left:25px;">
<p>Paragraph</p>
</td>
Yup, welcome to the hazards of HTML email!
Check out the email standards project, they keep a catalog of all the differences between various browsers.
Best suggestion is to try and avoid relying on padding and margins and instead use fixed width table cells to position elements.
Trying to fix something for an email. Screenshot of problem here: http://imgur.com/pEQvVqf
There is basically a 600width table that I need the same background color and text color as the rest of the email.
Yet as you see either side is white - what do I do here? Make two tables to the left and right? And make them grey or can I make the text stay like it is and make the table width 100%? Because that skews my text formatting.
Any help greatly appreciated - here is my code (couldnt format properly with 4 spacing so used backquotes:
<table width="600" height="21" border="0" cellspacing="0" cellpadding="0" align="center" style="background-color:#ccc;font-family:verdana; font-size:10px; color:FFFFFF">
<tr>
<td colspan="2" align="center" style="font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#000000; padding:10px 10px 0px 10px;">
<font style="font-family:arial;font-size:10px;">
You have received this email from an independent marketing company x x x x x x x .Company Reg. No.03976500 You have registered to receive our email advertising from one of our sites, and may unsubscribe from this newsletter by clicking here<br> For more information on how we use your data, please read our privacy policy.
</font>
</td>
</tr>
</table>
Cheers
Just add this css - body:background-color:#123456;
Try something like this:
<div style="background-color:#ccc; font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#000000; color:#fff; width:100%">
<div style="width:600px; margin: 0 auto; padding: 10px 10px 0 10px;">
You have received this email from an independent marketing company x x x x x x x .Company Reg. No.03976500 You have registered to receive our email advertising from one of our sites, and may unsubscribe from this newsletter by clicking here<br> For more information on how we use your data, please read our privacy policy.
</div>
</div>
Just use a div tag and some special CSS classes.
<div style="background-color:#ccc;font-family:arial;font-size:10px;">
<table style="width: 600px;margin:0 auto;font-family:verdana;color:FFFFFF;">...</table>
</div>