CSS Styling Won't Work in Outlook 2010

CSS Styling won't work in outlook 2010?

Unfortunately Outlook supports something roughly equivalent to IE5 compatible HTML. It's really terrible. Here's a detailed MSDN article on the Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007, which I don't believe changed much for Outlook 2010.

Honestly, the only way I've been able to get outlook HTML to look the way I want is to hand generate the HTML using roughly HTML2 standard tags and properties and not using CSS at all. Some CSS renders, but it's really hit or miss.

outlook 2010 email background color html/css property does not work

You can replace it with this code below and use bgcolor in table tag or td tag or add style to table tag and include background style.

I also added Screenshot showing its working in outlook 2010

<table width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="red" style="background: red;">

  <tr>

    <td height="70" bgcolor="red"></td>

  </tr>

</table>

Div styles not working in Outlook Emails

Float width and position CSS styles applied to div's do not work in Outlook.

• Link Now Dead - https://www.campaignmonitor.com/blog/post/3472/div-tags-in-html-email-newsletters/ (See table half way down)

This is the primary reason while Tables are still used so heavily in Emails.

css padding is not working in outlook

I changed to following and it worked for me

<tr>
    <td bgcolor="#7d9aaa" style="color: #fff; font-size:15px; font-family:Arial, Helvetica, sans-serif; padding: 12px 2px 12px 0px; ">                              
        <table style="width:620px; border:0; text-align:center;" cellpadding="0" cellspacing="0">               
            <td style="font-weight: bold;padding-right:160px;color: #fff">Order Confirmation </td>                    
            <td style="font-weight: bold;width:260px;color: #fff">Your Confirmation number is {{var order.increment_id}} </td>              
        </table>                    
    </td>
</tr>

Update based on Bsalex request what has actually changed.
I replaced span tag

<span style="font-weight: bold;padding-right:150px;padding-left: 35px;">Order Confirmation </span>     
<span style="font-weight: bold;width:400px;"> Your Confirmation number is {{var order.increment_id}} </span>

with table and td tags as following

   <table style="width:620px; border:0; text-align:center;" cellpadding="0" cellspacing="0"> 
      <td style="font-weight: bold;padding-right:160px;color: #fff">Order Confirmation </td>
      <td style="font-weight: bold;width:260px;color: #fff">Your Confirmation number is {{var order.increment_id}} </td>
   </table>

Border-radius property not working in outlook

border-radius property is not supported by outlook, as it uses MS-word template. we need to code for outlook too. Please find the below piece of code which will work for both outlook and browser or other email clients.

<td>
  <div>
    <!--[if mso]>
      <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://example.com" style="height:36px;v-text-anchor:middle;width:150px;" arcsize="5%" strokecolor="#EB7035" fillcolor="#EB7035">
        <w:anchorlock/>
        <center style="color:#ffffff;font-family:Helvetica, Arial,sans-serif;font-size:16px;">I am a button →</center>
      </v:roundrect>
    <![endif]-->
    <a href="http://example.com" style="background-color:#EB7035;border:1px solid #EB7035;border-radius:3px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:16px;line-height:44px;text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;mso-hide:all;">I am a button →</a>
  </div>
</td>

---

Related Topics