CODEWITHSUNDEEP
emailhtml-email
Tom
Tom

Reputation: 12998

small line-heights rendering incorrectly in MS Outlook

From doing a little research I've found that MS Outlook will not render line-height in an HTML email at anything less than 16px.

This is a bit of a problem as I really need it a fair amount smaller.

Does anyone know of a fix for this??

Upvotes: 4

Views: 2641

Answers (3)

Alex W
Alex W

Reputation: 38193

This CSS might fix the issue, but it will only work on block elements (p, div, ..etc):

mso-line-height-rule:exactly; line-height:10px;

If you are trying to create vertical spacing, use the line-height and font-size to enforce a height:

line-height:5px;font-size:5px;height:5px;

Outlook.com (Hotmail) will override your line-height CSS with theirs, so you need to use this to "reset" your CSS after they modify it:

.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font,
  .ExternalClass td, .ExternalClass div {line-height: 100% !important;}

Outlook.com continued: Then if you have any elements that had line-height:0 you will need to give them an id attribute, and then specifically reset those:

.ExternalClass #elementWithNoLineHeight { line-height:0 !important; }

Upvotes: 0

Nate Johnson
Nate Johnson

Reputation: 11

make sure you have 0 padding and margins, have "display:block" on everything inline (esp. images!) and set line-height to the height you expect.

Outlook <2007 uses IE as a rendering engine, 2010 uses WORD.

Yes, it's very lame.

Upvotes: 1

Dan Blows
Dan Blows

Reputation: 21174

What code are you using? It will go lower than 16px, but only if the font-size is 14px or smaller. Also, make sure you are setting the line-height on the parent TD - i.e. on the closest block-level element, rather than an inline element.

Upvotes: 1

Related Questions