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.