1

I have a div which pops up into the middle of the screen and is populated with some arbitrary content. I need it to scroll if the content added doesn't fit within the space available.

The basic styling is left: 25%; width: 50%; max-height: 70%

If the screen is big enough it all works fine. In Firefox, if there's not enough space, it also works nicely, adding a vertical scrollbar to the division. But in IE, it adds an annoying and unrequired horizontal scrollbar, and I can't figure out a way to get rid of it.

You can see some screenshots of what I mean here: http://dl.dropbox.com/u/15633144/popup.html

Sorry I can't post the actual HTML, which certainly doesn't make this any easier! But I'm hopeful this is a standard problem which people have worked around before.

The usual solution posted on here plenty of times is overflow-x / overflow-y. But in some cases the div contents do actually need to scroll horizontally, so I can't use this technique.

asc99c
  • 3,815
  • 3
  • 31
  • 54
  • 1
    You can create an example at jsfiddle.net if you can't allow access to your server :) – Kyle Feb 01 '11 at 11:35

3 Answers3

1

First IE don't support max-height CSS property.

And the horizontal scrollbar will show up if some elements inside your container have a width overflowing. You probably have some elements inside with a width:100%. As IE adds random borders/margins here and there, the width of inside elements become larger than its container.

BiAiB
  • 12,932
  • 10
  • 43
  • 63
  • Yes it seems a width 100% element was the problem. I thought I'd removed this before I asked the question, but I've just found there is another code path that puts in width 100%. – asc99c Feb 01 '11 at 12:04
  • 1
    IE appears to support max-height in the version I've got. Possibly IE6 doesn't, but the program is fundamentally AJAX based, and we no longer support IE6 - it's an application not a website, so we can get away with this, if only we could get away with not supporting IE at all ... :) – asc99c Feb 01 '11 at 12:06
0

try looking here CSS div element - how to show horizontal scroll bars only?

Community
  • 1
  • 1
Tomas Jancik
  • 1,471
  • 2
  • 12
  • 18
0

I'm afraid that because you said that sometimes you need to scroll then you will need horizontal scrollbars. Which if you hid them by overflow-x: hidden; wouldn't allow you to scroll. You could work a jQuery If statement and say if window.width was more than the width of your content, show the scrollbar, if not, then hide it!

benhowdle89
  • 36,900
  • 69
  • 202
  • 331