13

I have a element on my form that looks like this:

<div style="overflow-y:auto;overflow-x:hidden;height:100%;width:100%">

In IE7 when the page first renders, there are no scrollbars. However, if I resize the page (even just 1 pixel) the scroll bars appear properly.

Is there something I can do so that the scrollbars show properly when the page first displays?

6
  • I realize I'm almost a year late on this one, but I'm having the same problem. Any solution to this?
    – 08Hawkeye
    Commented Jun 17, 2010 at 21:28
  • I am facing the same issue.. any ideas?
    – Łukasz W.
    Commented Feb 9, 2011 at 20:35
  • Sounds like there is a bigger issue. Can you post a link or some HTML? I suspect you have another problem.
    – Dimitry
    Commented Feb 15, 2011 at 16:30
  • Well if you are really desperate you could use some javascript to auto resize the window.
    – Jason
    Commented Feb 15, 2011 at 22:05
  • This only happens in IE7? Not IE8, Chrome, or FF? Commented Feb 15, 2011 at 23:06

6 Answers 6

11

Set overflow-y to "scroll" if you always want a scrollbar.

4
  • 1
    I could do that, but I only want the scrollbar to show if it's necessary.
    – DaveK
    Commented Aug 13, 2009 at 17:22
  • 1
    is there overflowing content when the page is first rendered? Commented Aug 13, 2009 at 17:23
  • Yes, the page that loads initially is larger than the container and should cause an overflow.
    – DaveK
    Commented Aug 13, 2009 at 17:25
  • 1
    is content added to the div after it would have been parsed (the inline css interpreted)? Commented Aug 13, 2009 at 17:30
6
+25

That's the kind of problem which comes from the hasLayout bug in IE6 and IE7. It affects how IE renders the page. To get rid of the problem, you should consider reading this great page about the hasLayout behavior and its hacks. There's also the official Microsoft hasLayout dedicated page.

The hacks suggested are height: 0; and zoom: 1; depending on the version of IE you want to target and the type of your element.

2

I used overflow: scroll and it fixed my issue with the disappearing scrollbar on load. My tables are dynamically created and should scroll automatically when the page loads as I have enough data to start with.

I didn't have to make any other changes. Now it works in all three browsers IE7, IE8 and FF.

2

You should add margin-right: 20px to your style, so the scrollbar will have enoguh place to be displayed.

1
  • Why 20px? The scrollbar width isn't the same on all browsers and operating systems. I realize Snus has left the building, but it would be better to calculate the scrollbar width instead of using some fixed value.
    – WynandB
    Commented Jun 27, 2014 at 1:46
1

Try Internet Explorer 9 and see if your current script works there. Most probably it does work there, and if so, you might rethink your inner desire to make it all compatible with previous versions of Internet Explorers like 7 etc

With Chrome and FireFox stealing away audiences from IE to fast, I forecast that its only a matter of time that before such questions will be obsolete...

1
  • As long as IE6 +IE7 +IE8 make up a big chunk of your audience, you should always think about them. And as long as many XP users won't upgrade (IE9 doesn't work on XP) these issues won't be obsolete for many years from now. Commented Mar 23, 2011 at 0:37
1

try absolute widths and heights, upon resize IE7 may be calculating the dimensions itself when you go to resize to page, whereas on page load it isnt...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.