467,920 Members | 1,302 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 467,920 developers. It's quick & easy.

overflow:auto problem in IE

I posted the problem below in alt.www.webmaster before, but no-one knew
the answer, however someone suggested this group as a good place to ask.

I am trying to fit images into a browser window using CSS and
in particular overflow:auto; The idea being that if a user's window is too
small the image becomes scrollable (horizontally) and a horizontal
scrollbar appears.

It works nicely in Firefox and Opera but with Internet Explorer 7 a
vertical scrollbar also appears when the horizontal space is not large
enough. I don't know what happens in IE 6 as I don't have it anymore, but
I expect it to be the same as in IE 7.

The difference seems to be that IE renders the horizontal scrollbar inside
the space alotted to the image, while Firefox and Opera render the
horizontal scrollbar outside the image space (thus not needing a vertical
scrollbar).

Is there a way to make IE render the horizontal scrollbar outside of the
image space aswell?

An example page (make window smaller to see the scrollbar):
http://www.7is7.com/otto/travel/phot...argfalls2.html

The relevant HTML and CSS:

<div class="photo-image">
<img src="argfalls2.jpg" />
</div>

div.photo-image{margin:0.5em auto;overflow:auto;width:100%;}

--
Otto de Voogd
http://www.7is7.com/ - My Projects
http://www.StatEye.com/ - Website Statistics

Nov 22 '06 #1
  • viewed: 18729
Share:
3 Replies
Hi Otto,

I've tried this in IE6 and looking at what you've said it seems like
the same behaviour is evident on both browsers.

I'm answering this on my mobile so can't mock up some code, but try
putting an IE only rule that makes the space slightly taller than it
needs to be. IE won't render one scroll bar without putting the other
one in even if it is inactive. So maybe increasing the height by 18px
will be enough.

The other option I thought of was containing one div within another one
with the parent div set to overflow that would attach the scrollbars
not to the image but to the containing div and you may get more play.

If I get time I'll look at this at work and see if I can get a mock up
for you.

Cheers
AndrewF

Nov 23 '06 #2
On Thu, 23 Nov 2006 03:19:20 -0800, AndrewF wrote:
Hi Otto,

I've tried this in IE6 and looking at what you've said it seems like
the same behaviour is evident on both browsers.

I'm answering this on my mobile so can't mock up some code, but try
putting an IE only rule that makes the space slightly taller than it
needs to be. IE won't render one scroll bar without putting the other
one in even if it is inactive. So maybe increasing the height by 18px
will be enough.

The other option I thought of was containing one div within another one
with the parent div set to overflow that would attach the scrollbars
not to the image but to the containing div and you may get more play.

If I get time I'll look at this at work and see if I can get a mock up
for you.

Cheers
AndrewF
Hi Andrew,

Unfortunately I can't actually specify the height, because this code is
used on 1000+ pages and images can vary in size (both height and width).

I use a div around the image so that the scrollbars attach to the div and
not the image as you say, so when the horizontal scrollbar appears the div
does not expand in IE causing the vertical scrollbar to appear too.

Take care
Otto

--
Otto de Voogd
http://www.7is7.com/ - My Projects
http://www.StatEye.com/ - Website Statistics

Nov 23 '06 #3
Try putting this in your css:

body { overflow: auto; }

works for me. =)

Otto de Voogd wrote:
On Thu, 23 Nov 2006 03:19:20 -0800, AndrewF wrote:
Hi Otto,

I've tried this in IE6 and looking at what you've said it seems like
the same behaviour is evident on both browsers.

I'm answering this on my mobile so can't mock up some code, but try
putting an IE only rule that makes the space slightly taller than it
needs to be. IE won't render one scroll bar without putting the other
one in even if it is inactive. So maybe increasing the height by 18px
will be enough.

The other option I thought of was containing one div within another one
with the parent div set to overflow that would attach the scrollbars
not to the image but to the containing div and you may get more play.

If I get time I'll look at this at work and see if I can get a mock up
for you.

Cheers
AndrewF

Hi Andrew,

Unfortunately I can't actually specify the height, because this code is
used on 1000+ pages and images can vary in size (both height and width).

I use a div around the image so that the scrollbars attach to the div and
not the image as you say, so when the horizontal scrollbar appears the div
does not expand in IE causing the vertical scrollbar to appear too.

Take care
Otto

--
Otto de Voogd
http://www.7is7.com/ - My Projects
http://www.StatEye.com/ - Website Statistics
Jan 9 '07 #4

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

4 posts views Thread by Harry | last post: by
4 posts views Thread by reycri | last post: by
5 posts views Thread by vunet.us | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.