This issue has come up a few times so I figured I would share it in the forums:
Every HTML element is essentially a box, the width of which is the total of its margin, border, padding and content area. Imagine the following CSS rule:
border: 1px solid #eee;
This means that each TD is 42px wide in total. This amount is made up of a 30px wide content area, a 5px padding on each side, and 1px border on each side.
In IE however, the border and padding are included in the width of the content, as opposed to added on. Therefore, the total width of the content in IE is only 30px (12px less because of the 5px padding and border on each side).
This works the same way if you had a width attribute of “30” within your TD.
Obviously the way to get around this when designing web pages is to link an additional CSS file for IE only but when designing emailers, it’s not that easy.
The way we see it, you have 2 options, feel free to share your workarounds if you have more:
1.) Use nested tables so that the containing TD has padding but no width and the nested table has a TABLE width and no padding.
2.) Avoid the width attribute/property all together and use clear GIFs inside your TDs. Note: Each GIF must be created using its exact dimensions for Outlook 2007 and 2010 - because it doesn’t always support image width/height attributes.