Text in Outlook doesn't use line-height

Question

I'm creating a Email with Html and I stumbled upon an issue with Outlook 2010. Here is my code:

<td background="images/11-text-1--alpha-d3c29e.jpg" 
bgcolor="#d3c29e" width="514" height="460"  valign="top">        
    <!--[if gte mso 9]>
    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" 
    style="width:514px;height:460px;">
    <v:fill type="tile" src="images/11-text-1--alpha-d3c29e.jpg" color="d3c29e" />
    <v:textbox inset="0,0,0,0">
    <![endif]-->
        <p style="margin:0;padding:0;font-family:'Courier New',Courier,monospace;
        font-size:14px;font-weight:bold;color:#000000;line-height:15px;">
            #TEXT
        </p>
    <!--[if gte mso 9]>     </v:textbox>   </v:rect>   <![endif]-->
</td>

now I want to change the line-height from the text, but when I change it in my p tag, it wont do it, but also if I put it in the td and/or the MSO exeption it wouldn't do the trick for Outlook. Is there any way to make this work, or does anyone know a workaround for Outlook?

Answer 1

You need to use the mso style "mso-line-height-rule". This is used to force Outlook to respect the line height rule. Please note this needs to be added PRIOR to the declared line-height or it will not work. See below:

<td background="images/11-text-1--alpha-d3c29e.jpg" 
bgcolor="#d3c29e" width="514" height="460"  valign="top" style="margin:0;padding:0;font-family:'Courier New',Courier,monospace; font-size:14px;font-weight:bold;color:#000000;mso-line-height-rule:exactly; line-height:15px;">        
    <!--[if gte mso 9]>
    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" 
    style="width:514px;height:460px;">
    <v:fill type="tile" src="images/11-text-1--alpha-d3c29e.jpg" color="d3c29e" />
    <v:textbox inset="0,0,0,0">
    <![endif]-->   
            #TEXT
    <!--[if gte mso 9]>     </v:textbox>   </v:rect>   <![endif]-->
</td>

Answer 2

First of all, styling "p" tag is out of date, and some mail clients reject that (such as Outlook). I've encountered such problmems previously.

What I do recommend is that you should mainly style "td" tags. If you have other texts in this particular section insert "span" tag, and then some styling to it (but try to not override things you've styled in "td" tag.

Down below you have an example:

<td style="background-color: #2e3242;color:#ffffff; padding: 10px 0;
border-radius: 5px; font-size:15px; font-family: 'Trebuchet MS', sans-serif;
 line-height: 20px; text-align: center;width:28%; vertical-align: middle">
                                    Lorem Ipsum</td>

And here with a span

<td width="548" style="color:#a8796b; font-size:14px; font-family: 'Trebuchet MS', 
sans-serif; line-height: 18px; text-align: center; 
width:548px; vertical-align: middle">
<span style="font-family: 'Trebuchet MS', sans-serif; font-weight: 300;
font-size: 16px;line-height: 30px;color:#a8796b">
Lorem Ipsum </span><br>
                                    Best Regards,<br>Lorem Ipsum
                                </td>