CODEWITHSUNDEEP
htmlcssposition
Totty.js
Totty.js

Reputation: 15831

Html element changes position when the page is refreshed in chrome

I'm using chrome and when I go to this page the menu is not visible. The menu is the 3 lines button at the top right. If you go now and open the inspector the element is hidden because is above the header. Now if you refresh the page the menu is correctly positioned. Also happens in chromium. The page in question is: http://playszone.com/ (Don't click on the link, read below)

In order to reproduce the problem you should not click on the link. Open a new tab and copy paste the url. Then refresh the page.

If you go to inspector and disable and enable the position on the body > .wrapper > header > .icons it will show at the right place. I really cannot understand what is making the page to wrongly position the element, only when open in a new tab and write the site url.

What is the problem? Is my fault or what?

Upvotes: 2

Views: 4327

Answers (2)

wuno
wuno

Reputation: 9865

Add this, it fixes it. bottom: 1px

.icons {
display: inline-block;
height: 55px;
position: absolute;
right: 0;
bottom: 1px;
}

Or...

.icons {
display: inline-block;
height: 55px;
float: right;
}

Upvotes: 1

IronWilliamCash
IronWilliamCash

Reputation: 539

Actually it's not in the right place. It's in the "same place" in the code, but when you hover the code of the "icons" div, it shows you on the page that it's actually a little bit lower, behind your white menu and since the menu is probably rendered on top of it, you can't see it.

A quick fix would probably be to set the "icons" div with absolute positionning and setting the position-top to 0px.

Upvotes: 1

Related Questions