Yahoo transforms height into min-height

Question

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;">

I did, but it still gets transformed. Also, I just tested Gmail and it does the same thing as Yahoo. — Lucia Ivascu, Jul 11 '14 at 23:45
That might be why tables are unfortunately so common for formatting html emails — JRulle, Jul 11 '14 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. — Lucia Ivascu, Jul 11 '14 at 23:57
Have you tried taking the inline-style and moving it to normal CSS? — BuddhistBeast, Jul 12 '14 at 05:49
Have a look at this as well: http://www.emailonacid.com/blog/details/C13/9_ways_to_prevent_yahoo_headaches — BuddhistBeast, Jul 12 '14 at 05:50
Thank you, but it doesn't mention anything about height and it doesn't seem to have anything that might help this situation. — Lucia Ivascu, Jul 12 '14 at 22:45

score 2 · Answer 1 · answered Dec 15 '20 at 12:48

2

direct height attribute without style works for yahoo like

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

answered Dec 15 '20 at 12:48

Muhammad Faisal Iqbal

1,796
2
20
43

score 0 · Answer 2 · answered Dec 28 '16 at 21:52

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.

score 0 · Answer 3 · answered Apr 10 '19 at 14:14

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

score 0 · Answer 4 · answered May 28 '19 at 11:39

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;" />

brelig · Answer 5 · 2023-06-20T10:44:40.693

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>

score -1 · Answer 6 · answered Jul 11 '14 at 23:51

-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';

answered Jul 11 '14 at 23:51

Kale

62
4

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. – Lucia Ivascu Jul 11 '14 at 23:55
How can you use JS in emails? – Rahul Gandhi Aug 09 '18 at 15:46

Yahoo transforms height into min-height

6 Answers6

Linked