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?

Improve this question
6
  • I realize I'm almost a year late on this one, but I'm having the same problem. Any solution to this? Commented Jun 17, 2010 at 21:28
  • I am facing the same issue.. any ideas? 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. Commented Feb 15, 2011 at 16:30
  • Well if you are really desperate you could use some javascript to auto resize the window. 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

Reset to default
11

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

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

I could do that, but I only want the scrollbar to show if it's necessary.
is there overflowing content when the page is first rendered?
Yes, the page that loads initially is larger than the container and should cause an overflow.
is content added to the div after it would have been parsed (the inline css interpreted)?
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.

Improve this answer

Comments

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.

Improve this answer

Comments

2

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

Improve this answer

1 Comment

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.
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...

Improve this answer

1 Comment

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.
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...

Improve this answer

Comments

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.