Firefox replaces style="height:164px;" with "height:0px;" - unlike Chrome, Safari, Vivaldi - why?
Of all browsers I have tried, only Firefox replaces 'style="height:164px;" with "style="height:0px;". '
The code is
<li style="padding: 0px 10px 10px 10px; margin-top: 25px;margin-bottom: 10px;position: relative;display: inline-block;"><img src="https://indelight.co.uk/wp-content/uploads/2018/09/photography_trans_full.png" style="height: 164px; width: auto; background-color: rgb(52, 226, 224);" ratio="4x4"></li>
However in Firefox this is replaced with
<li style="padding: 0px 10px 10px 10px; margin-top: 25px;margin-bottom: 10px;position: relative;display: inline-block;"><img src="https://indelight.co.uk/wp-content/uploads/2018/09/onlinesales_trans_full.png" style="height: 0px; width: auto; background-color: rgb(227, 114, 49);" ratio="4x4"></li>
This is not happening in other browsers.
Modified by cor-el
All Replies (3)
Can you provide a working example on the https://jsfiddle.net/ or https://codepen.io ? Thanks.
Alas, the code is generated in php so copying what firefox did into an html box wouldn't really show anything. It started by changing inline image height from 164px to 1064px and then after small code changes to 0px. I have now rejigged the code - simply moved style elements - and the behaviour has stopped!
I ws just curious as to why only Firefox did this. Anyway I'm happy now so might as well close this
Is this an existing image because I do not get content if I paste the link in the location/address bar?
If you have content blocking extensions then this might also cause this.