Thread

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:

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!):

Thanks

Luke

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

Yes, Hotmail is using this in their linked CSS:

Therefore, every element on the page is being affected.

Hope this helps!

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.

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:

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

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

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.

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

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

Luke

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:

It converted that to:

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:

and that kicked back:

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

 
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:

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!

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:

returns as this:

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:

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:

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

Darlantan,

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

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:

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

Miki

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.

Lateral,

I just tried this:

And it worked for me.

Miki

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

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

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-height: 100%;} 

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.