Overflow property

[GezH]

Hello all.

I'm attempting to use the overflow property, to provide a scrollbar where images are too wide for the div they live in:

.imageDiv{
overflow: auto;
overflow-x: scroll;
overflow-y: auto;
}

I've tried various combinations, but it doesn't get picked up in IE6, is there anything I can try?

Many thanks.

 

[GezH]

Ah - I posted to quickly!

Just needed to add a 'width' element for the div it lived in:

.imageDiv{
width:558px;
overflow: auto;
overflow-x: scroll;
overflow-y: auto;
}

Sorry!

 

[vacunita]

Pick one of the overflow attributes, you don't need to specify all of them. overflow:auto will create the scrollbars as it requires.

Overflow-x will create a scrollbar horizontally
Overflow-Y will create one vertically.

Of course the Div needs to know how big it is, otherwise it can't tell when the contents surpasses its dimensions. Which is why you need a width attribute.



----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[feherke]

Hi

I think GezH specified all of them for backward compatibility. Actually (s)he needs [tt]overflow-x[/tt] and [tt]overflow-y[/tt], but those are CSS 3. The [tt]overflow[/tt] is for CSS 2.1 only browsers.

Feherke.

http://rootshell.be/~feherke/

 

[vacunita]

But the overflow property is supported by CSS3. Its just that overflow-x and Y are not supported by css2 compliant browsers, not all anyway.

So if you where coding for css3 you could use overflow, if you need only one axis, then yes would additionally specify the x or y specific attribute for CSS3 compliant browsers only.





----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[feherke]

Hi

You mean to write it like this ?

  overflow: auto;
  overflow: scroll auto;

Well, I am not sure how CSS 2.1 browsers will handle it. I would expect to see it interpreted as :

  overflow: auto;
  overflow: scroll;

Using [tt]overflow-x[/tt] and [tt]overflow-y[/tt] the result seems more predictable for me, as CSS 2.1 browsers will probably ignore them.

Feherke.

http://rootshell.be/~feherke/

 

[vacunita]

I was talking about using either one of the other.

If you need to specify a direction on which you want it to scroll then yes by all means use overflow-(z) for css3 compliant browsers. used after the regular overflow:auto; in style definition should override it.

But if you are going to specify both directions, then just use the general overflow property instead of writing out both directions as it covers both.

overflow:auto;
overflow-x:auto;

or just 
overflow:auto;

As an aside, you can use the white-space property to control in what direction the element will scroll for browsers not yet css3 compliant.

However I have found that IE 8 beta ignores it completely.

<div id="scroller" style=" border:1px solid red; width:500px; height:50px; white-space:nowrap; overflow:auto;">

If there is enough content to pass beyond the width it will scroll horizontally.




----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.