Member Avatar for sdg

I have discoved one of the sites I designed with a main table width of 100%, scrolls left to right in Windows 2000 platforms. Does anyone know a solution to this problem? Most other viewers are using high resolution monitors so I don't want to reduce the table width. Imbedded images only account for less than 900 px width.

Thanks!

  • 3 Contributors
  • 4 Replies
  • 80 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

reported a 100% table that still produces horizontal scrolling in IE; suggested a fixed-width element might be to blame and asked for browser and source. The practical approach is: reliably find the overflower, fix or make it fluid, and only then change layout rules. Below are fast diagnostics and low-impact fixes that keep a 100% table.

Run this small script in the browser console to list elements wider than the viewport (helps pinpoint the offender):

(function(){
  var vw = document.documentElement.clientWidth;
  var els = document.getElementsByTagName('*');
  for (var i=0;i<els.length;i++){
    var e = els[i];
    if (e.scrollWidth > vw){
      console.log('Overflow:', e.tagName, e.id || '', e.className || '', 'width', e.scrollWidth);
    }
  }
})();

If devtools are not available, use a quick binary-hide method: hide the right half of the page (or successive blocks) until the scroll disappears — that narrows the problem area quickly. Common culprits: images, non-breaking strings, fixed-width layouts inside cells, or absolutely positioned elements.

Fixes to try (non-destructive):

  • Make images scale: img { max-width:100%; height:auto; }
  • Replace fixed-width decorative strips with background-repeat: repeat-x or CSS (no static wide image).
  • Use temporary debug CSS to reveal overflowers: * { outline:1px solid #f00; }
  • Avoid overflow-x:hidden on body as the only solution; it hides symptoms.

If older IE support is required, note that legacy browsers may not honor max-width; provide the exact IE version and the table markup for a targeted tweak as suggested.

Recommended Answers

All 4 Replies

Member Avatar for Member #114696

>Windows 2000 platforms.
It really doesnt matter, tell the browser with which you are encountering problem.

Also, I really cant solve the problem without looking at source code or the webpage, so post that too.

Member Avatar for MidiMagic

That will always happen with tables if the content won't fit in the browser window.

If the display is 600 X 800, you images are already too wide. Either reduce the image sizes, or let the page scroll with the small screen resolution.

Also, don't put size styles (width, height) and surrounding styles (margin, border, padding) in the same tag or css definition. Nest two tags, one with the sizes, and the other with the surrounding styles.

Member Avatar for sdg

URL is
Browser is IE

Member Avatar for MidiMagic

You have an image or a group of images that together are creating a fixed width. Once those images butt against each other, the page becomes incompressible.

I see an image creating the look of a horizontal red bar. I think this is causing the blockage. Use a style to create that instead.

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.