When using the CSS line-height property in Outlook 2007, Outlook won't take a line height of 16px or below. The spacing of the lines look the same. If we use a larger line height, they are rendered in Outlook 2007. Of course this affects the way the email is rendered in other browsers and affects our designs as well.
Has anyone else had problems with this issue?
Thanks in advance for any insight into this problem.
Yup you are not wrong about this. I just did a quick test myself and didn't start noticing any line height differences until the 16-18px mark. See screen:
Looks like it's just yet another thing that simply isn't supported *properly* in Outlook 07.
I am actually going to be compiling a blog post about all of the quirks we've noticed in different clients. Keep an eye out for it.
Hmmm, this explains a lot, like my client saying "there is too much space between the lines of text"!
Yet, The Email Standards Project and Campaign Monitor claim Outlook 2007 passes the Acid Test and fully supports line-height, see links below:
I notice the Acid Test on the ESP site tested a minimum font setting at 12px/1.5em which I believe is above the established 16px line-height threshold. I'd like to see a smaller line-height used in the Acid Test.
I can't believe more people haven't struggled with this? Has anyone found a solution?
Has anyone figured out how to get line-height in Outlook that is consistent with other email clients? On 11px text, Outlook has a line-height that is close to 1.5 times wider than all other clients. If I try to adjust the line-height property everything else is too tight. God I hate Microsoft!!!
Since most of my B2B email is read using Outlook, I tend to specify line height in points. So either 12pt or 14pt but I believe that this equates to 16 pixels and 18 pixels anyway. I find that a 12px Trebuchet doesn't want line spacing any less than 16 pixels, otherwise it would be too cramped.
More of a problem for me is Outlook 2007's interpretation of the "line-height:xxpt;" style command. I've noticed that Outlook's interpretation is to say that the line height is "at least" the amount you specify. That means if Outlook decides that the line height should be higher, it will increase it. Not great, when you're relying on text in a cell to only use a set amount of space.
The solution that I've found is to include the following as part of your style comments before the line height.
It's a microsoft style comment and so should be ignored by other email clients but will ensure that Outlook renders the line height that you wanted.
That's a good tip, thanks for posting it!
Use this technique with caution! After using it for the past month we've run into a problem - mso-line-height-rule:exactly; can cause images to appear only partially downloaded in Outlook.
I usually place my CSS in <td> tags. For example, I'll write:
<td style="font-weight: bold; mso-line-height-rule:exactly; line-height:17px;">Content</td>
I don't know for sure, but I believe placing mso-line-height-rule:exactly; in a <td> tag for a table cell that has an image in it may cause misalignment of the image and make it appear partially downloaded.
It may be that mso-line-height-rule:exactly; is only suitable for use in <p> tags that contain only text.