css padding is not working in outlook

html css email outlook outlook-2010

Mukesh · Jan 31, 2014 · Viewed 145.2k times · Source

I have following html in 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 outlook

How to fix this?

Answer

Unfortunately, when it comes to EDMs (Electronic Direct Mail), Outlook is your worst enemy. Some versions don't respect padding when a cell's content dictates the cell dimensions.

The approach that'll give you the most consistent result across mail clients is to use empty table cells as padding (I know, the horror), but remember to fill those tables with a blank image of the desired dimensions because, you guessed it, some versions of Outlook don't respect height/width declarations of empty cells.

Aren't EDMs fun? (No. They are not.)

css padding is not working in outlook

Answer

Related questions