As long as it’s simple, Outlook seems to preserve styling in the <head>.
So this works across all email clients for infinite nesting:
<style type="text/css">
td {
line-height:150%;
}
</style>
Solution 1 :
Problem :
Within Outlook only, text does not inherit the line-height property from any parent element that’s nested more than two elements above.
For example, the line-height is applied to these:
<div style="line-height:150%">
Text
</div>
<div style="line-height:150%">
<td>
Text
</td>
</div>
(Edit: although the second one works, it is incorrect to put a td inside a div)
But not if the style is inline on the body tag or a parent beyond the immediate td the text is in
I have tried combinations of the following:
- With and without
mso-line-height-rule: exactly;before and after line-height style - Line-height value as percents and points (150% and 1.5), I believe only percents work in Outlook, but I tried both anyways (Edit: Thank you for the comment explaining the difference between the two!)
- Placing the style on different elements (td, tr, table, body, etc), only div seems to work, as seen in the examples above
- Removing the
marginstyle property from all elements (I read somewhere that margin can mess with Outlook processing styles, but no dice)
The reason this is an issue for me is because I am building emails in Salesforce, I would like to be able to apply the 150% line-height to the template so we don’t need to change the line-height for each block individually that’s created.
Does anyone with hyper-specific Outlook development knowledge know of a fix or workaround? Or will I just need to apply the line-height to the individual text blocks to accommodate for Outlook?
Edit:
I’ve learned that using a div inside a table is an error unless it is inside a td
So I guess my main puzzlement is why Outlook won’t render line-height in any element that ISN’T a div. Yet another Outlook mystery lol
Comments
Comment posted by Mr Lister
Note that putting a td in a div is an error and you may just be looking at Outlook’s error handling. Also note that there is a considerable difference between line-height with and without a unit. With a unit (like 150%) the value is calculated first and then inherited; in
Comment posted by Holly
My experience has been that Outlook does not render any styling that isn’t inline, at least in the desktop application. Thanks for your input though!
Comment posted by Nathan
@Holly Outlook will ignore most styles, but not all of them. This has been tested in Litmus and works in Outlook. Did you try it?