overflow = auto; does not work in iPhone and Android

[ieee488]

I have a webpage with two boxes that are floated left.

Inside the left box is <div> with overflow=auto. On a Blackberry a scrollbar appears. However, on an iPad Safari 4.3 and an iPhone Safari 4.2.1 and an Adroid phone Chrome NX1_2.2, there is no scrollbar.
The right box is just has a photo.

Is there another way to write the CSS so that the the text in the left box can scroll?

[PicnicTutorials]

no way with css. Maybe js could.

[Paul O'B]

I have a webpage with two boxes that are floated left.

Inside the left box is <div> with overflow=auto. On a Blackberry a scrollbar appears. However, on an iPad Safari 4.3 and an iPhone Safari 4.2.1 and an Adroid phone Chrome NX1_2.2, there is no scrollbar.
The right box is just has a photo.

Is there another way to write the CSS so that the the text in the left box can scroll?

On the iphone the only scroll bar that appears is the on the viewport. Scrollbars will not appear on inner elements.

You should use media queries and change all elements that have overflow:auto or overflow:scroll to be visible instead.

As a point of interest you can scroll the overflow:auto element on the iphone but you just have to use two finger scrolling although its not always obvious that the element is a scrollbox.

[ieee488]

Can you explain what you mean by media queries?

[Paul O'B]

These

I slipped a basic one into my example for the recent html quiz and it allows the display to fit on an iphone.

If you are designing for mobile you should also read this.

[ieee488]

ah!!!!! said the blind person

technology is moving too fast for me