title: Image height cutoff in Outlook 2007/2010 (well below max height)
body: <p>I have an image in an HTML email template where the height is being cutoff. I'm using the Zurb Ink email framework. The setup is two images that are supposed to stack on top of each other. From what I can tell the image is being cutoff at 19px in height, while it's actual height is 47px;</p>
  
  <p>I'm using Email on Acid to preview the email. The CSS is being inlined before the email is sent using <code>premailer</code>.</p>
  
  <p>The 2nd image displays fine. </p>
  
  <p>Here's the relevant code and screenshots.</p>
  
  <p><strong>HTML</strong>  </p>
  
  <pre><code>&lt;table class="row banner"&gt;
    &lt;tr&gt;
      &lt;td class="wrapper last"&gt;
        &lt;table class="four columns"&gt;
          &lt;tr&gt;
            &lt;td&gt;
              &lt;img class="hide-for-small" src="url-to-image.jpg" width="179" height="47" style="width:179px; height:47px; line-height:47px;" /&gt;
              &lt;br/&gt;
              &lt;img src="url-to-image.jpg" width="179" height="63" style="width:179px; height:63px; line-height:63px;" /&gt;
            &lt;/td&gt;
            &lt;td class="expander"&gt;&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/table&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>img {
    outline:none;
    text-decoration:none;
    -ms-interpolation-mode: bicubic;
    width: auto;
    max-width: 100%;
    float: left;
    clear: both;
    display: block;
  }
  </code></pre>
  
  <p><strong>Inlined CSS</strong> - after all the CSS is compiled and inlined.</p>
  
  <pre><code>td {
    word-break: break-word; 
    -webkit-hyphens: auto; 
    -moz-hyphens: auto; 
    hyphens: auto; 
    border-collapse: collapse !important; 
    vertical-align: top; 
    text-align: left; 
    color: #222222; 
    font-family: Helvetica, Arial, sans-serif; 
    font-weight: normal; 
    line-height: 19px; 
    font-size: 13px; 
    margin: 0; 
    padding: 0px 0px 10px;
  }
  
  img {
    width: 179px; 
    height: 47px; 
    line-height: 47px;
    outline: none; 
    text-decoration: none; 
    -ms-interpolation-mode: bicubic; 
    max-width: 100%; 
    float: left; 
    clear: both; 
    display: block;
  </code></pre>
  
  <p><strong>Screenshots</strong></p>
  
  <p>Outlook 2007/2010<br>
  <img src="https://i.stack.imgur.com/VEIpp.jpg" alt="enter image description here"></p>
  
  <p>Normal Email Clients<br>
  <img src="https://i.stack.imgur.com/Yp8dq.png" alt="enter image description here"></p>
  
  <p>I've tried adding <code>height</code>, <code>style="height"</code> and <code>line-height</code> attributes to force the height but to no luck so far.</p>