Outlook software strips out the inline CSS in emails
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:[email protected]">[email protected]</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?
Answer
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.