Member Avatar for majama

Hey all,

I am designing my first web site, and have run into an issue..
In one tab of my spry tabbed accordion I have five images placed on a horizontal line, with a horizontal scroll. (because the container that holds the accordion has a limited width and height.)

This usually works fine, but sometimes the images ends up overlapping eachother. I refresh the page, and then it works out fine. Since the problem only happens now and then, I can't really tell what's wrong. Anyone got a clue? I would really appreciate it!!

URL:

Newbie:)

  • 3 Contributors
  • 3 Replies
  • 122 Views
  • 10 Hours Discussion Span
  • Latest Post Latest Post by majama

Dani AI

Generated

This kind of intermittent overlap usually points to a timing/layout quirk rather than a corrupt image. The symptoms described by , plus the reports from and that it looks fine in some browsers, suggest the browser sometimes lays out the row before it knows each image’s size or before the tab content is fully visible. That produces small rounding/flow errors that only go away after a reflow (refresh).

Quick, practical fixes to try (start with one, test before moving to the next):

  • Give each image an explicit size (width and/or height) so the browser can reserve space before the image finishes loading.
  • Keep the image row from wrapping and let overflow handle scrolling instead of relying on automatic table sizing.
  • When a tab panel is revealed by the Spry widget, force a reflow so the browser recalculates positions (a tiny script that reads an element property or toggles a harmless style will do).

Example CSS patterns that prevent overlap (pick one approach and adjust widths to match your design):

/* inline-block / nowrap approach */
.gallery { white-space: nowrap; overflow-x: auto; }
.gallery img { display: inline-block; vertical-align: top; width: 180px; height: auto; }

/* flexbox approach */
.row { display: flex; overflow-x: auto; }
.row img { flex: 0 0 auto; width: 180px; }

If the problem persists in older IE, try a reflow trigger when the panel opens (setting element.style.zoom = 1 or reading element.offsetWidth is a common fix). Use developer tools to inspect computed widths before and after a refresh to see which element is collapsing. If you must keep a table, give it a predictable layout (table-layout fixed / explicit column sizing) so the browser won’t guess and sometimes misplace cells.

Recommended Answers

All 3 Replies

Member Avatar for colweb

Welcome.

Did look at the site with Firefox and didn't see any image overlap. Is the overlap only in specific browsers?

In the "products" part you are using tables. Maybe each of the <td>'s need to have the width set also to avoid overlapping. But it is hard to tell what needs to be changed if you don't see it happen.

Member Avatar for Member #120589

ok in chrome.

Member Avatar for majama

Thanks for the replies!

Uhm, I guess it’s IE thats giving me trouble, but think it has happened in Firefox aswell. But if you guys don’t experience it, I guess that’s a good sign.. Will try adding width to the <td> though.

Thanks again!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.