overflow:auto problem in IE

Otto de Voogd

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

Subscribe Post Reply

19051

AndrewF

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

Otto de Voogd

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

xerokill

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

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

HTML / CSS

Problems in Firefox with drag and drop from a div with overflow: auto

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

Javascript

overflow: auto not working in firefox

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

HTML / CSS

document.body.scrollTop for an "autoscroll: auto" css element

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

Javascript

overflow:auto (or scoll) and height:100%

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

HTML / CSS

Hide Scrollbars in Overflow Auto

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.

Javascript

Dynamic DIV container w. overflow:auto on Resize - w/o Java?!

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

HTML / CSS

possible viewport question, need to control what portion of div contents appear when overflow:auto and too much content in div

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

Javascript

css, overflow auto and font sizes

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

HTML / CSS

Wordpress or something else?

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

Content Management Systems

Access Europe: Command bars, the Access Shortcut Tool and a simple Audit Log - Wed 3 April

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

General

One-click Importing Excel Data into a*Database

by: ryjfgjl | last post by:

In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...

Microsoft Excel

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

by: taylorcarr | last post by:

A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...

General

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Javascript

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

overflow:auto problem in IE

Similar topics