Outlook software strips out the inline CSS in emails
Question
I have an email like the following. The problem is, it works fine on Gmail, but on outlook, all CSS inline statements don't work.
One example is:
<a href="https://www.facebook.com/BePureApparel" target="_blank"><img style="width: 35px;" src="{img_dir}fb.png" /></a>
//The image width is stripped out and the original size is used to display
Are there any fixes for this?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Welcome to Pure Apparel</title>
</head>
<body>
<table class="table table-mail" style="width: 100%; margin-top: 10px; -moz-box-shadow: 0 0 5px #afafaf; -webkit-box-shadow: 0 0 5px #afafaf; -o-box-shadow: 0 0 5px #afafaf; box-shadow: 0 0 5px #afafaf; filter: progid:DXImageTransform.Microsoft.Shadow(color=#afafaf,Direction=134,Strength=5);">
<tbody>
<tr>
<td class="space" style="width: 20px; padding: 7px 0;"> </td>
<td align="center" style="padding: 7px 0;">
<table class="table" bgcolor="#ffffff" style="max-width: 650px; width: 100%; border-collapse: collapse; margin: auto;">
<tbody>
<tr>
<td colspan="2" align="center" class="logo" style="padding: 7px 0;"><a title="{shop_name}" href="{shop_url}" style="color: #337ff1;"> <img src="{shop_logo}" alt="{shop_name}" /> </a></td>
</tr>
<tr>
<td colspan="2" align="center" class="titleblock" style="border-bottom: 1px solid #636566; border-top: 1px solid #636566; padding: 7px 0;"><a href="{shop_url}56-new-in" style="font-weight: 500; font-size: 17px; line-height: 26px; width: 25%; float: left; color: #555454; text-decoration: none;">New-In</a> <a href="{shop_url}23-women" style="font-weight: 500; font-size: 17px; line-height: 26px; width: 25%; float: left; color: #555454; text-decoration: none;">Women</a> <!--<a href="{shop_url}40-men" style="font-weight:500;font-size:17px;line-height:26px;width:20%;float:left;color:#555454;text-decoration:none;">Men</a>--> <a href="{shop_url}content/7-fw15" style="font-weight: 500; font-size: 17px; line-height: 26px; width: 25%; float: left; color: #555454; text-decoration: none;">Lookbook</a> <a href="http://pureapparel.me/" style="font-weight: 500; font-size: 17px; line-height: 26px; width: 25%; float: left; color: #555454; text-decoration: none;">Be-pure blog</a></td>
</tr>
<tr>
<td colspan="2"><a href="{shop_url}content/24-international-shipping"><img style="width: 100%; display: block;" src="{img_dir}en/welcome.jpg" /></a></td>
</tr>
<tr style="border-bottom: 1px solid #636566; text-align: center;">
<td style="padding: 10px 0px;">
<h3 style="margin-top: 5px;">New Collection</h3>
<p>Enjoy online shopping with our easy check out process and reliable door to door courier service.</p>
<a style="display: block; text-align: center; width: 100px; color: #ffffff; background-color: #58595b; padding: 8px; margin: auto; margin-bottom: 5px; text-decoration: none;" href="{shop_url}" target="_blank">Shop now</a></td>
<td style="padding: 10px 0px;"><img style="width: 200px;" src="{img_dir}box1.jpg" /></td>
</tr>
<tr style="border-bottom: 1px solid #636566; text-align: center;">
<td style="padding: 10px 0px;"><img style="width: 200px;" src="{img_dir}box2.jpg" /></td>
<td style="padding: 10px 0px;">
<h3>be-pure blog</h3>
<p>With access to our be-pure blog, be the first to know about our newest design, latest yoga & fitness trends and community events.</p>
<a style="display: block; text-align: center; width: 100px; color: #ffffff; background-color: #58595b; padding: 8px; margin: auto; text-decoration: none;" href="http://pureapparel.me/" target="_blank">View blog</a></td>
</tr>
<tr style="border-bottom: 1px solid #636566;">
<td colspan="2" style="padding: 10px 0px;">
<h3>Have a Question?</h3>
<div style="width: 100%; text-align: center;"><img style="width: 120px; margin-right: 10px;" src="{img_dir}en/q1.jpg" /> <img style="width: 120px; margin-right: 10px;" src="{img_dir}en/q2.jpg" /> <img style="width: 120px;" src="{img_dir}en/q3.jpg" /></div>
</td>
</tr>
<tr style="text-align: center;">
<td colspan="2">
<p>Stay connected with us</p>
<div><a href="https://www.facebook.com/BePureApparel" target="_blank"><img style="width: 35px;" src="{img_dir}fb.png" /></a> <a href="https://twitter.com/be_pureapparel" target="_blank"><img style="width: 35px;" src="{img_dir}tw.png" /></a> <a href="http://instagram.com/be_pureapparel" target="_blank"><img style="width: 35px;" src="{img_dir}ig.png" /></a></div>
<p>Please add <a style="text-decoration: none; color: #58595b;" href="mailto:newsletter@be-pure.com">newsletter@be-pure.com</a> to your approved senders or address book.</p>
<p>If you do not wish to receive any eNews, please click here to update your preferences or <a href="{my_account_url}" style="color: #58595b;">unsubscribe</a> from this list</p>
</td>
</tr>
<tr>
<td colspan="2">
<p style="float: left; text-align: center; width: 25%;">@2015 Pure Retail Ltd.</p>
<p style="float: left; text-align: center; width: 25%;"><a href="{shop_url}" style="text-decoration: none; color: #58595b;">www.be-pure.com</a></p>
<p style="float: left; text-align: center; width: 25%;"><a href="{shop_url}content/3-terms-and-conditions-of-use" style="text-decoration: none; color: #58595b;">Terms & Conditions</a></p>
<p style="float: left; text-align: center; width: 25%;"><a href="{shop_url}content/15-privacy-policy" style="text-decoration: none; color: #58595b;">Privacy Policy</a></p>
</td>
</tr>
</tbody>
</table>
</td>
<td class="space" style="width: 20px; padding: 7px 0;"> </td>
</tr>
</tbody>
</table>
</body>
</html>
Actually, the source code does not strip the CSS, but when the page is viewed, Outlook acts as if the CSS is stripped out, any idea?
Update (29/11/2015):
So, I finally found out that width:50px is not working, I have to use width="50" to control the size, as I only need to support Outlook 2013 and later versions, I wonder:
Is it true that Outlook 2013 doesn't support inline CSS like
width:50pxon IMG tags?If it does support it, does the problem lie on the email server instead?
Are there any easier ways to convert my template to support Outlook 2013?
2 answers
solution1
13 ACCPTED 2015-11-29 13:25:40
Outlook uses a different way of executing stylesheet. Is not SMTP settings or email settings. It depends on how the email service like Gmail, Outlook and Yahoo displays the CSS. How Outlook styles = How IE styles.
I've used Mailchimp did this for every p element I used and it does not looks exactly the same in Outlook and Gmail but is the closest I can get.
<p class="MsoNormal" style="text-align:justify; line-height:150%; font-family:Arial, Helvetica, sans-serif;">
The guide I used for Outlook is this. Do note that you have to join their community ( free) to get the Outlook guide, which I think is worth it and save you the trouble. https://www.emailonacid.com/resources
The previous link should explain to you but if you want more information, you can always look the below two links that I used as well.
For Outlook/Hotmail, they usually have a mso syntax in front of the styling like http://templates.mailchimp.com/development/css/outlook-conditional-css/
For certain elements that email provider use, you can refer here. https://www.campaignmonitor.com/css/
Spend some time creating a email template that works for all email services and modify it next time to suit your needs saves much more time and effort than starting from scratch.
solution2
5 2015-12-04 11:55:46
Outlook doesn't ignore inline styles. It doesn't understand quite a few CSS properties though. Things which today we take for granted: floats, margins, padding. Campaign Monitor have a very good table of which things will work in which email clients .
You can almost always get around this with lots and lots of nested tables. It's ugly but it's cross-platform and that's all that matters.
Sometimes in email marketing you have to accept that it's not going to look 100% identical in every email client and that's okay . As long as it looks good in every client, it doesn't matter if there is 2px extra spacing here and there.
Email marketing is often about progressive enhancement. You do the best you can for the people using Lotus Notes and other old clients and you add the finishing touches for the people using Gmail on Chrome. For example, even though Outlook doesn't support media queries, you can still (and probably should) use them because other clients will. The nice thing about that is that if an email client supports media queries, chances are they also support more modern things like floats, so you're able to use properties like that within the media queries if you want.
CSS-tricks have a fairly good article which discusses thegeneral sort of methodology you should follow .
Writing HTML emails is largely a matter experience. Do it enough and you'll figure out the different ways you have to do things compared to writing it for the web. I highly recommend testing anything you do through Litmus , especially if you're producing work for a client. Supposedly Email On Acid is also good. They will show you how your email renders in almost any email client. They are subscription services but there really isn't any comparable free service I'm aware of.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.