473,320 Members | 1,799 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

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
3 19045
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: Marek Mänd | last post by:
<select multiple style="height:200px;"> <option>a <option>b </select> Why does Mozilla draw the vertical scrollbar to the SELECT html element? There is plenty of void room below two OPTIONs in...
2
by: matthewmacchia | last post by:
I believe this is a Firefox bug but I was hoping someone found a workaround. I have implemented drag and drop functionality, but if I try to drag an element from a div that happens to have a div...
4
by: Harry | last post by:
I just implemented an "overflow: auto" for a div in the main message window: http://www.auriance.com/docs/interaction/ This works as expected in Internet Explorer and Opera, but in Firefox it...
1
by: Jefferds.A | last post by:
Hi, I'm putting together a little database of individuals categorized by family. I have two lists, one that contains family names and one that contains individuals' names. When you click on a link...
4
by: reycri | last post by:
I have a page that works as I intend in IE but not in Firefox: <html> <head> <title>Overflow Test</title> </head> <body style='overflow:hidden; margin:0; padding:0;'> <table border='0'...
5
by: vunet.us | last post by:
How can I hide scrollbars which appear in my floating div element with CSS property overflow:auto? I do need to use auto overflow. Thank you.
14
by: MrPutty | last post by:
Hello everyone! It seems I've finaly found a place with savy folks ;-) The following problem has me puzzeled - hopefully someone can help me out! ...
1
by: Jake Barnes | last post by:
I searched comp.lang.javascript on Google Groups but I didn't find an answer when I searched for "viewport" or "viewport div" or any combination of words using "viewport" so now I think I'm...
4
by: obanite | last post by:
Hi! I'm having issues with css in FF and IE regarding overflow: auto and font-size. If I have a div like this: <div style="overflow: auto">...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.