htmlcssemailoutlookoutlook-2010

CSS padding is not working as expected in Outlook


I have the following html in an email template.

I am getting different view in MS Outlook and in Gmail for the same.

<tr>
    <td bgcolor="#7d9aaa" style="color: #fff; font-size:15px; font-family:Arial, Helvetica, sans-serif; padding: 12px 2px 12px 0px; ">
    <span style="font-weight: bold;padding-right:150px;padding-left: 35px;">Order Confirmation </span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <span style="font-weight: bold;width:400px;"> Your Confirmation number is {{var order.increment_id}} </span></td>
</tr>

In Gmail In gmail

In Outlook In outlook

How to fix this?


Solution

  • 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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <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>