Formatting html email for Outlook

Question

I have an html newsletter which works in most email clients  but the formatting is messed up in Outlook     lt  DOCTYPE html PUBLIC  -  W3C  DTD HTML 4 01 Transitional  EN   http   www w3 org TR html4 loose dtd  gt   lt html gt   lt head gt   lt meta http-equiv  Content-Type  content  text html  charset UTF-8  gt   lt style type  text css  gt    body       background-color   98AFC7        lt  style gt   lt title gt  lt  title gt   lt  head gt   lt body gt   lt table border  1px solid  cellspacing  0  cellpadding  10px  width  600  style  margin-left  auto  margin-right  auto  height auto  background-color   ffffff  margin-top  60px   gt       lt tr gt           lt td align  top  style  padding  10px  font-family  arial  font-size  12px    gt  lt center gt Email not displaying correctly  lt a href     gt  lt strong gt  View it in your browser lt  strong gt  lt  a gt  lt  center gt  lt  td gt       lt  tr gt       lt tr gt           lt td style  border  1px solid  height  80px  text-align  center  padding  10px   gt  lt img src  http   demo frostmiller com email img banner jpg  alt  Banner will go here  align  middle  style  border  1px solid   gt  lt  td gt       lt  tr gt       lt tr gt           lt td gt               lt table style  border  0  cellspacing  0  cellpadding  10px  height  auto   gt                   lt tr gt                       lt td valign  baseline  style  padding  10px  width 400px  border  1px solid  halign  top   gt                       lt h3 gt Top Stories lt  h3 gt                            lt ul gt                               lt li gt Topic 1 lt  li gt                               lt li gt Topic 2 lt  li gt                               lt li gt Topic 3 lt  li gt                           lt  ul gt                               lt p gt Lorem Ipsum is simply dummy text of the printing and typesetting industry  Lorem Ipsum has been the industry s standard dummy text ever since the 1500s  when an unknown printer took a galley of type and scrambled it to make a type specimen book  It has survived not only five centuries  but also the leap into electronic typesetting  remaining essentially unchanged  It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages  and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum  lt  p gt                       lt  td gt                       lt td valign  baseline  style  padding  10px  border  1px solid   gt                           lt h3 gt Latest News lt  h3 gt                           lt p gt                          Lorem Ipsum is simply dummy text of the printing and typesetting industry  Lorem Ipsum has been the industry s standard dummy text ever since the 1500s  when an unknown printer took a galley of type and scrambled it to make a type specimen book  It has survived not only five centuries  but also the leap into electronic typesetting                             lt  p gt                       lt  td gt                   lt  tr gt               lt  table gt                           lt  td gt       lt  tr gt       lt tr gt           lt td cellpadding  10px  style  border  1px solid  cellspacing  0   width  100   height  auto  text-align  center   gt               lt strong gt Copyright  amp copy 2011 Frost Miller Group  lt  strong gt           lt  td gt       lt  tr gt       lt tr gt           lt td style  border  1px solid  cellspacing  0  cellpadding  10px  width  100   height  auto  gt               lt center gt               lt a href     gt Contact Us lt  a gt               amp nbsp               lt a href     gt Terms of Use lt  a gt               amp nbsp               lt a href     gt Trademarks lt  a gt               amp nbsp               lt a href     gt Privacy Statement lt  a gt               amp nbsp               lt a href     gt Site Feedback lt  a gt               lt  center gt           lt  td gt       lt  tr gt       lt  table gt   lt  body gt   lt  html gt    What changes do I need to make in order to get it to display correctly in Outlook

User · Answer

I used VML Vector Markup Language  based formatting in my email template  In VML Based you have write your code within comment   I took help from this site    https   litmus com blog a-guide-to-bulletproof-buttons-in-email-design supporttable

User · Answer

To be able to give you specific help  you s have to explain what particular parts specifically  get messed up   or perhaps offer a screenshot  It also helps to know what version of Outlook you encounter the problem in   Either way  CampaignMonitor com s CSS guide has often helped me out debugging email client inconsistencies   From that guide you can see several things just won t work well or at all in Outlook  here are some highlights of the more important ones    Various types of more sophisticated selectors  e g  E first-child  E hover  E  gt  F  Child combinator   E   F  Adjacent sibling combinator   E   F  General sibling combinator   This unfortunately means resorting to workarounds like inline styles  Some font properties  e g  white-space won t work  The background-image property won t work  There are several issues with the Box Model properties  most importantly height  width  and the max- versions are either not usable or have bugs for certain elements  Positioning and Display issues  e g  display  floats and position are all out     In short  combining CSS and Outlook can be a pain  Be prepared to use many ugly workarounds   PS  In your specific case  there are two minor issues in your html that may cause you odd behavior  There s  align top  where you probably meant to use vertical-align  Also  cell-padding for tds doesn t exist

User · Answer

You should definitely check out the MSDN on what Outlook will support in regards to css and html  The link is here  http   msdn microsoft com en-us library aa338201 v office 12  aspx  If you do not have at least office 2007 you really need to upgrade as there are major differences between 2007 and previous editions  Also try saving the resulting email to file and examine it with firefox you will see what is being changed by outlook and possibly have a more specific question to ask  You can use Word to view the email as a sort of preview as well  but you won t get info on what styles are are not being applied

[html] Formatting html email for Outlook

Examples related to html

Examples related to css

Examples related to outlook