Mjml: Height of images in table are cropped in Windows 7 Outlook clients

Created on 27 Mar 2018  Â·  6Comments  Â·  Source: mjmlio/mjml

I'm trying to build a 5-column table that contains an image asset in the first column. However, after testing in Litmus, I noticed that the image height is being cropped in Windows 7 Outlook clients (2007, 2013 and 2016). I've tried adding height to the image, to the containing cell, padding, etc. but nothing has worked so far.

Reproduction Steps:

https://mjml.io/try-it-live/rk9mlVO5z

Expected behavior:

Should look like this:
screen shot 2018-03-27 at 4 59 47 pm

Observed behavior:

In Windows 7 Outlook 2007, 2013 and 2016, the image height is being cropped:

screen shot 2018-03-27 at 4 59 18 pm
screen shot 2018-03-27 at 4 59 26 pm
screen shot 2018-03-27 at 4 59 35 pm

MJML version:

Mjml 4.0.0

Email clients the bug is seen on:

Windows 7

  • Outlook 2007
  • Oulook 2013
  • Outlook 2016

Most helpful comment

Hi,

Just reset the line height to 1 or 100% inside your table and it will work
fine

On Tue, Mar 27, 2018 at 11:05 PM, Althea Yi notifications@github.com
wrote:

I'm trying to build a 5-column table that contains an image asset in the
first column. However, after testing in Litmus, I noticed that the image
height is being cropped in Windows 7 Outlook clients (2007, 2013 and 2016).
I've tried adding height to the image, to the containing cell, padding,
etc. but nothing has worked so far.

Reproduction Steps:

https://mjml.io/try-it-live/rk9mlVO5z

Expected behavior:

Should look like this:
[image: screen shot 2018-03-27 at 4 59 47 pm]
https://user-images.githubusercontent.com/16291524/37994801-a734c594-31e0-11e8-9936-9d7d098ed62c.png

Observed behavior:

In Windows 7 Outlook 2007, 2013 and 2016, the image height is being
cropped:

[image: screen shot 2018-03-27 at 4 59 18 pm]
https://user-images.githubusercontent.com/16291524/37994862-d2b70f56-31e0-11e8-9289-b357b65dad94.png
[image: screen shot 2018-03-27 at 4 59 26 pm]
https://user-images.githubusercontent.com/16291524/37994863-d2c2eed4-31e0-11e8-8d3d-dccb5729c154.png
[image: screen shot 2018-03-27 at 4 59 35 pm]
https://user-images.githubusercontent.com/16291524/37994864-d2cf4f94-31e0-11e8-8126-a8764409e190.png

MJML version:

Mjml 4.0.0

Email clients the bug is seen on:

Windows 7

  • Outlook 2007
  • Oulook 2013
  • Outlook 2016

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/mjmlio/mjml/issues/1096, or mute the thread
https://github.com/notifications/unsubscribe-auth/AAizzVrofLTu9vkm557WTBWYic3bZgMtks5tiqmxgaJpZM4S9o15
.

--
Cordialement,
Maxime BRAZEILLES

All 6 comments

Hi,

Just reset the line height to 1 or 100% inside your table and it will work
fine

On Tue, Mar 27, 2018 at 11:05 PM, Althea Yi notifications@github.com
wrote:

I'm trying to build a 5-column table that contains an image asset in the
first column. However, after testing in Litmus, I noticed that the image
height is being cropped in Windows 7 Outlook clients (2007, 2013 and 2016).
I've tried adding height to the image, to the containing cell, padding,
etc. but nothing has worked so far.

Reproduction Steps:

https://mjml.io/try-it-live/rk9mlVO5z

Expected behavior:

Should look like this:
[image: screen shot 2018-03-27 at 4 59 47 pm]
https://user-images.githubusercontent.com/16291524/37994801-a734c594-31e0-11e8-9936-9d7d098ed62c.png

Observed behavior:

In Windows 7 Outlook 2007, 2013 and 2016, the image height is being
cropped:

[image: screen shot 2018-03-27 at 4 59 18 pm]
https://user-images.githubusercontent.com/16291524/37994862-d2b70f56-31e0-11e8-9289-b357b65dad94.png
[image: screen shot 2018-03-27 at 4 59 26 pm]
https://user-images.githubusercontent.com/16291524/37994863-d2c2eed4-31e0-11e8-8d3d-dccb5729c154.png
[image: screen shot 2018-03-27 at 4 59 35 pm]
https://user-images.githubusercontent.com/16291524/37994864-d2cf4f94-31e0-11e8-8126-a8764409e190.png

MJML version:

Mjml 4.0.0

Email clients the bug is seen on:

Windows 7

  • Outlook 2007
  • Oulook 2013
  • Outlook 2016

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/mjmlio/mjml/issues/1096, or mute the thread
https://github.com/notifications/unsubscribe-auth/AAizzVrofLTu9vkm557WTBWYic3bZgMtks5tiqmxgaJpZM4S9o15
.

--
Cordialement,
Maxime BRAZEILLES

@iRyusa Thank you, it worked perfectly!

Will there be a default line-height set in the mjml table that will fix this?

@iRyusa Thank you, it worked perfectly!

It worked for me too. Just to make it clear :
<mj-table ..... line-height="100%">

Weird that 1% work it should be 1 or 100% 🤔

On Sat, Feb 9, 2019 at 3:45 PM Jeremy ISRAEL notifications@github.com
wrote:

@iRyusa https://github.com/iRyusa Thank you, it worked perfectly!

It worked for me too. Just to make it clear :

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/mjmlio/mjml/issues/1096#issuecomment-462050182, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AAizzSuyetTKIPsiacqBM-Ip1eWle8FXks5vLt79gaJpZM4S9o15
.

--
Cordialement,
Maxime BRAZEILLES

Weird that 1% work it should be 1 or 100% 🤔
…
On Sat, Feb 9, 2019 at 3:45 PM Jeremy ISRAEL @.*> wrote: @iRyusa https://github.com/iRyusa Thank you, it worked perfectly! It worked for me too. Just to make it clear : — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1096 (comment)>, or mute the thread https://github.com/notifications/unsubscribe-auth/AAizzSuyetTKIPsiacqBM-Ip1eWle8FXks5vLt79gaJpZM4S9o15 .
-- Cordialement, Maxime BRAZEILLES

You are right ! Editing my post.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

valstu picture valstu  Â·  3Comments

lucasnantonio picture lucasnantonio  Â·  4Comments

hellfish2 picture hellfish2  Â·  4Comments

ghost picture ghost  Â·  4Comments

iwanaga-sakura picture iwanaga-sakura  Â·  4Comments