All geek questions in one place

Html elements are unexpectedly invisible when loading the first page in chrome

I am working on my new online portfolio at http://asbjorn.org/ny/ and I have run into the strangest problem!

Each time you open the page for the first time, the next and previous buttons for the slide show are not displayed. If I open the inspector, they will appear immediately, and they will also appear when the page reloads.

They are pretty standard html elements, they are not added dynamically, so I DO NOT know why this is happening! Of course, I can’t have the site visitors reload the page to see them.: /

I really hope someone can help me! :)

update: this seems to be a problem only with chrome. For me, this happens sequentially in Chrome on Win7 and OSX. Some of my friends also have the same problem (maybe in chrome on osx)

+4
source share
1 answer

So, I will answer the answer. When I see a problem in Chrome 22 and I raise the inspector, I note that div #previousLink and #nextLink have width of 0 in broken state. Try setting an explicit width for them in your CSS, or use the display: block attached image.

 #previousLink { width: 31px; } #nextLink { width: 37px; }

or

 #previousLink img, #nextLink img { display: block; }

I think the combination of these inline elements and your overflow: hidden rule bites you. I think. This is a difficult mistake!

+3
source

Source: https://habr.com/ru/post/1436686/

More articles:


All Articles