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

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.