title: Outlook software strips out the inline CSS in emails
body: <p>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. </p>
  
  <p>One example is:</p>
  
  <pre><code>&lt;a href="https://www.facebook.com/BePureApparel" target="_blank"&gt;&lt;img style="width: 35px;" src="{img_dir}fb.png" /&gt;&lt;/a&gt;
  
  //The image width is stripped out and the original size is used to display
  </code></pre>
  
  <p>Are there any fixes for this? </p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/strict.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
      &lt;title&gt;Welcome to Pure Apparel&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;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);"&gt;
  &lt;tbody&gt;
  &lt;tr&gt;
  &lt;td class="space" style="width: 20px; padding: 7px 0;"&gt;&amp;nbsp;&lt;/td&gt;
  &lt;td align="center" style="padding: 7px 0;"&gt;
  &lt;table class="table" bgcolor="#ffffff" style="max-width: 650px; width: 100%; border-collapse: collapse; margin: auto;"&gt;
  &lt;tbody&gt;
  &lt;tr&gt;
  &lt;td colspan="2" align="center" class="logo" style="padding: 7px 0;"&gt;&lt;a title="{shop_name}" href="{shop_url}" style="color: #337ff1;"&gt; &lt;img src="{shop_logo}" alt="{shop_name}" /&gt; &lt;/a&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td colspan="2" align="center" class="titleblock" style="border-bottom: 1px solid #636566; border-top: 1px solid #636566; padding: 7px 0;"&gt;&lt;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;"&gt;New-In&lt;/a&gt; &lt;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;"&gt;Women&lt;/a&gt; &lt;!--&lt;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;"&gt;Men&lt;/a&gt;--&gt; &lt;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;"&gt;Lookbook&lt;/a&gt; &lt;a href="http://pureapparel.me/" style="font-weight: 500; font-size: 17px; line-height: 26px; width: 25%; float: left; color: #555454; text-decoration: none;"&gt;Be-pure blog&lt;/a&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td colspan="2"&gt;&lt;a href="{shop_url}content/24-international-shipping"&gt;&lt;img style="width: 100%; display: block;" src="{img_dir}en/welcome.jpg" /&gt;&lt;/a&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr style="border-bottom: 1px solid #636566; text-align: center;"&gt;
  &lt;td style="padding: 10px 0px;"&gt;
  &lt;h3 style="margin-top: 5px;"&gt;New Collection&lt;/h3&gt;
  &lt;p&gt;Enjoy online shopping with our easy check out process and reliable door to door courier service.&lt;/p&gt;
  &lt;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"&gt;Shop now&lt;/a&gt;&lt;/td&gt;
  &lt;td style="padding: 10px 0px;"&gt;&lt;img style="width: 200px;" src="{img_dir}box1.jpg" /&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr style="border-bottom: 1px solid #636566; text-align: center;"&gt;
  &lt;td style="padding: 10px 0px;"&gt;&lt;img style="width: 200px;" src="{img_dir}box2.jpg" /&gt;&lt;/td&gt;
  &lt;td style="padding: 10px 0px;"&gt;
  &lt;h3&gt;be-pure blog&lt;/h3&gt;
  &lt;p&gt;With access to our be-pure blog, be the first to know about our newest design, latest yoga &amp; fitness trends and community events.&lt;/p&gt;
  &lt;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"&gt;View blog&lt;/a&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr style="border-bottom: 1px solid #636566;"&gt;
  &lt;td colspan="2" style="padding: 10px 0px;"&gt;
  &lt;h3&gt;Have a Question?&lt;/h3&gt;
  &lt;div style="width: 100%; text-align: center;"&gt;&lt;img style="width: 120px; margin-right: 10px;" src="{img_dir}en/q1.jpg" /&gt; &lt;img style="width: 120px; margin-right: 10px;" src="{img_dir}en/q2.jpg" /&gt; &lt;img style="width: 120px;" src="{img_dir}en/q3.jpg" /&gt;&lt;/div&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr style="text-align: center;"&gt;
  &lt;td colspan="2"&gt;
  &lt;p&gt;Stay connected with us&lt;/p&gt;
  &lt;div&gt;&lt;a href="https://www.facebook.com/BePureApparel" target="_blank"&gt;&lt;img style="width: 35px;" src="{img_dir}fb.png" /&gt;&lt;/a&gt; &lt;a href="https://twitter.com/be_pureapparel" target="_blank"&gt;&lt;img style="width: 35px;" src="{img_dir}tw.png" /&gt;&lt;/a&gt; &lt;a href="http://instagram.com/be_pureapparel" target="_blank"&gt;&lt;img style="width: 35px;" src="{img_dir}ig.png" /&gt;&lt;/a&gt;&lt;/div&gt;
  &lt;p&gt;Please add &lt;a style="text-decoration: none; color: #58595b;" href="mailto:newsletter@be-pure.com"&gt;newsletter@be-pure.com&lt;/a&gt; to your approved senders or address book.&lt;/p&gt;
  &lt;p&gt;If you do not wish to receive any eNews, please click here to update your preferences or &lt;a href="{my_account_url}" style="color: #58595b;"&gt;unsubscribe&lt;/a&gt; from this list&lt;/p&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td colspan="2"&gt;
  &lt;p style="float: left; text-align: center; width: 25%;"&gt;@2015 Pure Retail Ltd.&lt;/p&gt;
  &lt;p style="float: left; text-align: center; width: 25%;"&gt;&lt;a href="{shop_url}" style="text-decoration: none; color: #58595b;"&gt;www.be-pure.com&lt;/a&gt;&lt;/p&gt;
  &lt;p style="float: left; text-align: center; width: 25%;"&gt;&lt;a href="{shop_url}content/3-terms-and-conditions-of-use" style="text-decoration: none; color: #58595b;"&gt;Terms &amp; Conditions&lt;/a&gt;&lt;/p&gt;
  &lt;p style="float: left; text-align: center; width: 25%;"&gt;&lt;a href="{shop_url}content/15-privacy-policy" style="text-decoration: none; color: #58595b;"&gt;Privacy Policy&lt;/a&gt;&lt;/p&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;/td&gt;
  &lt;td class="space" style="width: 20px; padding: 7px 0;"&gt;&amp;nbsp;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>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?</p>
  
  <p><strong>Update (29/11/2015):</strong></p>
  
  <p>So, I finally found out that <code>width:50px</code> is not working, I have to use <code>width="50"</code> to control the size, as I only need to support Outlook 2013 and later versions, I wonder:</p>
  
  <ol>
  <li><p>Is it true that Outlook 2013 doesn't support inline CSS like <code>width:50px</code> on IMG tags?</p></li>
  <li><p>If it does support it, does the problem lie on the email server instead? </p></li>
  <li><p>Are there any easier ways to convert my template to support Outlook 2013?</p></li>
  </ol>