CODEWITHSUNDEEP
html-emailmailchimp
Mr Toad
Mr Toad

Reputation: 256

mso-line-height clipping images in outlook

I am building an html template for a client which will create a drag and drop builder in mailchimp.

I have used the mso-line-height:exactly attribute globally to control erratic line height applied by Outlook.

However - because of this, when the client inserts an image into the body text using the 'insert image' text editor, the images is clipped at the line height of the text - for example if the line height is 20px, the image only shows the bottom 20px.

The solution I have been provided through research is that I have to remove the mso-line-height attribute globally and only apply it in the html code when I really need it - though this is not something a client can maintain.

How can I remove this attribute on images only? I want the exactly rule to be in place until such time as an image is inserted at which point is it m removed.

I have tried 

img {
    border:0 !important;
    outline:none !important;
    display:block !important;
    mso-line-height-rule:at-least !important;
    mso-height-source:userset !important;
}

And also setting a 'min-height:insert image height !important' manually in the code editor inside the mailchimp interface but nothing works.

At the moment it seems like you only have 2 options

1 - you have correct line height but clients can never insert images amongst the text (the have to be table cells pre-designed to have images in them)

OR

2 - you have incorrect line height and non-clipped images but the ability to insert them when you want.

Is there a solution to this that does not involve editing the html each time but can be handled in in the css?

here is my initial styling

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


 <!--[if gte mso 15]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->


<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta content="telephone=no" name="format-detection">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>template</title>



<style type="text/css">
        body{
            margin:0 !important;
            padding:0 !important;
            -webkit-text-size-adjust:100% !important;
            -ms-text-size-adjust:100% !important;
            -webkit-font-smoothing:antialiased !important;
        }
    /*
    @tab Button
    @section background-Colour
    */
        .button{
            /*@editable*/background-color:#e5e5e5 !important;
            /*@editable*/color:#000000 !important;
            height:43px !important;
            margin-right:0 !important;
            font-size:15px !important;
            padding:0 5px !important;
        }
    /*
    @tab Button_2
    @section background-Colour
    */
        .button_2{
            /*@editable*/background-color:#e5e5e5 !important;
            /*@editable*/color:#000000 !important;
            margin-right:0 !important;
            font-size:15px !important;
            padding:0 5px!important;
        }
        a{
            text-decoration:none !important;
            color:black !important;
        }
        span.red-2{
            color:#bc3434 !important;
        }

        span.white-force {
            color:#ffffff !important;
            text-decoration: none;
        }

        .white-force a {
            color:#ffffff !important;
            text-decoration: none;
        }


        img{
            border:0 !important;
            outline:none !important;
            display:block !important;
        }
        table{
            border-collapse:collapse;
            mso-table-lspace:0;
            mso-table-rspace:0;
        }
        td{
            border-collapse:collapse;
            mso-line-height-rule:exactly;
        }
        a,span{
            mso-line-height-rule:exactly;
        }
        .ExternalClass *{
            line-height:100%;
        }
        .white a{
            color:#ffffff;
            text-decoration:none;
        }
        .white1 a{
            color:#333333;
            text-decoration:none;
            background-color:#333333;
        }
        .white2 a{
            text-decoration:none;
        }
        .black a{
            text-decoration:none;
        }
        .black3 a{
            text-decoration:none;
        }
        .black2 a{
            text-decoration:none;
        }
        .red a{
            text-decoration:none;
        }
        .grey a{
            text-decoration:none;
        }
        .grey1 a{
            text-decoration:none;
        }
        .applewhiltelink a{
            color:inherit !important;
            text-decoration:none !important;
        }
        .video img{
            width:100%;
            height:auto;
        }



        .mcnTextContent img{
            height:auto !important;
        }



    @media only screen and (min-width:481px) and (max-width:599px){
        table[class=wrapper]{
            width:100% !important;
        }

}   @media only screen and (min-width:481px) and (max-width:599px){
        table[class=main_table]{
            width:100% !important;
        }

}   @media only screen and (min-width:481px) and (max-width:599px){
        td[class=pad_side]{
            padding-left:14px !important;
            padding-right:14px !important;
        }

}   @media only screen and (min-width:481px) and (max-width:599px){
        td[class=hide],br[class=hide]{
            display:none !important;
        }

}   @media only screen and (min-width:481px) and (max-width:599px){
        img[class=full_img]{
            width:100% !important;
            height:auto !important;
        }

}   @media only screen and (min-width:481px) and (max-width:599px){
        td[class=text],td[class=black],td[class=black2],td[class=red],td[class=white],td[class=white1],td[class=white2],td[class=grey], td[class=white-force]{
            text-align:center !important;
        }

}   @media only screen and (min-width:481px) and (max-width:599px){
        td[class=pad_bottom]{
            padding-bottom:30px !important;
        }

}   @media only screen and (min-width:481px) and (max-width:599px){
        td[class=pad_top],
        td[class=pad_top_split]{
            padding-top:30px !important;
        }

}   @media only screen and (min-width:481px) and (max-width:599px){
        td[class=fix_height]{
            height:30px !important;
        }

}   @media only screen and (min-width:481px) and (max-width:599px){
        td[class=video] img{
            width:100% !important;
            height:auto !important;
        }

}   @media only screen and (max-width:480px){
        table[class=wrapper]{
            width:100% !important;
        }

}   @media only screen and (max-width:480px){
        table[class=main_table]{
            width:100% !important;
        }

}   @media only screen and (max-width:480px){
        td[class=pad_side]{
            padding-left:14px !important;
            padding-right:14px !important;
        }

}   @media only screen and (max-width:480px){
        td[class=hide],br[class=hide]{
            display:none !important;
        }

}   @media only screen and (max-width:480px){
        img[class=full_img]{
            width:100% !important;
            height:auto !important;
            max-width: none !important;
        }

}   @media only screen and (max-width:480px){
        td[class=text],td[class=black],td[class=black2],td[class=red],td[class=white],td[class=white1],td[class=white2],td[class=grey],td[class=white-force]{
            text-align:center !important;
        }

}   @media only screen and (max-width:480px){
        td[class=pad_bottom]{
            padding-bottom:30px !important;
        }

}   @media only screen and (max-width:480px){
        td[class=pad_top],
        td[class=pad_top_split]{
            padding-top:30px !important;
        }

}   @media only screen and (max-width:480px){
        td[class=fix_height]{
            height:30px !important;
        }

}   @media only screen and (max-width:480px){
        td[class=video] img{
            width:100% !important;
            height:auto !important;
        }
}

@media only screen and (max-width:480px){
        td[class=pad_top_split]{
            padding-top:0 !important;
        }
}</style></head>

*edit

Each block that contains text (but may not necessarily end up with an image in it, has the class .grey - I tried these options but to no avail

.grey img {
line-height: 100px (random but taller then the test image)!important;
}

And also 

.grey img {
line-height:unset !important;
}

I just want any images inserted amongst text to ignore the surrounding line-height.

here is an example block

<table width="650" border="0" cellspacing="0" cellpadding="0" align="center" class="wrapper" mc:repeatable mc:variant="text block" style="table-layout:fixed;margin-left:auto;margin-right:auto;">
      <tr>
        <td valign="top" bgcolor="#000000">
          <table width="650" border="0" cellspacing="0" cellpadding="0" align="center" class="wrapper">
            <tr>
              <td width="50" align="center" class="hide"> </td>
              <td valign="top" class="pad_side">
                <table width="550" border="0" cellspacing="0" cellpadding="0" align="center" class="wrapper">
                  <tr>
                    <td valign="top" height="40" class="fix_height"> </td>
                  </tr>
                  <tr>
                    <td align="center" valign="top" style="font-family:Arial, sans-serif;font-size:15px;line-height:25px;color:#000000;background-color:#000000;" mc:edit="lorem_ipsum">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae interdum ligula. Pellentesque feugiat ligula ligula, in interdum dolor aliquet et.</td>
                  </tr>
                  <tr>
                    <td valign="top" height="40" class="fix_height"> </td>
                  </tr>
                </table>
              </td>
              <td width="50" align="center" class="hide"> </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>

Upvotes: 1

Views: 5173

Answers (1)

gj-wes
gj-wes

Reputation: 932

Try mso-line-height-rule: at-least on your images. It's essentially the opposite to mso-line-height-rule: exactly.

This blog post might offer some more insight.

In my own builds I add this Outlook conditional style block below my other embedded styles. Then on my inline styles, I avoid using mso-line-height rule and only set font-size/line-height as normal

  <!--[if mso]>
    <style>
      td,th,p,a,h1,h2,h3,h4,h5,h6 {
        mso-line-height-rule: exactly;
      }
    <style>
  <![endif]-->

Upvotes: 4

Related Questions