DB
1
Line Height Issue on Outlook and mso-line-height-rule: exactly isnt working!
Help! mso-line-height-rule: exactly doesn't inherit my line-height I've set on my <td> elements.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Overpass+Mono');
/* CLIENT-SPECIFIC STYLES */
body, table, td, a{-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;} /* Prevent WebKit and Windows mobile changing default text sizes */
table {border-collapse:collapse;}
table, td{mso-table-lspace: 0pt; mso-table-rspace: 0pt;} /* Remove spacing between tables in Outlook 2007 and up */
img{-ms-interpolation-mode: bicubic;} /* Allow smoother rendering of resized image in Internet Explorer */
/* RESET STYLES */
img{border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none;}
table{border-collapse: collapse !important;}
body{height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important;}
/* iOS BLUE LINKS */
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
</style>
</head>
<body style="margin: 0px !important; padding: 0px !important;">
<table border="0" cellpadding="0" cellspacing="0" style="margin: 10px; max-width: 600px;">
<tbody>
<tr>
<td style="mso-padding-alt: 0px; padding: 0px 0px 10px 0px;">
<a href="http://honestfox.com.au" style="text-decoration: none; color: #000000; display: block;" target="_blank">
<img src="https://s3-ap-southeast-2.amazonaws.com/honest-fox-signatures/v1/logo.png" alt="Honest Fox" style="width: 30px;">
</a>
</td>
</tr>
<tr>
<td style="background-color:#333; color: #000000; font-family: 'Overpass Mono', monospace; mso-padding-alt: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; font-size: 16px; mso-line-height-rule:exactly; line-height: 20px; letter-spacing: 1px;">
Xavian Ang
</td>
</tr>
<tr>
<td style="background-color:#d4d4d4; font-family: 'Overpass Mono', monospace; mso-padding-alt: 0px; padding: 0px 0px 15px 0px; font-size: 10px; mso-line-height-rule:exactly; line-height: 13px; letter-spacing: 1px;">
<span style="background-color:#000; color: #F05E45;">Web Developer</span><br>
<span style="color: #000000;">0478 049 069</span>
</td>
</tr>
<tr>
<td style="font-family: 'Overpass Mono', monospace; font-size: 8px; mso-line-height-rule:exactly; line-height: 10px; mso-padding-alt: 0px; padding: 0px 0px 15px 0px;">
honest fox<br>
level 3, 48 Easey St, Collingwood, VIC <br>
<a href="http://honestfox.com.au" style="text-decoration: none; color: #000000;" target="_blank">honestfox.com.au</a>
</td>
</tr>
<tr>
<td style="mso-padding-alt: 0px; padding: 0px;">
<a href="https://www.facebook.com/honest.fox.creative/" style="text-decoration: none; color: #000000;" target="_blank">
<img src="https://s3-ap-southeast-2.amazonaws.com/honest-fox-signatures/v1/icon-facebook.jpg" alt="Honest Fox" style="width: 18px;">
</a>
</td>
</tr>
</tbody>
</table>
</body>
</html>
try
mso-line-height: exactly; line-height: 150%; line-height: 20px;
Still the same :(
Try on td to apply and test or try to wrap the text with a span and apply on span and on td
Thanks Bro!.. It worked for me..
Hey Dillon
You are not allowed to put margin in your code.
<!-- HERE IS THE MISTAKE -->
<table border="0" cellpadding="0" cellspacing="0" style="margin: 10px; max-width: 600px;">
<!-- HERE IS THE MISTAKE -->
make the margin with td's instead so the outlook clients doesn't kill your code.
<!-- NEW CODE -->
Try putting your mso-line-height-rule:exactly after you have declared the line height. So first line-height then then mso one.