Email Development
How to Take Control of Your Line Height in Outlook.com
Email Development
This is because Outlook.com (formerly Hotmail) controls your line height through CSS. First, they wrap all of your html in a div with the class “.ExternalClass” added to it. Outlook.com also applies a line height of 131% to all alements on the page, as follows:
* {line-height: 131%}
Luckily for us, we can use the .ExternalClass div to make sure that our emails render the way we want them to. Outlook.com is going to prepend “.ExternalClass” to all of your styles, so that this:
<style>
.ReadMsgBody {width: 100%;}
.ExternalClass {width: 100%;}
* {line-height: 100%}
.testing {width: 300px}
p.testing {width: 300px}
.testing p {width: 300px}
#testing {width: 300px}
p#testing {width: 300px}
#testing p {width: 300px}
</style>
Becomes:
<style>
.ExternalClass .ecxReadMsgBody {width:100%;}
.ExternalClass {width:100%;}
.ExternalClass ecx* {line-height:100%;}
.ExternalClass .ecxtesting {width:300px;}
.ExternalClass p.ecxtesting {width:300px;}
.ExternalClass .ecxtesting p {width:300px;}
.ExternalClass #ecxtesting {width:300px;}
.ExternalClass ecxp#testing {width:300px;}
.ExternalClass #ecxtesting p {width:300px;}
</style>
You probably noticed that it added “ecx” to anything it determined to be a unique class. It also updates all of your references to unique classes or ID’s within the html so that they basically preserve your CSS without interfering with theirs. So if you have
<div class="testing">
in your HTML, that will be rewritten as
<div class="ecxtesting">
It may be a bit disconcerting to see your code messed with, but it shouldn’t affect its functionality.
The good part is that they’ll allow you to write “.ExternalClass” CSS rules without over writing them. Because of this, we can overwrite the lineheight rule they set up as follows:
<style>
.ExternalClass * {line-height: 100%}
</style>
Alternatively, you can make a unique rule for each part of your HTML. The following rules weren’t modified by Outlook.com in our testing.
<style>
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td
{line-height: 100%}
</style>
You may want to consider including .ExternalClass * {line-height: 100%} in your basic templates from now on. This simple line of code should save you a lot of headaches in Outlook.com/Hotmail and shouldn’t affect anything else.
What tricks have you found to help deal with Outlook.com? Let us know in the comments below!
