Outlook 2010 and HTML Tables

Question

I am just creating some email newsletter, and I cannot figure out how force outlook to display my HTML table corectly.

There is simple example:

<table cellpadding="0" cellspacing="0" id="outlookHack" 
   style="table-layout:fixed; border: 0; background-color: #1E6C9D; 
          background-image: url(http://www.komix.cz/upload/img_bg.png); 
          background-repeat: repeat-y; margin-top: 0px; margin-bottom: 0px; 
          padding: 0px; margin-left: auto; margin-right: auto; 
          text-align: center;width: 620px;" width="620">
<tr>
  <td width="10" style="width: 10px; background:inherit;" height="10">&nbsp;</td>
  <td  width="600" style="width: 600px; background:ihnerit;" height="10"></td>
  <td width="10" style="width: 10px; background:inherit;" height="10">&nbsp;</td>
<tr>
<tr>
  <td width="10" style="width: 10px; background: inherit;">&nbsp;</td>
  <td  width="600" style="width: 600px; background: white;">some content...</td>
  <td width="10" style="width: 10px; background: inherit;">&nbsp;</td>
<tr>
</table>

The problem is, that left and right columns should have fixed size of 10px, but outlook 07/10 renders them as +/- 5px.

Answer 1

KISS -- Keep it simple (stupid)

Outlook 07-present uses Word's rendering engine, which is basically IE (which is dumb) further dumbed down. It forces you to code back to html 1 standards, and really limits what you can do. For starters, basically give up on complex CSS. It can be used (in-line) but much of it doesn't work. See this document on compatibility

So, using the compatibility chart, background support is almost non-existent....lose it. Background repeats are unsupported, and padding isn't really very well supported either.

Now, how to solve your padding problem? You could use cellpadding to add space, but that sometimes has undesirable effects on areas you don't want padded. Some people use nested tables to provide the necessary padding, using the outer to control the page layout and the inner table(s) to control the paragraph. Note that margins are also supported according to the doc, so you could use margins on paragraphs, ditching the 10 pixel left and right columns in favor of a paragraph with 10 pixel margins.

Also, note that you should avoid any shorthand CSS, i.e. border:1px solid #000

Thanks, Microsoft. While you're driving us UI Developers crazy with your regressing rendering engine quality and general avoidance of basic standards, you're also making us a lot of extra money.