Yahoo transforms height into min-height

Asked 11/7, 2014 at 23:35 Answered 20/6, 2023 at 10:22

I have just stumbled across the fact that Yahoo mail is transforming all height attributes into min-height. Is there a workaround for this?

<div style="width:55px; height:55px; overflow:hidden;">
   <img alt="user pic" src="assets/main.jpeg" width="55px" />
</div>

The goal of the code above is to hide the bottom part of the image if it's higher than 55px. I've tested this in hotmail and aol and it works fine. Only Yahoo seems to transform my height into min-height:

<div style="width:55px; min-height:55px; overflow:hidden;">

Dimmick answered 11/7, 2014 at 23:35 Comment(7)

Can you set max-height to your height value? – Weymouth 11/7, 2014 at 23:38

I did, but it still gets transformed. Also, I just tested Gmail and it does the same thing as Yahoo. – Dimmick 11/7, 2014 at 23:45

That might be why tables are unfortunately so common for formatting html emails – Weymouth 11/7, 2014 at 23:49

agreed. I am already using tables. The height attribute, even if used on the td, still gets changed. I've tried div as a last resort and it happened that i posted the code with the div. – Dimmick 11/7, 2014 at 23:57

Have you tried taking the inline-style and moving it to normal CSS? – Pellikka 12/7, 2014 at 5:49

Have a look at this as well: emailonacid.com/blog/details/C13/… – Pellikka 12/7, 2014 at 5:50

Thank you, but it doesn't mention anything about height and it doesn't seem to have anything that might help this situation. – Dimmick 12/7, 2014 at 22:45

direct height attribute without style works for yahoo like

<div height="55px" style="width:55px; overflow:hidden;">

Soembawa answered 15/12, 2020 at 12:48 Comment(0)

To fix this:

Put height: 55px; in the <style> tag that is placed in the <head> or <body>. Yahoo! Mail will read the height property if it's defined in the <style> tag.

Gmail, as of now, supports @media queries, but it is best to put height in-line. Gmail no longer converts height to min-height right now, as far as I can tell.

Twylatwyman answered 28/12, 2016 at 21:52 Comment(0)

I believe you're referring to Yahoo! Mail. As of April 2019, I've run into this issue myself and the work around is to simulate the height attribute effect that would otherwise work is to do this:

<br class="yahoo-br" style="display:none; line-height:50px;"/>

Give it a class name like .yahoo-br and set inline style to display: none;, so it doesn't display on other email clients. Put <br/> tags where ever height is needed in the code and add a line-height property and its value can be equivalent to the height attribute value. This will act exactly like a height attribute basically.

To target Yahoo! Mail, you can add css in your <style> in the <head> tag as so:

/* Yahoo! specific CSS */
br.yahoo-br { display: none; }
    @media screen yahoo {
        br.yahoo-br { display: block !important; }
}

More on how to target Yahoo! Mail found here: The New Yahoo! Mail and How to Target It

Blameless answered 10/4, 2019 at 14:14 Comment(0)

As of now in May-2019 the Yahoo mail still transforms inline style height to min-height so what i have found as workaround is add max-height also in your inline style then it will works.

in my case i have image in my html and i just want it's height to set to 30px but yahoo transforms the height to min-height.

so it is becoming larger image but i want it to smaller so i have applied max-height in inline style and it worked.

see my img tag below i have applied max-height in inline style.

<img src="<?php echo $url->assets ?>img/checked.png" style="height:30px;float: left;max-height:30px;" />

Herbalist answered 28/5, 2019 at 11:39 Comment(0)

For me, all the previous variants did not help. The only thing that worked in my table was to add the 'line-height' property to the styles of 'td', equal to the height of the block.

All images in table had the same width but different height and because of this the height of all 'td' was vary after yahoo 'height-to-min-height' transform. So make the parent block have the same height for different images i put "line-height" to style. The height of the image does not exceed the parent block height.

<td style="height: 55px; line-height: 55px; vertical-align: middle">
<img style="width:32px,height: auto;> <span>bla</span>
</td>

Antechoir answered 20/6, 2023 at 10:22 Comment(0)

-1

Have you tried giving it a max height of 55 or 56px? If you do that the height should have no where else to go forcing it to be what you want it to be. Alternatively you could set the height with JS (if it is supported).

max-height:56px

with js:

document.getElementById('div_id').style.height = '55px';

Signalize answered 11/7, 2014 at 23:51 Comment(2)

I already tried max-height and it still gets transformed into min-height by both yahoo and gmail. I am trying to avoid js in my email templates if possible. – Dimmick 11/7, 2014 at 23:55

How can you use JS in emails? – Minerva 9/8, 2018 at 15:46

Recommended topics

Hot tags