Support
 
 
 
Share/Save/Bookmark

Forum


Got questions? We’ve got answers...
   
1 of 2
1
Hotmail: line-height issues
Posted: 01 September 2010 05:27 AM   [ Ignore ]  
Newbie
Rank
Total Posts:  3
Joined  2010-09-01

Hi all, I’m new here.

I have an issue which I really need some help with, or want to see if I am the only one experiencing it, as I have searched for hours on the web.

Ever since hotmail ‘updated’ my line-heights for all text have been wrong, they add an extra gap. I always specify my line height in the td using the style element, which worked nicely in the clients we test for (Yahoo, Hotmail, Gmail, (FF & IE), Outlook 2003 & 2007).

However, now it doesn’t work for Hotmail (IE & FF). I decided to use firebug to see where this extra spacing was coming from and found that hotmail uses the following:

{line-height131%

However, I cannot find a work-around for this at all! I have set the td to style block, used * {line-height: 0}. Wrapped the text in a div and specified an inline style on the div. No avail!

Any ideas please?

Code snippet below (very basic, but line height still gets ignored in Hotmail!):

<html>
<
body bgcolor="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<
style type="text/css">
    .
ReadMsgBody {width100%;}
    
.ExternalClass {width100%;}
    table tr td {mso
-line-height-ruleexactly;}
</style>
<
table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000">
    <
tr>
        <
td align="left" valign="top"><table width="600" border="0" align="center" cellpadding="0" cellspacing="0">
            <
tr>
                <
td align="left" valign="top" style="padding-bottom: 10px; font-family: Arial, Helvetica, sans-serif; font-size: 44px; line-height: 44px; color: #ffffff; text-transform: uppercase; letter-spacing: -3px; display: block;"><b>lorem ipsum <span style="color: #eebd00;">dolor sit amet</spanconsectetur adipiscing elitEtiam risus.</b></td>
            </
tr>
        </
table></td>
    </
tr>
</
table>
</
body>
</
html

Thanks

Luke

Profile
 
 
Posted: 01 September 2010 09:58 AM   [ Ignore ]   [ # 1 ]  
Avatar
Administrator
RankRank
Total Posts:  43
Joined  2009-03-04

Hey Luke, try adding an inline style for line height on the <b> and <span> tags as well. 

<b style="line-height: 44px">
  
lorem ipsum 
   
<span style="color: #eebd00; line-height: 44px">
      
dolor sit amet
   
</span>
  
consectetur adipiscing elitEtiam risus.
</
b

Yes, Hotmail is using this in their linked CSS:

{ line-height131%

Therefore, every element on the page is being affected.

Hope this helps!

Profile
 
 
Posted: 01 September 2010 10:07 AM   [ Ignore ]   [ # 2 ]  
Newbie
Rank
Total Posts:  3
Joined  2010-09-01

Thanks for that, I have tried adding these, which does affect it. But the line heights are not the same. It seems after the span tag is closed there is still an extra gap and just before it is opened.

I tested this with each word on a different line.

I wasn’t sure if there was a work around for this, as recently I had managed to find a fix, where the layout was messed up in hotmail FF, by overwriting the styles Hotmail had used.

Profile
 
 
Posted: 01 September 2010 10:37 AM   [ Ignore ]   [ # 3 ]  
Avatar
Administrator
RankRank
Total Posts:  43
Joined  2009-03-04

Luke,

I am having a hard time re-creating your issue on my end.  You mentioned:

“I tested this with each word on a different line.”

Are you separating those lines by BRs? 

Something to note, Hotmail uses the following doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"

That has been known to cause strange line spacing issues within <span> tags, if you use

<p style="display:inline"

instead, it might resolve your issue but again, since I can’t recreate it on my end, it is not guaranteed.

Profile
 
 
Posted: 02 September 2010 01:46 AM   [ Ignore ]   [ # 4 ]  
Newbie
Rank
Total Posts:  3
Joined  2010-09-01

Hi, thanks for your help. After a good nights sleep, I managed to think of a few different ways which may work.

After trying it and running tests, I have found a solution.

.ExternalClass {line-height100%;

This overwrites Hotmails line-height and resets it to 100%!

Hope this will help for anyone else, but thanks for your prompt response!

Luke

Profile
 
 
Posted: 02 September 2010 10:34 AM   [ Ignore ]   [ # 5 ]  
Avatar
Administrator
RankRank
Total Posts:  43
Joined  2009-03-04

Luke,

Thanks for sharing this workaround! Since Hotmail is notoriously strange with its interpretation of embedded CSS, I did some further testing on this.

For those of you who are not familiar, Hotmail places all of your HTML code within a .ExternalClass div.

I sent up the following embedded CSS to Hotmail:

.ReadMsgBody {width100%;}
.ExternalClass {width100%;}
{ line-height100%}
.testing { width300px}
p
.testing { width300px}
.testing p  { width300px}
#testing  { width: 300px}
p#testing  { width: 300px}
#testing p  { width: 300px} 

It converted that to:

.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;} 

So it adds “ecx” to anything it determines as a unique class.  It also updates all of your references to your unique class or ID within the html so they basically preserve your CSS without interfering with theirs.

What I find interesting is that it does not add the “.ecx” to the “.ExternalClass” - hence the centering workaround.  With that said, I sent up a few more tests…  I tried:

.ExternalClass {width100%;{ line-height100%}
.ExternalClass {width100%; line-height100%

and that kicked back:

.ExternalClass {width:100%;.ExternalClass ecx*{line-height:100%;}
.ExternalClass{width:100%;line-height:100%;

With that said, I thought the safest bet is to use:

.ExternalClass {width100%; line-height100%

 
But, since the linked stylesheet for Hotmail is using a generic selector, you still need to include inline CSS for each HTML element or make a special case for each element in your embedded CSS.

I followed up by testing this just to be sure:

.ExternalClass p
.
ExternalClass span,
.
ExternalClass font,
.
ExternalClass td
{line
-height100%

Hotmail did not mess with this code at all.  In conclusion, I recommend that you include the “* {line-height:131%}” at the top of your standard embedded code so that you can make sure you fully overwrite it via embedded or inline CSS on your end before you begin testing in Hotmail.

Thanks again Luke, we will follow-up with this by writing a blog post about it!

Profile
 
 
Posted: 28 September 2011 07:33 AM   [ Ignore ]   [ # 6 ]  
Newbie
Rank
Total Posts:  1
Joined  2011-09-28

Hi! Firstly, sorry for bumping an old thread, but I feel this is still an issue and it took me almost two hours to find a solution for this.

Hotmail still doesn’t mess with your css when you use .ExternalClass in front of a style.

This means that this:

{ line-height110%!important}
.testclass { line-height110%!important}
.ExternalClass .testclass { line-height110%!important

returns as this:

.ecx{ line-height110%!important}
.ecxtestclass { line-height110%!important}
.ExternalClass .testclass { line-height110%!important

Note that the classes in your elements will still have “ecx” in front of them, making the last line of the above code useless in any case.

Here’s where it gets strange. This was in my css:

.ExternalClass .ecxtestclass { line-height110%!important

I still saw no difference in how Hotmail rendered the email, but my Firebug listed my style as the first line-height property for my element. Somehow the universal selector that Hotmail uses overwrote my !important-tagged style. I don’t know why, I don’t know how, but it still did, through the universal selector.

Having experimented on putting up the *-style to no avail, I finally got it to work with this:

.ExternalClass { line-height110%!important

This piece of css finally made Hotmail forget the inherent 131% line-height and use my 110% line-height instead.

I hope someone finds this helpful, as the examples given above (old post, I know) did not work anymore smile

Profile
 
 
Posted: 28 September 2011 01:17 PM   [ Ignore ]   [ # 7 ]  
Avatar
Administrator
RankRankRankRank
Total Posts:  204
Joined  2009-08-23

Darlantan,

Thanks for sharing this with us!  Your solution to use:

.ExternalClass {line-height100%

is much shorter and sweeter and includes all possible HTML containers.

You mentioned above that our suggested fix no longer works, did you try the following:

.ExternalClass p
.
ExternalClass span,
.
ExternalClass font,
.
ExternalClass td,
.
ExternalClass div
{line
-height100%

Because although this post is old, that should still work…

Miki

Profile
 
 
Posted: 11 December 2011 04:49 PM   [ Ignore ]   [ # 8 ]  
Avatar
Newbie
Rank
Total Posts:  7
Joined  2011-02-09

Unfortunately this has absolutely no impact (anymore?) on the line height in hotmail. When firebugging the affected areas I am still seeing a * {line-height: 131%}.

Pretty nasty.

 Signature 

Lateral Group

Profile
 
 
Posted: 12 December 2011 10:33 AM   [ Ignore ]   [ # 9 ]  
Avatar
Administrator
RankRankRankRank
Total Posts:  204
Joined  2009-08-23

Lateral,

I just tried this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
<
html >
<
head>
<
meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<
title>Untitled Document</title>
</
head>

<
style>
.
ExternalClass {line-height100%}  
</style>

<
body>
<
p
Test copy  Test copy  Test copy  Test copy  Test copy  
Test copy  Test copy Test copy  Test copy  Test copy  
Test copy Test copy  Test copy  Test copy  Test copy  
Test copy  Test copy  Test copy Test copy  Test copy  
Test copy  Test copy Test copy  Test copy  Test copy  
Test copy  Test copy  Test copy  Test copy Test copy  
Test copy  Test copy  Test copy Test copy  Test copy  
Test copy  Test copy  Test copy  Test copy  Test copy
Test copy  Test copy  Test copy  Test copy 
</p>

</
body>
</
html

And it worked for me.

Miki

Profile
 
 
Posted: 06 February 2012 01:43 AM   [ Ignore ]   [ # 10 ]  
Newbie
Rank
Total Posts:  2
Joined  2011-04-13

You are a life saver, Michelle.  I have been working on a solution to this nasty Hotmail issue all day.  Thank you!

Profile
 
 
Posted: 13 April 2012 08:34 AM   [ Ignore ]   [ # 11 ]  
Newbie
Rank
Total Posts:  2
Joined  2012-04-12

I have been struggling with this and couldn’t get the above to work (may have been an operator error).

However I did find a fix eventually Hotmail works best if you specify line-height in px rather than percentages.

I specified this in-line in the <td> tag as follows:
<td valign=“top” height=“176” align=“left” style=“font-family:Arial; color:#6c6c6c; font-size:12px; line-height:15px”>

I also found that you needed to repeat the line-height information in any style specs within the <a> tag.

Hope this also helps

Profile
 
 
Posted: 12 January 2013 05:25 PM   [ Ignore ]   [ # 12 ]  
Newbie
Rank
Total Posts:  1
Joined  2013-01-12
Luke - 02 September 2010 01:46 AM

Hi, thanks for your help. After a good nights sleep, I managed to think of a few different ways which may work.

After trying it and running tests, I have found a solution.

.ExternalClass {line-height100%;

This overwrites Hotmails line-height and resets it to 100%!

Hope this will help for anyone else, but thanks for your prompt response!

Luke

Pardon me for my language but HOLY SHIT! That was the solution I was looking for all day! I was about to hit my computer screen. You saved me! Thank you so much! This code is not included in the Email Boilerplate and it should be!

Alex M.

Profile
 
 
Posted: 26 July 2013 07:31 AM   [ Ignore ]   [ # 13 ]  
Newbie
Rank
Total Posts:  2
Joined  2013-05-16
.ExternalClass {line-height100%;

doesn’t work in IE8.

Any other solutions?

Profile
 
 
Posted: 06 August 2013 04:06 PM   [ Ignore ]   [ # 14 ]  
Avatar
Newbie
Rank
Total Posts:  1
Joined  2012-09-18

try combining it with:
<meta content=“IE=9” http-equiv=“X-UA-Compatible”/>

in IE 8

Profile
 
 
Posted: 06 August 2013 06:52 PM   [ Ignore ]   [ # 15 ]  
Newbie
Rank
Total Posts:  5
Joined  2012-12-23

I tried everything that’s been reported as “working” but my test emails I send to outlook.com are still showing gaps. I’ve tried:
- .ExternalClass * {line-height: 100%;} 
- border-collapse: collapse (put this in each TD tag)
- display: block
- <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” />
<meta content=“IE=9” http-equiv=“X-UA-Compatible” />

See attached image. There shouldn’t be any blue above the sliced image (#1) but Outlook.com is causing extra line-height. Any thoughts? Thanks.
AJ

Image Attachments
outlookdotcom-screenshot.jpg
Profile
 
 
   
1 of 2
1
 
x
Sign up for our Newsletter

And get updates on the latest email tips, tricks and hacks!