Member Avatar for Dani

Could someone please help me? I can't figure out why this site is giving a horizontal scrollbar at lower resolutions? All of my tables use percentage widths instead of absolute??

It would be great if someone could take a looksie at the html and see if they could figure it out. I'm just staring and staring and turning up empty.

  • 3 Contributors
  • 4 Replies
  • 123 Views
  • 5 Years Discussion Span
  • Latest Post Latest Post by raju.raghup

Dani AI

Generated

This thread shows the typical pattern: a fixed-size embedded object (Flash) inside a fluid table can force the whole layout wider than the viewport. As discovered, removing the Flash removed the scrollbar; 's early hunch about a header/animation was reasonable, and 's suggestion to post the HTML would have let responders point to the exact element.

Why it happens: table cells will not shrink below the widest unbreakable content (images, plugin stages, preformatted text). An <object>/<embed> with a fixed pixel width or an SWF whose stage doesn't scale will expand its cell, and older browsers or plugins sometimes fail to honor percentage widths. That single oversized element causes the horizontal scrollbar even when outer tables use percent widths.

Practical remedies that work reliably:

  • Make plugin/embed elements fluid: set width="100%" on the tag and constrain them with CSS.
  • Add responsive rules so replaced elements cannot grow beyond their container.
  • Use the SWF scale parameter when embedding Flash (showall, exactfit, etc.) if keeping the SWF is necessary.
  • Prefer HTML5/CSS/SVG animations today (Flash is end-of-life and blocked by modern browsers).

Example CSS (often applied temporarily to diagnose or permanently to fix):

img, object, embed, iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

Debugging tips: enable outlines in devtools to spot the overflowing element, compare document.body.scrollWidth to window.innerWidth, and avoid overflow-x: hidden as a long-term fix because it masks the real issue. For modern guidance on constraining replaced elements see the MDN max-width documentation (https://developer.mozilla.org/en-US/docs/Web/CSS/max-width). For context about Flash EOL and why replacing it is recommended see Adobe's Flash end-of-life notice (https://www.adobe.com/products/flashplayer/end-of-life.html).

Recommended Answers

All 4 Replies

Member Avatar for samaru

Have you checked your stylesheets as well? You probably know this already but the blue header up on the top is what widens it (and thus makes the scroll bar appear). I looked at the code briefly, and removed the Flash animation and it looked fine. I think the column where the animation is placed in is forcing the following column (where your have your "Search For:" textbox) to move over to the right too much. It's something that I could change manually but I know a lot of the code for this forum is generated dynamically, so I'm not really sure how you would handle it.

Member Avatar for Dani

My stylesheets are ultra simple - definitely not anything in there. I actually knew this already, but the problem ISN'T in the blue header. As far as I was always able to tell, it was in the grey navigation bar above the logo.

I gave up and got rid of the flash ;) Simple as that. It was getting on my nerves :P

All I did was replace the flash animations with text and no more scrolling problems. So it wasn't anything wrong with my tables.

Who knows. I'm not in the mood to think about it right now ;) Maybe later.

Member Avatar for samaru

The reason why I suggested the blue header was because it was the only one that stuck out when I maximized the window. I took the Flash animation out and everything looked fine (the way it looks now).

Member Avatar for raju.raghup

Could someone please help me? I can't figure out why this site is giving a horizontal scrollbar at lower resolutions? All of my tables use percentage widths instead of absolute??

It would be great if someone could take a looksie at the html and see if they could figure it out. I'm just staring and staring and turning up empty.

Post your html code.

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.