Chrome: Very, very weird overflow issue

[Lichtathlet]

Hi guys,

I hope you can help me out. This error drives me nuts for hours…

When you visit this site with Chrome, you see a scroll bar on the bottom of the row:

https://de.personello.com/hochzeit/geschenke-trauzeugen.htm#jm_brautjungfern

If you scroll up, you’ll find exact the same elements without a scroll bar.

Exact same image sizes, same css code, same html structure… and it works.
Only this one row doesn’t and I can’t figure out what’s happening here.

Thank you all so much for your help in advance!

[Atelierbram]

Making the container for the images, these links, block level-elements will make the code more sturdy, this will then prevent those links from collapsing, and any containing image of “escaping” it’s parent. This will also solve the overflow problem in Chrome.

.price a {
  display: block;
}

[Lichtathlet]

I see your point. I still wonder what causes only this single row to overflow. there’s no other row in the whole project behaving like that.

[Atelierbram]

Looking at the HTML-markup, what is different there is a missing wrapper <div class="labelWrap">.

Which amounts to the same phenomenon: the wrapper element for the image should be a block-level element to prevent the image from escaping it’s parent-wrapper.

There are other image modules with parent links lacking this <div class="labelWrap"> as well, but there the overflowing is saved by the next sibling text block within a <p> tag: again a block-level element. That is just a lucky stroke. This is just one of those things one should be aware of with making layouts with floats. The habit of making image-wrappers block-level elements will always make the code more sturdy.

Do you use “inspect element” with browser’s build in DevTools? If so one can see the wrapper collapsing to zero height.
Have you considered making the website responsive, and/or using flexbox for the modules?

[Lichtathlet]

Hi,

I still don’t get why it’s only this row. There are lots of other sites that contain the same boxes (without the labelwrap and pricetag), for instace here
https://de.personello.com/fotogeschenke.htm

and they all work perfectly fine.

I will change the css like you suggested, I totally understand why it’s better. I just don’t get what is happening there.

regarding your other questions: The website is also responsive but not fluid since we like to keep 2 independent versions for mobile and desktop. Flexbox unfortunately is not an option at the moment.

Thanks for your help

[Atelierbram]

Glad to be of help. We may be looking for something that’s beyond the scope of what we can know. I see it like this, there is vulnerabilities in the CSS layout, sometimes browsers will be forgiving and render the page like one would like, in another instances one of them will give priority to something like page-rendering-speed for example and “mess things up”. That’s also one reason why I keep emphasising sturdy code, semantic HTML, and styling those CSS layout modules in the most unambiguous way.

I don’t see how those two independent versions for mobile and desktop are done, but it seems to work. Out of curiosity: is this maintainable?. Too bad not being able to use flexbox: it was made for things like these.

[Author]

Posts