Search code examples
outlookhtml-emailzurb-ink

Image height cutoff in Outlook 2007/2010 (well below max height)

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;

I'm using Email on Acid to preview the email. The CSS is being inlined before the email is sent using premailer.

The 2nd image displays fine.

Here's the relevant code and screenshots.

HTML 

<table class="row banner">
  <tr>
    <td class="wrapper last">
      <table class="four columns">
        <tr>
          <td>
            <img class="hide-for-small" src="url-to-image.jpg" width="179" height="47" style="width:179px; height:47px; line-height:47px;" />
            <br/>
            <img src="url-to-image.jpg" width="179" height="63" style="width:179px; height:63px; line-height:63px;" />
          </td>
          <td class="expander"></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

CSS

img {
  outline:none;
  text-decoration:none;
  -ms-interpolation-mode: bicubic;
  width: auto;
  max-width: 100%;
  float: left;
  clear: both;
  display: block;
}

Inlined CSS - after all the CSS is compiled and inlined.

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;

Screenshots

Outlook 2007/2010
enter image description here

Normal Email Clients
enter image description here

I've tried adding height, style="height" and line-height attributes to force the height but to no luck so far.

Solution

  • Floats don't work in Outlook. What you want is to use <td align="left|right|center"> instead. You should use td's valign and height attributes too.

    The width bit could be causing the problem too, you should set the width of the image via the width attribute and then set the style max-width:100% inline to accomplish what you want and keep it cross-client.