How to Take Control of Your Line Height in Outlook.com
Is your email getting taller in Outlook.com?
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 Fix
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!
Author: Kyle Lapaglia
Author: Kyle Lapaglia
21 thoughts on “How to Take Control of Your Line Height in Outlook.com”
Comments are closed.
Great – thanks for sharing this fix. This has caused me some headaches!
Does anyone know how we can use this inline, when our client strips out everything in the head and only takes what’s within the main table?
The ESP I use does not allow to add CSS in the <head> or <body> tag. Is there way to fix this with inline css?
Daniele,
Sorry to say it, but I don’t think so.
I am trying to fix the line-height for my signature but styles are getting commented-out. I am assuming there’s no workaround for that 🙁
Hi Guys.
Good work i see u doing on emailonacid.com.
Um just ci=uirious to find out how is it possible for me to create my sort of inbox for my site?
I taught myself HTML and CSS, or do I need to learn a new language fo that? Can you help me with the coding for the design?
My site has not been published yet and I want to be able to read e-mails that go to my domains from my site and not just from outlook only.
Anything will do thanks.
Enjoy your work guys……..
Sfeesoh,
I’m sorry, but we don’t code email clients here. We offer email testing services for the major existing email clients. Good luck with your site!
Hi Geoff: I read this post and let me tell you: this post is realy helpfull I used the fix for outlook.com and it’s wonderfull. Thanks!
Just one quiestion, My client use (and test) outlook web app and line-height break my template.
Any suggestion for this plataform?
Thanks a lot!
Juan,
We’re still getting used to OWA as well. I hope to take a deeper look at OWA and its coding challenges soon, so keep an eye out. Until then, I don’t have much help to offer, sorry Juan.
This worked perfectly! Thank you.
You have the rights to my first daughter. Thank you for this!
it is not working for me in firefox. your test shows the same thing
Hey Geoff,
Thanks for the help with Outlook.com. The line-height fix works as advertised. Unfortunately my bigger problem is with all the extra space Outlook.com puts in before/after paragraphs. I’ve tried setting margin and padding to 0px using your selectors, but it has no effect. If you have any insight on paragraph spacing in Outlook.com I’d really appreciate it.
Thanks!
Add !important to you inline style:
line-height:1.7em !important;
Adding important to your inline style, will cause Outlook 2007 & 2010 to ignore the line-height declaration completely.
Best off sticking to the fix specified above – unfortunately it means you can’t have differing line-heights throughout – just a default.
Hi,
I’m also fed up with extra lines appearing – so pleased to find this fix.
One question:
Where does one put this fix? i.e. Where to start from?
Thanks very much
(p.s. THIS page seems to have a larger than average font so I reset my browser to 80%)
Julian,
You should include the fix in your embedded CSS, in the head section of your email
Thnkas for reply – but perhaps I need “CSS for Dummies ….” 😉
Please can you be more precise about where to start.
“head section”
Do you mean the monotone menu bar across the top (dark blue in my view) with plain text words?
Or do you mean the message header?
(as the extra line only appear in some emails)
If the former, which drop down?
Thanks very much
Julian,
I am not sure what kind of program you’re using, so I can’t really help you with specific menus. The basic structure of an HTML document (including an email) is as follows:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
<HTML>
<HEAD>
<TITLE>My first HTML document</TITLE>
<style type=”text/css”>Styles here</style>
</HEAD>
<BODY>
<P>Hello world!</P>
</BODY>
</HTML>
As far as where to enter that in your program? I am not sure. You’ll have to do some exploring. Here is a good intro to these concepts: http://www.w3schools.com/html/html_intro.asp
HI i have been designed a e-mail Signature and when i upload that in outlook it looks messy
outlook producing extra spacing in each line i can’t fix it Please give me a solution
Thanks for a marvelous posting! I seriously enjoyed reading it, you will be a
great author. I will ensure that I bookmark your blog and may come back
very soon. I want to encourage you to ultimately continue your great work, have a nice afternoon!