css padding is not working in outlook

Question

I have following html in email template   I am getting different view in MS Outlook and in gmail for the same    lt tr gt       lt td bgcolor   7d9aaa  style  color   fff  font-size 15px  font-family Arial  Helvetica  sans-serif  padding  12px 2px 12px 0px    gt       lt span style  font-weight  bold padding-right 150px padding-left  35px   gt Order Confirmation  lt  span gt  amp nbsp  amp nbsp  amp nbsp  amp nbsp  amp nbsp       lt span style  font-weight  bold width 400px   gt  Your Confirmation number is   var order increment id    lt  span gt  lt  td gt   lt  tr gt        How to fix this

User · 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

User · Answer

I changed to following and it worked for me   lt tr gt       lt td bgcolor   7d9aaa  style  color   fff  font-size 15px  font-family Arial  Helvetica  sans-serif  padding  12px 2px 12px 0px    gt                                         lt table style  width 620px  border 0  text-align center   cellpadding  0  cellspacing  0  gt                              lt td style  font-weight  bold padding-right 160px color   fff  gt Order Confirmation  lt  td gt                                   lt td style  font-weight  bold width 260px color   fff  gt Your Confirmation number is   var order increment id    lt  td gt                         lt  table gt                           lt  td gt   lt  tr gt    Update based on Bsalex request what has actually changed  I replaced span tag   lt span style  font-weight  bold padding-right 150px padding-left  35px   gt Order Confirmation  lt  span gt  amp nbsp  amp nbsp  amp nbsp  amp nbsp  amp nbsp   lt span style  font-weight  bold width 400px   gt  Your Confirmation number is   var order increment id    lt  span gt    with table and td tags as following       lt table style  width 620px  border 0  text-align center   cellpadding  0  cellspacing  0  gt          lt td style  font-weight  bold padding-right 160px color   fff  gt Order Confirmation  lt  td gt         lt td style  font-weight  bold width 260px color   fff  gt Your Confirmation number is   var order increment id    lt  td gt      lt  table gt

User · Answer

After doing many tests in Litmus  i could not find a way to have perfect rendering in all emails readers  but here is the better solution i found     lt table  width  100   cellpadding  0  cellspacing  0  style  background-color  333 color  fff border-radius 3px border-spacing 0    gt       lt tr gt           lt td style  width 12px    gt  amp nbsp  lt  td gt           lt td valign  middle  style  padding-top 6px padding-bottom 6px padding-right 0 padding-left 0    gt               lt span style  color  fff    gt  lt strong gt Your text here lt  strong gt  and here lt  span gt  lt  a gt           lt  td gt           lt td style  width 12px    gt  amp nbsp  lt  td gt       lt  tr gt   lt  table gt    In this piece of code  i aimed to emulate padding   6px 12px   There are 2  12px table columns  that handles the right and left padding   And I m using  padding  6px 0   on my td content  to manage top and bottom padding   Outlook 2010 and 2013 will ignore this and will use their own padding   The text won t be perfectly aligned in Outlook 2010 and Outlook 2013  slightly too far from top  but it works with all other email readers i tried   Apple Mail  Gmail  Outlook 2011  yes     Hotmail  Yahoo and many more   Preview image   Outlook 2010 and 2013 preview  Preview image   Gmail  Apple Mail and others

User · Answer

My solution is to use an empty   whichever is needed with a transparent spacer gif since padding isnt 100  supported    lt td width  2  style  font-size 1px  line-height 1px   bgcolor   FFFFFF  gt                                                                                                             lt img width  2  border  0  src  spacer50 gif  style  display block      padding 0  margin 0  border none     gt                                                                                                   lt  td gt

User · Answer

have you tried display inline-block

User · Answer

Do this instead    lt table width  100   border  0  cellpadding  0  cellspacing  0  gt     lt tr gt         lt td bgcolor   7d9aaa  width  40   style  color   ffffff  font-size 15px  font-family Arial  Helvetica  sans-serif  font-weight  bold  padding 12px   gt          Order Confirmation        lt  td gt         lt td bgcolor   7d9aaa  align  right  width  60   style  color   ffffff  font-size 15px  font-family Arial  Helvetica  sans-serif  font-weight  bold  padding 12px   gt          Your Confirmation number is   var order increment id          lt  td gt     lt  tr gt   lt  table gt    It is better to use two cells and align the content  than using large padding and  amp nbsp  s

User · Answer

All styling including padding have to be added to a td not a span   Another solution put the text into  lt p gt text lt  p gt  and define margins  and that should give the required padding   For example    lt p style  margin-top  10px  margin-bottom  10  margin-right  12  margin-left  12   gt text lt  p gt

User · Answer

I had the same problem and ended up actually using border instead of padding

User · Answer

Make sure to throw on the  important for Outlook especially    td   border-collapse  separate  padding  15  important     I also wanted borders  so might not work for someone who doesn t

User · Answer

To create HTML in email template that is emailer newsletter  padding margin is not supporting on email clients  You can take 1x1 size of blank gif image and use it    lt tr gt     lt td align  left  valign  top  style  background-color  7d9aaa   gt       lt table width  640  cellspacing  0  cellpadding  0  border  0  gt         lt tr gt           lt td align  left  valign  top  colspan  5  gt  lt img style  display block   src  images spacer gif  width  1  height  10   alt      gt  lt  td gt         lt  tr gt         lt tr gt           lt td align  left  valign  top  gt  lt img style  display block   src  images spacer gif  width  20  height  1   alt      gt  lt  td gt           lt td align  right  valign  top  gt  lt font face  arial  color   ffffff  style  font-size 14px   gt  lt a href     style  color  ffffff  text-decoration none  cursor pointer   target   blank  gt Order Confirmation lt  a gt  lt  font gt  lt  td gt           lt td align  left  valign  top  width  200  gt  lt img style  display block   src  images spacer gif  width  200  height  1   alt      gt  lt  td gt           lt td align  left  valign  top  gt  lt font face  arial  color   ffffff  style  font-size 14px   gt Your Confirmation Number is 260556 lt  font gt  lt  td gt           lt td align  left  valign  top  gt  lt img style  display block   src  images spacer gif  width  20  height  1   alt      gt  lt  td gt         lt  tr gt         lt tr gt           lt td align  left  valign  top  colspan  5  gt  lt img style  display block   src  images spacer gif  width  1  height  10   alt      gt  lt  td gt         lt  tr gt       lt  table gt   lt  td gt   lt  tr gt

User · Answer

Just use  lt Table cellpadding  10     gt       lt  Table gt  Don t use px Works in MS-Outlook

User · Answer

Avoid paddings and margins in newsletters  some email clients will ignore this properties  You can use empty tr and td as was suggested  but this will result in a lot of html   or you can use borders with the same border color as the background of the email  so  instead of padding-top  40px you can use border-top  40px solid  ffffff  assuming that the background color of the email is  ffffff  I ve tested this solution in gmail  and gmail for business   yahoo mail  outlook web  outlook desktop  thunderbird  apple mail and more  As far as I can tell  border property is pretty safe to use everywhere  Example    lt  -- With paddings  WON T WORK IN ALL EMAIL CLIENTS  -- gt   lt table gt        lt tr gt            lt td style  quot padding  10px 10px 10px 10px quot  gt               lt  -- Content goes here -- gt           lt  td gt        lt  tr gt    lt  table gt     lt  -- Same result with borders and same border color of the background -- gt   lt table gt        lt tr gt            lt td style  quot border  solid 10px  ffffff quot  gt              lt  -- Content goes here -- gt           lt  td gt        lt  tr gt    lt  table gt     lt  -- Same result using empty td tr   A lot more html than borders  get messy on large emails  -- gt   lt table gt        lt tr gt           lt td colspan  quot 3 quot  height  quot 10 quot  style  quot height  10px  line-height  1px quot  gt  amp nbsp  lt  td gt       lt  tr gt         lt tr gt            lt td width  quot 10 quot  style  quot width  10px  line-height  1px quot  gt  amp nbsp  lt  td gt            lt td gt  lt  --Content goes here-- gt  lt  td gt            lt td width  quot 10 quot  style  quot width  10px  line-height  1px quot  gt  amp nbsp  lt  td gt        lt  tr gt         lt tr gt           lt td colspan  quot 3 quot  height  quot 10 quot  style  quot height  10px  line-height  1px quot  gt  amp nbsp  lt  td gt       lt  tr gt    lt  table gt   lt  -- With tr td every property is needed  height must be setted both as attribute and style  same with width  line-height must be setted JIC default value is greater than actual height and without the  amp nbsp  some email clients won t render the column because is empty  You can remove the colspan and still will work  but is annoying when inspecting the element in browser not to see a perfect square table -- gt    In addition  here is an excelent guide to make responsive newsletters without mediaqueries  The emails really works everywhere  https   webdesign tutsplus com tutorials creating-a-future-proof-responsive-email-without-media-queries--cms-23919 And always remember to make styles inline  https   inliner cm  To test emails  here is a good resource  https   putsmail com  Finally  for doubts about css support in email clients you can go here  https   templates mailchimp com resources email-client-css-support  or here  https   www campaignmonitor com css

User · Answer

Padding will not work in Outlook  Instead of adding blank Image  you can simply use multiple spaces  amp  nbsp   before elements texts for padding left For padding top or bottom  you can add a div containing just spaces  amp  nbsp   alone  This will work

User · Answer

In some cases we set border instead of padding and it works in outlook    border  solid  efeeee border-width  20px 40px

[html] css padding is not working in outlook

Examples related to html

Examples related to css

Examples related to email

Examples related to outlook

Examples related to outlook-2010