horizontal scrolling div not working in Safari

Question

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

Answer 1

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.