Hi all,

I'm working on creating a horizontally scrolling website. I'm using jQuery, along with scrollTo and localscroll to make the horizontal scroll animated. The scrolling works in all browsers except for Safari, and I'm unsure why. I'm not familiar with coding in Javascript so any help/tips are appreciated.

This is my markup:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Navcu Photography :: Photography by Marco Navic</title>
<link rel="stylesheet" href="css/style2.css" type="text/css" media="screen" />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
<script src="js/jquery.localscroll-min.js" type="text/javascript"></script>
<script src="js/jquery.scrollTo-min.js" type="text/javascript"></script>
<script language="Javascript" src="js/menu.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$.localScroll.defaults.axis = 'x';
$.localScroll();
});
</script>
</head>

<body>

<div id="masterdiv">

<div id="menu">
	<img id="logo" src="images/logo.png" border="0" alt=""/><br />
	<img class="divider" src="images/divider.png" border="0" alt="" />
	<ul id="navigation">
		<li><a href="#home">Home</a></li>
		<li><div class="menutitle" onclick="SwitchMenu('sub1')">About</div>
			<ul class="submenu" id="sub1">
				<li><a href="#about"><span style="color: #7CA297;">+</span> About Navcu</a></li>
				<li><a href="#bio"><span style="color: #7CA297;">+</span> Biography</a></li>
				<li><a href="#skills"><span style="color: #7CA297;">+</span> Skills</a></li>
			</ul>
		</li>
		<li><div class="menutitle" onclick="SwitchMenu('sub2')">Photography</div>
			<ul class="submenu" id="sub2">
				<li><a href="#interior"><span style="color: #7CA297;">+</span> Interior</a></li>
				<li><a href="exterior"><span style="color: #7CA297;">+</span> Exterior</a></li>
				<li><a href="#portrait"><span style="color: #7CA297;">+</span> Portrait</a></li>
				<li><a href="#print"><span style="color: #7CA297;">+</span> Print</a></li>
			</ul>
		</li>
		<li><a href="#portfolio">Portfolio</a></li>
		<li><a href="#contact">Contact</a></li>
	</ul>
	<img class="divider" src="images/divider.png" border="0" alt="" />
	<p id="copyright">Copyright 2010 Erica and Monica designed this site. We will probably have credit link here too.</p>
</div>


<div id="container">

	<div id="home">
		<div class="page"><a name="menu" class="content"><img src="images/pages/1.png" border="0" alt="" /></a></div>
			<br /><br /><br /><br />
		<div id="slider" class="content"><b>THIS OBNXIOUSLY BRIGHT BOX REPRESENTS THE FLASH IMAGE SLIDER THAT WILL DISPLAY RECENT PHOTOGRAPHS BY NAVCU PHOTOGRAPHY!!!!!!</b></div>
		<p class="content" id="news">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget eros libero. Fusce tempus quam sit amet erat mollis a fermentum nibh imperdiet. Fusce iaculis sapien in turpis aliquet porta. Donec tincidunt gravida tortor, vel dignissim augue convallis sit amet. Aliquam auctor ornare accumsan. Cras convallis elit tincidunt arcu semper egestas. Mauris interdum fringilla nisi. Cras a dapibus lectus. Praesent blandit ullamcorper ornare. Nam hendrerit sollicitudin urna non ultricies. Phasellus condimentum auctor risus, at accumsan tellus tempor vel. Nunc mattis eleifend dolor at adipiscing. Phasellus condimentum auctor risus, at accumsan tellus tempor vel. Nunc mattis eleifend dolor at adipiscing.</p>
	</div>
	<div id="titlebar"></div>
			
	<div id="trans1"></div>

	<div id="about"> 
      <h2><a name="about" class="content">+ About Navcu Photography</a></h2>
      <p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        Ut eget eros libero. Fusce tempus quam sit amet erat mollis a fermentum 
        nibh imperdiet. Fusce iaculis sapien in turpis aliquet porta. Donec tincidunt 
        gravida tortor, vel dignissim augue convallis sit amet. Aliquam auctor 
        ornare accumsan. Cras convallis elit tincidunt arcu semper egestas. Mauris 
        interdum fringilla nisi. Cras a dapibus lectus. Praesent blandit ullamcorper 
        ornare. Nam hendrerit sollicitudin urna non ultricies. Phasellus condimentum 
        auctor risus, at accumsan tellus tempor vel. Nunc mattis eleifend dolor 
        at adipiscing. Phasellus condimentum auctor risus, at accumsan tellus 
        tempor vel. Nunc mattis eleifend dolor at adipiscing.</p>
      <p class="content"><a href="#bio">-></a></p>
    </div>

	<div id="bio"> 
      <h2><a name="bio" class="content">+ About the Photographer</a></h2>
      <p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        Ut eget eros libero. Fusce tempus quam sit amet erat mollis a fermentum 
        nibh imperdiet. Fusce iaculis sapien in turpis aliquet porta. Donec tincidunt 
        gravida tortor, vel dignissim augue convallis sit amet. Aliquam auctor 
        ornare accumsan. Cras convallis elit tincidunt arcu semper egestas. Mauris 
        interdum fringilla nisi. Cras a dapibus lectus. Praesent blandit ullamcorper 
        ornare. Nam hendrerit sollicitudin urna non ultricies. Phasellus condimentum 
        auctor risus, at accumsan tellus tempor vel. Nunc mattis eleifend dolor 
        at adipiscing. Phasellus condimentum auctor risus, at accumsan tellus 
        tempor vel. Nunc mattis eleifend dolor at adipiscing.</p>
    </div>

</div>

<div id="clear"></div>

</div>

</body>
</html>
This is my CSS:
Code:
html {
	overflow: hidden;
}

body {
	background: #AFAFAF;
	font-family: "Helvetica Neue", Arial, sans-serif;
	font-weight: 200;
	height: 100%;
	width: 100%;
	margin: 0;
}

#masterdiv {
	height: 100%;
}

#menu {
	width: 360px;
	height: 100%;
	background: url('../images/menu.png');
	background-repeat: no-repeat;
	background-position: top left;
	float: left;
	overflow: visible;
	position: fixed;
	z-index: 500;
}

#logo {
	margin-left: 20px;
	margin-right: d20px;
	padding: 8px;
}

img.divider {
	margin-left: 70px;
	margin-right: 20px;
	padding: 8px;
}

img.displayed {
	display: block;
	margin-left: auto;
	margin-right: auto;
	padding: 8px;
}

#navigation ul {
	margin: 0 auto;
}

#navigation li {
	list-style: none;
	font-size: 20px;
}

#navigation a {
	color: #000;
	text-decoration: none;
}

.submenu li {
	list-style: none;
}

.menutitle {
	cursor: pointer;
}

#copyright {
	text-align: center;
	color: #A2A1A6;
	margin: 6px;
}

#container {
	width: 6000px;
	height: 1000px;
}

.page {
	float: right;
	padding: 5px;
}

#home {
	width: 960px;
	margin-left: 25px;
	float: left;
	padding: 20px;
}

#slider {
	background: #E42DAE;
	width: 570px;
	height: 250px;
}

#titlebar {
	background: #699284;
	width: 100%;
	position: absolute;
	top: 410px;
	height: 75px;
}

#trans1 {
	background: url('../images/transitions/one.png');
	position: relative;
	margin-left: 0;
	margin-top: 0;
	float: left;
	width: 2432px;
	height: 100%;
}

#news {
	position: relative;
	margin-top: 175px;
}

#about {
	background: #699284;
	width: 950px;
	position: relative;
	padding: 20px;
	height: 100%;
	float: left;
}

#bio {
	background: #699284;
	position: relative;
	margin-left: 0;
	width: 950px;
	padding: 20px;
	height: 100%;
	float: left;
	z-index: 2;
}

.content {
	margin-left: 385px;
}

.blank {
	background: #699284;
	width: 950px;
	max-width: 100%;
	position: relative;
	margin-left: 950px;
	height: 100%;
	float: left;
}

#clear {
	clear: both;
}
I'm using this function, if this helps:
Code:
$(document).ready(function () {
$.localScroll.defaults.axis = 'x';
$.localScroll();
});
You can also see the live page here.

Thanks in advance,
Erica.