Line-height not working in Outlook 2010 for HTML Email

Question

Outlook 2010/ Outlook 2007 does not appear to be honoring line-height whatsoever in my HTML Email. (It works perfectly in Outlook 00 and Outlook 03)

I've been doing some extensive googling - and HTML CSS support charts I have found say that Outlook 2010/2007 SHOULD understand line height.

I've tried putting the line-height on the block parent element, and the child paragraph element, and as on an ID in the style tag in the head, and every combination of the above.

I've also ensured I am explicitly declaring line-height as a pixel value that is significantly larger than the text size (but I tried % and em too). Tried putting !important in the declaration - and even tried valign along with every other tip I could find online.... I have been using line-height to e.g. determine button padding-top and padding-bottom, since HTML Email support for padding/margin is so buggy.

I would really appreciate any help with this. Really at the head-banging point now!

The actual email is huge as it's a complicated newsletter, but here is a snippet of the style in the head, and a table section in which the line-height isn't working - I hope that is enough!:

<style type="text/css" media="screen">
    html {
        -webkit-text-size-adjust:none;
        -webkit-background-size:100%;
    }
    body{
        margin: 0px 0px 0px 0px !important;
        padding: 0px 0px 0px 0px !important;
        margin-bottom:0px !important;
        margin-top:0px !important;
        background-color:#e5e5e5;
    }
    p{
        margin: 0px 0px 0px 0px !important;
        padding: 0px 0px 0px 0px !important;
        margin-bottom:0px !important;
        margin-top:0px !important;
        display:block;
    }
    a:link, a:visited, a:active{
        color:#55c2d9;
        text-decoration: underline;
    }
    a:hover{ 
        text-decoration: underline; 
    }
    .body a:link, a:visited, a:active{
        color:#55c2d9;
    }
    img{
        border: 0;
        display: block;
    }
    table.main {
        background-color: #ffffff;
        width:650px;
    }
    td {

    }
    #header-top p{
        line-height:33px;
    }

</style>

                    <!-- Content -->
                    <table border="0" cellspacing="0" cellpadding="0" class="body">
                        <!-- Row 1 -->
                        <tr valign="top">
                            <td background="images/bg-texture-top.jpg" style="background-repeat:repeat-y; background-color:#262626;" valign="top" width="650" height="33" bgcolor="#262626">

                                <table border="0" cellspacing="0" cellpadding="0" id="header-top">

                                    <!-- Row 1.1 -->
                                    <tr valign="top">
                                        <td style="" valign="top" width="16" height="" bgcolor="">
                                        </td>

                                        <td style="font-family: Helvetica, Arial, sans-serif; color:#767676; font-weight: bold; font-size:11px; line-height:33px; text-align:left; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; padding-top:0px; padding-bottom:0px; padding-left:0px; padding-right:0px;" width="490" height="33" bgcolor="">
                                            <p><a href="#">click here to view this email in a browser</a></p>
                                        </td>
                                        <td style="font-family: Helvetica, Arial, sans-serif; color:#767676; font-weight: bold; font-size:11px; line-height:33px; text-align:left; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; padding-top:0px; padding-bottom:0px; padding-left:0px; padding-right:0px;" width="62" height="33" bgcolor="">
                                            <p>find us on:</p>
                                        </td>

                                        <td style="" valign="top" width="16" height="" bgcolor="">
                                        </td>
                                    </tr>

                                </table>

                            </td>
                        </tr>

                    </table> <!-- Content -->

Answer 1

The best approach for this problem is to use relative positioning and top property, this works like a charm, see example code below

<div style="display: inline-block; ">
<font>Line 1</font><br/>
<font style="position: relative; top: -5px;">Line 2</font><br/>
<font style="position: relative; top: -10px;">Line 3</font><br/>
</div>

Answer 2

Late response, but since I recently worked through a similar line-height issue in Outlook, I wanted to share my hacky workaround.

For whatever reason, if you throw an unordered list into the HTML just before the CLOSING tag of the tag you specified the line-height for, Outlook 2010 respects the line-height.

You can make the unordered list empty and invisble:

<ul style="list-style-type: none; visibility:hidden;"></ul>

Example:

<p style="font-size: 12px; line-height: 18px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<ul style="list-style-type: none; visibility:hidden;"></ul>
</p>

Disclaimer: I haven't tested this exhaustively. It works in my template through one ESP in Outlook 2010, Gmail's current version (July 27, 2012), and the iPhone email app. I don't know if the trick universally fixes the line height issue in other tags. I also acknowledge its a cludgey fix, but it's a cludgey problem; and, as is often the case with Outlook's flagrant disregard for HTML specifications, the fix is often as stupid as the problem. Use this if you want, but test it extensively before sending to actual recipients.

Answer 3

For line-height to work in Outlook, after adding "mso-line-height-rule: exactly;" before line-height, make sure to use percentage instead of decimal value (i.e. 150% instead of 1.5)

Answer 4

I use a combination of inline CSS to control line-height:

<p style="padding:0px;margin:0px;margin-auto:0px;mso-line-height-rule: exactly;line-height:110%;font-size:11pt;">paragraph text</p>

The key element is the Microsoft proprietary CSS attribute, mso-line-height-rule: exactly;. The padding just prevents the paragraph tags from creating unnecessary space.

Answer 5

Outlook supports line-height specified in percents. For example line-height: 1.1 isn't supported, but line-height: 110% is.

Answer 6

Setting the line-height using in-line css on the table cell should be fine but you really don't need those <p> tags in there, that just introduces formatting problems and the references to those <p> tags in the <style> tags in the <head> will be ignored by a number of clients.

Answer 7

Outlook uses the word html processor for rendering and editing html. Get used to table layouts and forget about css, and if - use only inline css. you have just a few possibilities: background, font-family, font.size, color.

a full list of supported css can be found here, a tutorial is here.

But you also have to think about your receivers - if they are on google mail or yohoo mail your css can be stripped out completely

a good resource for developing email newsletters is campaignmonitor.com/resources, they are also doing a repeatly check of all email services and their HTML/CSS features