CODEWITHSUNDEEP
htmlcss
asc99c
asc99c

Reputation: 3905

CSS - avoid horizontal scroll in IE

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.

Upvotes: 1

Views: 8056

Answers (3)

BiAiB
BiAiB

Reputation: 14122

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.

Upvotes: 1

benhowdle89
benhowdle89

Reputation: 37464

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!

Upvotes: 0

Tomas Jancik
Tomas Jancik

Reputation: 1471

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

Upvotes: 0

Related Questions