Menu
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 --> 
410
Select the paragraph you want to change, or press Ctrl+A to select all text. Go to Home > Line and Paragraph Spacing. Select the line spacing you want. The default spacing is 1.15 lines, which gives you a bit more room between lines and 10 points of spacing after each paragraph for better readability.
Line spacing is expressed in HTML as a number value or factor of the font size, such as 1.5× or 150%. As an example: 1.5× line height on size 12 text is 18 (by math 12 × 1.5).
In Internet Explorer, browse to the HTML page that you saved as a file. Then, choose File | Send | Page by Email.
Click the "Format Text" tab. Most tools in the toolbox are grayed out; to make them available, click inside the email body box. Click the arrow in the lower right corner of the Paragraph group to open the Paragraph dialog. Choose the line spacing from the "Line spacing" drop-down box in the Spacing section.
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.
177
Outlook supports line-height specified in percents. For example line-height: 1.1 isn't supported, but line-height: 110% is.
37
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
