Outlook rendering problem, rendering text too large.

Question

I'm trying to create a newsletter standard for our org and having problems with Outlook rendering the text too large.

Here is the css section of the page

body {
 margin: 0;
 padding: 0;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 75%;
 background: url(http://www.blah.com/stuff.gif);
 }
a {
 color: #f24c22 !important;
 }
a:visited {
 color: #f24c22 !important;
 }
a:hover {
 color: #3d7ac5 !important;
 }
table {
 background: #ffffff;
 }
h1 {
 font-size: 1.3em;
 }
h2 {
 font-size: 1.2em;
 color: #494949;
 padding-top: 0 !important;
 margin-top: 0 !important;
 }
h3 {
 font-size: 1.1em;
 color: #12377c;
 }
p {
 padding-top: 0 !important;
 margin-top: 0 !important; 
 color:#333333;
 }
   .style1 {color: #333333}
   .style2 {color: #12377c}
   .style3 {
       font-size: smaller;
       color: #666666;
   }

Any suggestions why this might be caused?

Answer 1

If you want to set a specific size for you fonts, then you should probably use a fixed size type like pt. Rather than a variable one like em/%

See here for what I mean.

Answer 2

Many mail readers strip the "body" tag from any email received, or disregard styles applied to this element. Try applying the font size to an enclosing div.

Answer 3

Have you tryed using main *{font-size: 12pt;} ?

Outlook by default uses Trident, IE's engine for incoming mail, and Word HTML rendering engine for outgoing mail... Until Office 2007, and people hate it.

Now, it uses Word 2007's rendering, wich is rather lacking. On microsoft's page you can see that de body element doesn't support the style attribute.

Answer 4

abstracted the font size to smaller, which I found at standard viewing to be the equivalent size. Rewrite page in div's considering it's a basic template, refered to the ID's of the divs in order to render, worked fine. Tested it on various email accounts including gmail, hotmail and rendered through outlook. Outlook was the only problematic one, where the same page refferencial links fail.

Answer 5

Add these metatags and you will find that Word / Outlook "magically" renders the page (including images) the correct size:

<meta name="ProgId" content="Word.Document" />
<meta name="Generator" content="Microsoft Word 12" />
<meta name="Originator" content="Microsoft Word 12" />

I have no idea why Outlook does this, most corporate emails I get look terrible in Outlook - however, with these tags, the ones I send look pristine.