Outlook 2010 and HTML Sheets

Question

I'm just creating an email newsletter and I can't figure out how the forceful look displays my HTML table in different ways.

There is a 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 the left and right columns should have a fixed size of 10px, but Outlook 07/10 displays them as +/- 5px.

Answer 1

KISS - Keep It Simple (Stupid)

Outlook 07-present uses the Word rendering engine, which is basically IE (which is dumb) even more muffled. This forces you to rewrite the html 1 code and really limits what you can do. To get started, basically abandon complex CSS. It can be used (in line), but most of it does not work. See this compatibility document.

So, using the compatibility chart, there is practically no support for the background .... lose it. Background repeats are not supported, and the addition is not well supported.

Now, how to solve the filling problem? You can use cellpadding to add space, but sometimes it has an undesirable effect on areas that you don't want to pad. Some people use nested tables to provide the necessary fill-in, using an external one to control the layout of the page and an internal table (s) to control the paragraph. Note that margins are also supported according to the document, so you can use margins in paragraphs by placing 10-position left and right columns in favor of a paragraph with margins of 10 pixels.

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

Thanks, Microsoft. While you make UI developers go crazy with regressive rendering quality and a general avoidance of basic standards, you also earn us a lot of extra money.