4

Hi I made this site a while ago in my table days but have just realised the horizontal scrolling dive doesn't work in Safari. 

#galleryscroller {
    overflow-x:scroll ;
    overflow-y:hidden;
    overflow:-moz-scrollbars-horizontal !important;
    height:138px; 
    width:360px;
}

<div id="galleryscroller">
<table width="100%"  border="0" cellspacing="0" cellpadding="6">
<tr align="left" valign="middle">
<td><a onclick="return showPic(this)" href="blahblah.jpg"><img src="blahblah.jpg" alt="Events" width="76" height="100" border="0" /></a></td>
<td><a onclick="return showPic(this)" href="blahblah.jpg"><img src="blahblah.jpg" alt="Events" width="100" height="67" border="0" /></a></td>
</tr>
</table>
</div>

The site is here - www.tobymurphy.com

Can anyone help?, so far no answers on Google have worked...

morktron
  • 915
  • 4
  • 17
  • 31

4 Answers4

6

There's a quirk with the WebKit engine with scrolling when you need to hide one of the scrollbars. Try the following:

#galleryscroller {
  overflow: none;
  overflow-x: auto;
  display: block;
  height: 138px;
  width: 360px;
}

Note the first reset to make overflow to none.

ferdley
  • 2,882
  • 2
  • 18
  • 7
  • Thanks, I just gave your suggestion a try but unfortunately it still does not want to play ball. Seems to be a tricky one this! – morktron Sep 08 '09 at 01:12
  • 1
    Have you tried changing the Doctype at all to see if there are differences? My example works on a site using XHTML 1.1 Doctype. There may also be issues with the scrolling DIV being wholly contained within another table TD cell - that cell could be affecting the width calculations of the contents. – ferdley Sep 08 '09 at 08:18
  • Thanks, you where right it is the DIV being contained in a table cell that is causing the issue. I guess the time has come to make it tableless. Many thanks you are a legend! :) – morktron Sep 08 '09 at 09:29
  • 8
    [There's no such declaration as `overflow: none;`](https://developer.mozilla.org/en/CSS/overflow) – Maros Jun 27 '12 at 16:50
3

I myself discovered this "won't scroll DIV" problem recently. The problem exists in Safari 6 (WebKit), but there is no problem in Chrome (also WebKit). So one cannot contend it is a "WebKit problem."

In my case, the vertical scroll bar displays in Safari 6, but it is frozen. However, if you grab the text inside the table (which is inside the DIV) and then drag that text up and down, it will scroll.

I also can confirm that adding the following style to the DIV does NOT solve the problem:

white-space: nowrap;

You can see the problem on my site here (as of March 1, 2013 anyway): http://visionsecurity.jp/jp/buy.html

It's in Japanese, but you can still see the problem. Just click the rightmost yellow square on the Japan map that is one below the first yellow square at the far right.

But the "Fundamental Answer" to the original question is this: there is no answer/solution we can effect because this DIV scrolling problem appears to be a BUG IN SAFARI. I have spoken some web programmer associates who have told me so. So in this case, the final "solution" to the problem would appear to come exclusively from Apple. The only thing we web designers and programmers can do is simply prod Apple to accelerate the pace at fixing the bug in their browser:

http://www.apple.com/feedback/safari.html

JDW
  • 115
  • 1
  • 8
3

Add a white-space: nowrap; to #galleryscroller style. this should fix it, if it doesn't work, try making the position absolute.

Phill
  • 31
  • 1
1

I know this is old, but I recently ran into this issue, and thought that it's worth mentioning that this could be also caused by the lack of z-index. In my case I had to specifically set the z-index for the div that I wanted to scroll, and it was only occuring in Safari.

Inc33
  • 1,747
  • 1
  • 20
  • 26