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