Niklas Fett Niklas Fett - 3 months ago 28
CSS Question

Text in Outlook doesn't use line-height

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

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>
Comments