Hello Everyone,

I'm still a bit new at coding and I've been scratching my head all afternoon trying to figure out what is going on with my script. I was wondering if anyone has a chance to look through my site/code to see if someone can determine where the conflict is.

I suspect there is a conflict of scripts between:

Mootools (being used for popups) and SlideOut script... in IE, the slideout script goes haywire whenever the Mootools is activated. In any browser, Mootools doesn't work while the SlideOut script is part of the code

here is an example with Mootools disabled in the script: http://santamarinas.com/RS/newproducts/

and here is a page where the Mootools is active: http://santamarinas.com/RS/newproducts/index2.html

here is the site with the working Mootools (please click the facebook/twitter/email buttons): santamarinas.com/RS/GFRG

Below is my code (with MooTools enabled):

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"></meta>
<meta name="description" content="We offer nutritional support in the form of edible accessible and reasonably priced nutrition for all our friends and families who are gluten free">
<meta name="keywords" content="gluten-free, intolerant, allergy, celiac, grocery, san francisco, review">
<meta name="author" content="Gluten Free Reviewer Grocery">
<title>Products, Grocery, Reviews, and Events in San Francisco | Gluten Free Reviewer Grocery</title>

<!-- dynamic assets --> 
	<link rel="stylesheet" type="text/css" href="../css/SqueezeBox.css" /> 
	<script type="text/javascript" src="../../js/mootools-1.2-core-nc.js"></script>
	<script type="text/javascript" src="../../js/SqueezeBox.js"></script> 
	<script type="text/javascript"> 
		/* <![CDATA[ */
 
window.addEvent('domready', function() {



	/**

	 * That CSS selector will find all <a> elements with the

	 * class boxed

	 *

	 * The example loads the options from the rel attribute

	 */

	SqueezeBox.assign($$('a.boxed'), {

		parse: 'rel'

	});



});
		/* ]]> */
	</script> 

<link rel="stylesheet" type="text/css" href="styles.css" />

<style type="text/css"> html, body { background:url(images/bg.jpg); width: 1000px; margin-right: auto; margin-left: auto; margin-top:0px; padding: 0px; border: 0px; } 

	#container { height: 600px; width: 1000px; margin: 0 0 0 0px; /* top right bottom left */ padding: 0; background:url(images/bg.jpg); } 

	#container #col1 { background:url(images/bg.jpg); height: auto; width: 700px; float: left; } 

	#container #col2 { background:url(images/bg.jpg); margin-top: 10px; height: auto; width: 300px; float: right; } 

	#header_division { 
		background-image: 
		url('images/vline.png'); 
		background-repeat: repeat-y; 
		position: absolute;
		margin-top: 15px;
		margin-left: 935px;
		width: 5px;
		height: 185px;
		float: right
		}

	#facebook {  
		position: absolute;
		margin-top: 102px;
		margin-left: 955px;
		float: right
		}	
		
	#twitter {  
		position: absolute;
		margin-top: 134px;
		margin-left: 955px;
		float: right
		}	
		
	#contact-form {  
		position: absolute;
		margin-top: 168px;
		margin-left: 955px;
		float: right
		}

	#spacer { background: #000; width: auto; height: 33.5px; 
		text-align: center;
		color: #ffcc00;
		}

	#slider {
		text-align: center;
		margin-left: 0px;
		margin-right: auto;
		margin-top: 10px;
		}

</style> 	



<style type="text/css" media="screen">

	/**************** menu coding *****************/
	#menu {
	width: 1000px;
	background: #CCC;
	margin: auto;
	}

	#menu ul {
	list-style: none;
	margin: auto;
	padding: 0;
	width: 200px;
	float: left;
	}

	#menu a, #menu h2 {
	font: 12px/16px arial, helvetica, sans-serif;
	text-transform: uppercase;
	display: block;
	border-width: 1px;
	border-style: solid;
	border-color: #111 #888 #555 #bbb;
	margin: 0;
	padding: 2px 3px;
	}

	#menu h2 {
	color: #000;
	background: #ccc;
	text-transform: uppercase;
	}

	#menu a {
	color: #FFF;
	background: #631598;
	text-decoration: none;
	}

	#menu a:hover {
	color: #000;
	background: #ff7102;
	}

	#menu li {position: relative;}

	#menu ul ul {
	position: absolute;
	z-index: 500;
	}

	#menu ul ul ul {
	position: absolute;
	top: 0;
	left: 100%;
	}

	div#menu ul ul,
	div#menu ul li:hover ul ul,
	div#menu ul ul li:hover ul ul
	{display: none;}

	div#menu ul li:hover ul,
	div#menu ul ul li:hover ul,
	div#menu ul ul ul li:hover ul
	{display: block;}

	#notice {
		font: 10px arial;
	}

</style>

<!--[if IE]>
<style type="text/css" media="screen">
 #menu ul li {float: left; width: 100%;}
</style>
<![endif]-->
<!--[if lt IE 7]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 100%;
}

#menu ul li a {height: 1%;} 

#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
}
</style>
<![endif]-->

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-19465632-3']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>



</head>



<body>



<div id="header_division"></div>

<div id="facebook">
	<a href="../../facebook.html" class="boxed" rel="{handler:'iframe',size:{x:230,y:450}}"> <img src="images/facebook.png" alt="Follow Gluten Free Reviewer Grocery On Facebook"></a>
</div>

<div id="twitter">
	<a href="twitter.html" class="boxed" rel="{handler:'iframe',size:{x:245,y:490}}"><img src="images/twitter.png"alt="Follow Gluten Free Reviewer Grocery On Twitter"></a>		
</div>


<div id="contact-form">
	<a href="@Tests/PHPContact/contact.php" class="boxed" rel="{handler:'iframe',size:{x:490,y:500}}"><img src="images/email.png" alt="Contact Gluten Free Reviewer Grocery Via Email"></a>

</div>

<img src="images/TopHeader.JPG" width="1000" height="207" alt="Food and Grocery, Reviews, Allergy Information, and More at Gluten Free Reviewer Grocery Store" />


<!-- start menu HTML -->

<!-- BEGIN NAVIGATION MENU -->

<div id="menu">
	<ul>
	  <li><a href="index.html">Home</a>
	  </li>
	</ul>

	<ul>

	  <li><a href="about-AU.html">About Us</a>
		<ul>
		  <li><a href="about-WIG.html" title="Gluten / Celiac Disease">Gluten / Celiac Disease</a></li>
		  <li><a href="about-AU.html" title="About Us">About Us</a></li>
		  <li><a href="about-AOR.html" title="About Our Reviews">About Our Reviews</a></li>
		  <li><a href="about-CI.html" title="Contact Information">Contact Info & Directions</a></li>
		</ul>
	  </li>
	</ul>

	<ul>
	  <li><a href="newglutenfreeproducts.html">New Products</a>
	  </li>
	</ul>
	
	<ul>
	  <li><a href="community-EAG.html">Community</a>

		<ul>
		
		  <li><a href="community-EAG.html" title="Events @ Gluten Free Reviewer Grocery">Events @ GFRG</a></li>
		  
		  

		</ul>
	  </li>
	</ul>	

	  
	<ul>
	  <li><a href="blog.html" title="Gluten Free Reviewer Blog">Gluten Free Reviewer Blog</a></li>
	</ul>
			
</div>

<!-- END NAVIGATION MENU -->


<div id="container">
<br><br>

	<center>
	<img src="images/newproducts/storeinside.jpg" alt="Gluten Free Reviewer Grocery Store" align="center">
	</center>


	<div class="main">



		<p title="Pasta" class="openTop openRight red" style="top:-360px;left:615px;">
			Rustichella D'Abruzzo
			<img src="images/newproducts/RustichellaDAbruzzo.jpg">
		</p>
		
		
		<p title="Pasta Sauces" class="openTop openRight red" style="top:-290px;left:613px;">
			Dave's Gourmet
			<img src="images/newproducts/DavesGourmetPastaSauce.jpg">
		</p>	
		

		<p title="Cooking Oils" class="openTop openLeft red" style="top:-370px;left:368px;">
			Bariani Olive Oil
			<img src="images/newproducts/BarianiOliveOil.jpg">
		</p>
		
		
		<p title="Asian Sauces" class="openLeft red" style="top:-238px;left:450px;">
			Wok Mei Sauces
			<img src="images/newproducts/WokMeiSauce.jpg">
		</p>


		<p title="Salad Dressings" class="openLeft red" style="top:-304px;left:375px;">
			Galeo's Salad Dressings
			<img src="images/newproducts/GaleosSaladDressings.jpg">
		</p>	


		<p title="Granola" class="openTop openLeft red" style="top:-370px;left:122px;">
			Flour Craft
			<img src="images/newproducts/FlourCraftGranola.jpg">
		</p>

	 
		<p title="Baked Goods (Pre-Made)" class="openLeft red" style="top:-304px;left:122px;">
			Flour Craft Bakery Brownies
			<img src="images/newproducts/FlourCraftBrownies.jpg">
		</p>


		 <p title="Baking Goods" class="openLeft red" style="top:-203px;left:730px;">
			King Arthur
			<img src="images/newproducts/KingArthurBaking.jpg">
		</p>


	</div>

</div>




<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="script.js"></script>


      
<!-- Slider JS -->    
<script type="text/javascript" src="../../js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="../../js/jquery.nivo.slider.pack.js"></script>


<script type="text/javascript" src="../../js/noconflict.js"></script> 

<script type="text/javascript">
$j(window).load(function() {
    $j('#slider').nivoSlider({
        effect:'fade', // Specify sets like: 'fold,fade,sliceDown'
        slices:15, // For slice animations
        boxCols: 8, // For box animations
        boxRows: 4, // For box animations
        animSpeed:500, // Slide transition speed
        pauseTime:2500, // How long each slide will show
        startSlide:0, // Set starting Slide (0 index)
        directionNav:false, // Next & Prev navigation
        directionNavHide:true, // Only show on hover
        controlNav:false, // 1,2,3... navigation
        controlNavThumbs:false, // Use thumbnails for Control Nav
        controlNavThumbsFromRel:false, // Use image rel for thumbs
        controlNavThumbsSearch: '.jpg', // Replace this with...
        controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
        keyboardNav:true, // Use left & right arrows
        pauseOnHover:true, // Stop animation while hovering
        manualAdvance:false, // Force manual transitions
        captionOpacity:0.8, // Universal caption opacity
        prevText: 'Prev', // Prev directionNav text
        nextText: 'Next', // Next directionNav text
        beforeChange: function(){}, // Triggers before a slide transition
        afterChange: function(){}, // Triggers after a slide transition
        slideshowEnd: function(){}, // Triggers after all slides have been shown
        lastSlide: function(){}, // Triggers when last slide is shown
        afterLoad: function(){} // Triggers when slider has loaded
    });
});

</script>


</body>

</html>
I'm hoping to get this site finalized this weekend for our company so I would GREATLY appreciate any help!!

Thank you!