Member Avatar for sookoon

I'm experiencing this problem, and I'm not quite sure how to resolve it.

I have the following code for the scrolled div:

<div style="overflow-x: hidden; overflow-y: auto; width: 942px; height: 300px;">

And for a horizontally-scrolling page, I have:

<div style="overflow-x: auto; overflow-y: hidden; width: 942px; height: 280px;">

It works fine in FireFox, but in IE, the overflow stretches the page. Many times, when you pull up the page, it looks fine, but if you click on another open window of yours, then click back, it messes up.

Please help!

  • 3 Contributors
  • 4 Replies
  • 126 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by vishalkhialani

Dani AI

Generated

Intermittent stretching like this in IE usually points to one of three causes: an IE repaint/hasLayout bug, a scrollbar appearing/disappearing that changes the available width, or the page running in quirks mode because of invalid/missing DOCTYPE. ’s symptom (looks fine, then breaks after switching windows) matches those patterns; not being able to reproduce suggests it depends on IE version/settings. ’s suggestion to validate markup is important because standards vs quirks mode changes IE behavior.

Practical diagnostic checklist:

  • Confirm the exact IE/document mode (use the Developer Tools) and reproduce the problem in a minimal test page containing only the scroller and a few children.
  • Check whether a vertical scrollbar shows only after focus/switching — that appearance can push content horizontally and “stretch” the page.
  • Inspect children for widths or fixed images that exceed the container width (even by a few pixels).

Common, low-risk fixes that have helped others:

  • Ensure a standards DOCTYPE is the very first line so the browser uses standards mode.
  • Force hasLayout in old IE (IE6/7) on the scroller container to avoid repaint/reflow bugs. For example:
/* force hasLayout in older IE to fix repaint/reflow */
.scroller { zoom: 1; position: relative; }
  • Avoid scrollbar-induced jumps by reserving space: use an always-visible vertical scrollbar (overflow-y: scroll) on the scroller instead of auto, or reduce the inner width slightly so the scrollbar doesn’t cause overflow.
  • If layout is table-based, consider converting to CSS layout or isolate fixes into an IE-only stylesheet (conditional comments) so modern browsers remain unaffected.

If those steps don’t cure it, force a repaint on focus (toggle a harmless style or set element.style.zoom via script) and retest across IE versions/document modes to isolate the exact trigger.

Recommended Answers

All 4 Replies

Member Avatar for Airshow

Sookoon,

Good and bad news.

Visited your pages but can't reproduce the symptoms. They seem to behave ok. (IE6 under Win 2000).

Airshow

Member Avatar for sookoon

Sookoon,

Good and bad news.

Visited your pages but can't reproduce the symptoms. They seem to behave ok. (IE6 under Win 2000).

Airshow

Yes, that's a frustrating thing. Many times it shows up fine. Try this:

Pull up that page, then click on another open window of yours, then click back on that page (you may need to do it a couple of times (other times, it pulls up incorrectly the first time you arrive at that page). Here's a screenshot:

Member Avatar for Airshow

Still behaves properly I'm afraid.

There is a bunch of known IE rendering bugs. Have a look through the list here. Solutions are offered for most of them. Yours may be covered.

Airshow

Member Avatar for vishalkhialani

Hi,
There are many version of html and you need to tell the browser which version you are using so avoid discrepancies.

1) Go to http://validator.w3.org/ and put in ur url you will find ur page has 61 errors. Get rid of them and then the browsers won't be confused.

2) I noticed you have used tables to layout your products. Suggest you only div as tables are not very seo friendly.

Cheers,
Vishal

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.