Create a Discussion

Line Height Issue on Outlook and mso-line-height-rule: exactly isnt working!

Dillon Bailey posted 2017-08-10 01:46:39

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>

What I want
What I get (Outlook 2007, 2010, 2013, 2016 (Win7)

badiu ionut replied 2017-08-10 15:31:40

try
mso-line-height: exactly; line-height: 150%; line-height: 20px;

Reply to badiu ionut

Dillon Bailey replied 2017-08-14 02:39:57

Still the same :(

badiu ionut replied 2017-08-14 07:29:25

Try on td to apply and test or try to wrap the text with a span and apply on span and on td

Anil Kumar replied 2018-06-15 05:44:59

Thanks Bro!.. It worked for me..

Amanda Salvara replied 2018-11-12 16:10:50

Thanks!

Nicholas Rowan replied 2018-06-25 12:24:58

Try putting your mso-line-height-rule:exactly after you have declared the line height. So first line-height then then mso one.

Reply to Nicholas Rowan

Yogesh Depala replied 2019-03-19 12:43:09

mso-line-height: taro-papo; should do it!

Evzal Flugaj replied 2018-08-22 11:41:07

It works for me. Thx for this! : )

Djalal Lougouev replied 2019-09-19 08:31:39

Yogesh (mso-line-height: taro-baap; ) as well is useful

Nicki Pabst replied 2018-06-26 08:18:06

Hey Dillon

You are not allowed to put margin in your code.

<table border="0" cellpadding="0" cellspacing="0" style="margin: 10px; max-width: 600px;">

make the margin with td's instead so the outlook clients doesn't kill your code.


<!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>
            <!--[if mso]>
        <style>

.fallback{ font-family: monospace, sans-serif;

}

        <![endif]-->
  </head>
  <body style="margin: 0px !important; padding: 0px !important;">
      <table width="100%" cellspacing="0" cellpadding="0" border="0">
          <tr>
              <td colspan="2" style="height:10px; font-size: 1px; mso-line-height-rule: exactly; line-height: 1px;">

              </td>
              <tr>
                   <td style="width:10px; font-size: 1px; mso-line-height-rule: exactly; line-height: 1px;">
                <td align="left">
                     <table border="0" cellpadding="0" cellspacing="0" style="max-width: 600px;">
      <tbody>
        <tr>
          <td align="left" 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" height="30" alt="Honest Fox" style="width: 30px;">
            </a>
          </td>
        </tr>
        <tr>
          <td align="left" style="background-color:#333; color: #000000; font-family: 'Overpass Mono', monospace; mso-padding-alt: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; mso-line-height-rule:exactly; font-size: 16px;  line-height: 20px; letter-spacing: 1px;">
              <span class="fallback">Xavian Ang</span>
          </td>
        </tr>
        <tr>
          <td align="left" style="background-color:#d4d4d4; font-family: 'Overpass Mono', monospace; mso-padding-alt: 0px; padding: 0px 0px 15px 0px; mso-line-height-rule: exactly; font-size: 10px;  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 align="left" style="font-family: 'Overpass Mono', monospace; mso-line-height-rule:exactly; font-size: 8px;  line-height: 10px; mso-padding-alt: 0px; padding: 0px 0px 15px 0px;">
            <span class="fallback"> 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"> <span class="fallback">honestfox.com.au</span></a></span>
          </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" height="30" alt="Honest Fox" style="width: 18px;">
            </a>
          </td>
        </tr>
      </tbody>
    </table>
                </td>
              </tr>
          </tr>
      </table>

  </body>
</html>
<!-- NEW CODE -->

<!--Btw, you have to declare a height on your images, else outlook put the original height of the image -->

Reply to Nicki Pabst

Dillon Bailey replied 2018-08-22 20:59:40

👌

Casey Braun replied 2020-02-13 15:44:20

Is there a way to apply the mso-line-height-rule globally? I've tried putting it in the <body> at the top, but it doesn't work.

Reply to Casey Braun

Jerry Teschendorf replied 2020-05-08 13:50:16

By default, Outlook will treat your line-height value as a minimum, and often increase it to its liking. To disable this behavior, add mso-line-height-rule: exactly; and Outlook will start to treat your line-height value as an exact value instead.
If you want this behavior for most of your email, you can simply apply mso-line-height-rule: exactly; at the <body> level, instead of repeating it throughout the email code. One drawback is that this property can make Outlook crop images by the line height. If a 200px tall image is placed in element with aline-height is 20px, and mso-line-height-rule: exactly; is in effect, Outlook will only show the bottom 20px of the image.
The solution is to revert mso-line-height-rule back to the default value at-least on any elements where it’s causing an issue.

mithvan mithv replied 2019-10-04 08:41:49

Well. It's working nice. Thanks for sharing.
https://breakonacloud.com/best-discord-voice-changers/

Reply to mithvan mithv

Line Height Issue on Outlook and mso-line-height-rule: exactly isnt working!

Sign in to Community

Join the Litmus Community

Sign up to Community

Get more out of your Litmus account

Forgot password