I found a gallery online that uses the jquery plug in. The gallery is working fine, but I'm trying to position it using CSS. I want it to be contained in my wrapper with the margins that I specified. It works fine on my computer but for some reason when I view the website on another machine (with a larger screen), the positioning of the gallery is way off. It seems to be contained in the wrapper on my computer, but doesn't seem like it is on other computers...when I do CTRL (-) the gallery moves off of the wrapper, but when I do the same on my computer it stays in the wrapper at the specified margins.

This is the code:

<div id="wrappercommercial">
<div id="header">
<img src="images2/pavingbanner.jpg" alt="paving banner" />
</div>
<div id="menu">
<ul class="menu">
<li><a href="index.htm"><span>Home</span></a></li>
<li class="c1">
<ul>
<li><a href="#" class="parent"><span>Sub Item 1</span></a>
<ul>
<li><a href="#" class="parent"><span>Sub Item 1.1</span></a>
<ul>
<li><a href="#"><span>Sub Item 1.1.1</span></a></li>
<li><a href="#"><span>Sub Item 1.1.2</span></a></li>
</ul>
</li>
<li><a href="#"><span>Sub Item 1.2</span></a></li>
<li><a href="#"><span>Sub Item 1.3</span></a></li>
<li><a href="#"><span>Sub Item 1.4</span></a></li>
<li><a href="#"><span>Sub Item 1.5</span></a></li>
<li><a href="#"><span>Sub Item 1.6</span></a></li>
<li><a href="#" class="parent"><span>Sub Item 1.7</span></a>
<ul>
<li><a href="#"><span>Sub Item 1.7.1</span></a></li>
<li><a href="#"><span>Sub Item 1.7.2</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#"><span>Sub Item 2</span></a></li>
<li><a href="#"><span>Sub Item 3</span></a></li>
</ul>
</li>
<li><a href="equipment.htm" class="parent"><span>Equipment</span></a>
</li>
<li><a href="pavegallery.htm" class="parent"><span>Gallery</span></a>
</li>
<li class="c2"><a href="management2.htm"><span>Management</span></a></li>
<li><a href="residential.htm"><span>Residential Services</span></a></li>
<li><a href="commercial.htm"><span>Commercial Services</span></a></li>
<li><a href="areas.htm"><span>Areas Serviced</span></a></li>
<li class="last"><a href="contact.htm" class="parent"><span>Contact</span></a>
</li>
</ul>
</div>

<div class="gallery" width:927px; height:500px;">

<img src="images/slidinggallery/steps.jpg" />
<img src="images/slidinggallery/seal.jpg" class="start" />
<img src="images/slidinggallery/crack.jpg" />
<img src="images/slidinggallery/mill.jpg" />
<img src="images/slidinggallery/drain.jpg" />
<img src="images/slidinggallery/catch.jpg" />
<img src="images/slidinggallery/retain.jpg" />
<img src="images/slidinggallery/pavers.jpg" />
<img src="images/slidinggallery/concrete.jpg" />
<img src="images/slidinggallery/sinkholes.jpg" />
<img src="images/slidinggallery/asphalt.jpg" />

</div>


</div>
<!-- wrapper ends -->



This is the script which is in the header:


<script language="javascript" type="text/javascript" src="js/jquery.slidingGallery-1.2.js"></script>
<script language="javascript" type="text/javascript">
$(function() {
var zoomFunc = function(dimension) {
return dimension * 1.5;
}
var shrinkFunc = function(dimension) {
return dimension * 0.3;
}
$('div.gallery img').slidingGallery({'slideSpeed':'slow','Lzoom':zoomFunc, 'Pzoom':zoomFunc,'Lshrink':shrinkFunc,'Pshrink':shrinkFunc});
});
</script>

This is the CSS for the gallery:

.gallery {
margin: -60px 0 0 -170px;
position: relative;
}


Can anyone please help me out...you can visit the live site at www.dcrpave.com and click commercial or residential, they both use the same gallery. Thank you!