CODEWITHSUNDEEP
cssimage
Denys Medynskyi
Denys Medynskyi

Reputation: 2353

Why my image height is setting wrongly on first load in Firefox?

I'm using

From Firebug

element {
position: absolute;
top: 0px;
left: 0px;
display: block;
z-index: 5;
opacity: 1;
width: 300px;
height: 18px;
 }

From Google console:

  element.style {
 position: absolute;
 top: 0px;
 left: 0px;
 display: none;
 z-index: 4;
 opacity: 0;
 width: 300px;
 height: 260px;
 }

Here is screenshot of problem:

and here is my code generated by Rails helper:

    <img alt="Home_page_4" height="260" src="http://127.0.0.1:3000/assets/home_page_4.jpeg" width="300" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 4; opacity: 0; width: 300px; height: 260px; ">

Can someone tell me what I'm doing wrong ?

Upvotes: 0

Views: 67

Answers (1)

keaukraine
keaukraine

Reputation: 5364

Please always specify dimensions, instead of "260" and "300" use "260px" and "300px". And 0 values have to be specified without px dimensions. Also, please close <img/> tag like this:

<img alt="Home_page_4" height="260px" src="http://127.0.0.1:3000/assets/home_page_4.jpeg" width="300px" style="position: absolute; top: 0; left: 0; display: none; z-index: 4; opacity: 0; width: 300px; height: 260px; " />

Actually, you don't have to use width and height attributes, they are deprecated. So this markup should work fine:

<img alt="Home_page_4" src="http://127.0.0.1:3000/assets/home_page_4.jpeg" style="position: absolute; top: 0; left: 0; display: none; z-index: 4; opacity: 0; width: 300px; height: 260px; " />

Upvotes: 2

Related Questions