CODEWITHSUNDEEP
htmlcsshtml-email
jakecraige
jakecraige

Reputation: 2727

Outlook 2013 Cutting off top of image?

I am setting up an email template and the top of a few images were being cut off. This is my code for the images

<td style="line-height: 0"><img src="http://domain.com/image.png"></td>

I have the line height on the td so that the white space underneath will be removed because I want it to be touching the image below.

Top image has a bit of the top being cut off though, how can I fix this?

Upvotes: 21

Views: 33071

Answers (10)

Surya R Praveen
Surya R Praveen

Reputation: 3745

Email Outlook 2016 version issue. Add Line height 1; and display block to image

Fix

<td style="line-height: 1">
   <div>
      <img style="display:block;" src="imageURL">
   </div>
</td>

Upvotes: 0

Timoth&#233;e BENOIST
Timoth&#233;e BENOIST

Reputation: 31

All the answers here just work if you are using the Outlook client but when you'll go on outlook.com you will see some ugly white margin. To solve the issue on both side you have to encapsulate the img in a div.

<td style="line-height: 0">
   <div>
      <img valign="middle" style="display:block; margin: 0" src="imageURL">
   </div>
</td>

Upvotes: 1

patelarpan
patelarpan

Reputation: 8021

I had same problem in my email. i just remove mso-line-height-rule property form my mail it's works for me.

Upvotes: 0

Scott
Scott

Reputation: 141

I set the line height to "1" and this fixed my issue :0)

<table>
  <tr>
    <td style="line-height:1;">
      <img src="http://example.com/138x33-team.png" width="138" height="33" style="display:block;">
    </td>
  </tr>
</table>

Upvotes: 14

burtyish
burtyish

Reputation: 1043

I spent way too much time on this issue, so might as well document my solution for anyone who may see this.

I solved the problem by nesting the image inside another table, like this:

<td style="line-height: 0">
<table>
  <tr>
    <td>
      <img src="http://example.com/image.png">
    </td>
  </tr>
</table>
</td>

Upvotes: 4

lucasasecas
lucasasecas

Reputation: 964

I had the same problem with ol 2013/16.

The best solution is to specify that the line-height is expressed in pixels.

Change line-height:0; to line-height: 0px.

Upvotes: 31

Zach Solomon-Beloin
Zach Solomon-Beloin

Reputation: 1

I experienced this issue in MailChimp when inserting images in text blocks. To solve it, I set the line-height for text blocks to double space. After that, I reset all the styles for each block in my template. Hope this helps!

Upvotes: 0

VanAlbert
VanAlbert

Reputation: 2469

My tests show that in Outlook 2013, unlike earlier Outlook versions, setting line-height to 0 will cause the container to be smaller than the contained image. The result is that the top of the contained image is cropped. The only way I could fix this was to set line-height to a value other than 0. I used line-height: 17px and the images displayed properly. It might work with any other value than 0 -- I didn't test values smaller than 17px.

Setting display: block did not fix this. Since this ONLY is a problem with Outlook 2013 and does not affect any earlier Outlook versions or other mobile or desktop email clients, it's safe to assume it's an Outlook 2013 bug and that a fix from Microsoft isn't to be expected. So if anyone can confirm my findings, it'd be a good idea to just integrate this workaround into your already oversized palette of workarounds to accommodate Microsoft's poor HTML email support.

Upvotes: 2

Bidstrup
Bidstrup

Reputation: 1617

Alway use Display:block on all images, or else you will get some white spaces from time to time :)

Upvotes: 0

jakecraige
jakecraige

Reputation: 2727

The way I fixed this was to not use line-height and instead set the image to display block and this fixed the image issues and still removed the white space underneath

<td><img src="http://domain.com/image.png" style="display:block;"></td>

Hope this helps someone!

Upvotes: 15

Related Questions