Hi
My script can be seen on www.musidoraland.co.uk. I have become stuck after applying aspect ratio to my sliding images, there was a problem as the wider the screen the more the images slipped below the page. So I fixed a maximum height and now completely stuck as the images aren't centering - it looks good on my full screen - 17.5 inches but if I minimise it the image doesn't center and is off to the right. I have tried adjusting the margin and padding and also trying with javascript to sort something out thinking maybe it was the aspect ratio making things awkward but I have failed. In my clients window it goes off to the left slightly in full screen so it just isn't centering. Any help would be hugely appreciated, I have spent the last four days trying everything I can think of. Any suggestions would be amazing!

HTML:

HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="description" content="Beauchamp's Corporate offers a unique service for clients wishing to design a special product for their business.">
<title>Beauchamp's Corporate</title>

<link rel="stylesheet" href="css/style.css" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript" src="transify.js"></script> 
<script type="text/javascript">
$(document).ready(function() {
    if ($(window).width() * .66625 < $(window).height()) {
    $('#maximage').cycle({
        fx: 'scrollHorz', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
        speed: 1000,
        timeout: 7000,
    width: $('#maximage').width(),
    height: $('#maximage').width() * .66625,
fit: 1,                
        prev: '#arrow_left',
        next: '#arrow_right'
    });
    } else {
    $('#maximage').cycle({
        fx: 'scrollHorz', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
        speed: 1000,
        timeout: 7000,
    width: $('#maximage').height() / .66625,
    height: $('#maximage').height(),
fit: 1,                
        prev: '#arrow_left',
        next: '#arrow_right'
    });
    }
    if ($(window).width() > $('#maximage').width()) {
    $('#maximage').css({'left': (($(window).width() - $('#maximage').width()) / 2) + 'px'});
    }

$('#content').transify({opacityOrig:.7});
$('#menu li').transify({opacityOrig:.7});
    });

    function resizeBg() {
        $('#maximage').cycle('destroy');
        if ($(window).width() * .66625 < $(window).height()) {
    $('#maximage').cycle({
        fx: 'scrollHorz', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
        speed: 1000,
        timeout: 7000,
    width: $(window).width(),
    height: $(window).width() * .66625,
fit: 1,                
        prev: '#arrow_left',
        next: '#arrow_right'
    });
    } else {
    $('#maximage').cycle({
        fx: 'scrollHorz', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
        speed: 1000,
        timeout: 7000,
    width: $(window).height() / .66625,
    height: $(window).height(),
fit: 1,                
        prev: '#arrow_left',
        next: '#arrow_right'
    });
    }
    if ($(window).width() > $('#maximage').width()) {
    $('#maximage').css({'left': (($(window).width() - $('#maximage').width()) / 2) + 'px'});
    }

                    
    }
                                   
    $(window).resize(function() {
        resizeBg();
    }).trigger("resize");
$.extend(jQuery.easing,
    {
        easeInOutQuart: function(x, t, b, c, d) {
            if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b;
            return - c / 2 * ((t -= 2) * t * t * t - 2) + b;
        }
    });
$(function() {
        $('.page').hide();
        $('#menu li').click(
            function() {  
                var content_id = $(this).attr('id');
                
                $('#menu li').addClass('off');
                $(this).removeClass('off');
                
                if ($('.page').is(':visible'))
                {
                    $('.page').hide();
                    $('.'+content_id).show();
                }
                else
                {
                    $('#pages').animate({ height: '300px', easing: 'easeInOutQuart' });

                        console.log($(this).attr('id'));
                    $('.'+content_id).show();
                }  
            });
    });
    
    $(function() {
        var open = false;
        $('#maximage').click(
            function() {
                $('#pages').animate({
                    height: '40px',
                    easing: 'easeInOutQuart'
                },
                function(){
                    $('.page').hide();
                    $('#menu li').removeClass('off');
                });
                
            });
            });
</script>
<body>
        
<div id="logo">
<img src="images/logo8.png" alt="Beauchamp's Corporate" width="300px" />
</div>
        
        <div id="cycle-loader">
         </div>   
		
        <div id="maximage">
            <img src="images/luggagelabel5.jpg" alt="" />
            <img src="images/wallet2.jpg" alt="" />
            <img src="images/luggagelabel4.jpg" alt="" />
            <img src="images/coasters2.jpg" alt="" />        
        </div>
		
	    <a href="" id="arrow_left" class="button trans" title="Previous Photo"></a>
        
        <a href="" id="arrow_right" class="button trans" title="Next Photo"></a>  

<div id="pages">
            
            <div id="nav">
                
                <ul id="menu">
                    <li id="product">Our Product</li>
                    <li id="contact">Contact Us</li>
                </ul>
            
            </div>
            
            <div id="content">
                
                <div id="copy">
                    
                    <div class="page product">

                        <p>We offer a consultation meeting in which we discuss client requirements, design ideas, 
packaging options, budgets, lead times and more...
							<br />
                        We have a number of designs already in production which we can edit & brand with the client logo or...
							<br />
                        Following this initial meeting, we produce product drawings, quotes, source leather samples and materials 
specific to this product. Samples can be produced once drawings have been approved by the client.
							<br />
                        Lead times, delivery schedules and product prices are unique to the client and indervidually calculated 
according to the specific client reqirements.
							<br />
                        Where possible Beauchamp's aims to produce products in one of our UK factories however should it be required we will use factories further afield. </p>
                                                
                    </div>
                    
                    <div class="page contact">
                    
                        
                        <p>For further information:
							<br />
						<em>Email:</em> <a href="info@beauchampsoflondon.com">info@beauchampsoflondon.com</a>
							<br />
						<em>Address:</em> 35 Bruton Street, London, W1J 6QY 
							<br />
						<em>Website:</em> <a href="www.beauchampscorporate.com">www.beauchampscorporate.com</a>
							<br />
						<em>Fashion Accessories Website:</em> <a href="www.beauchampsoflondon.com">www.beauchampsoflondon.com</a></p>
                        
                    </div>
                    
                </div>
                
            </div>
            
            
        </div>		

</body>
</html>

CSS:

Code:
body {
margin:0;
padding:0;
background: #FFFFFF;
}

#logo{
width:300px;
height:149px;
margin-left:auto;
margin-right:auto;
margin-top:0px;
}

a.button {
display:block;
width:50px;
height:50px;
margin-top:200px;
opacity: 0.6%;
}

a#arrow_left{
float:left;
background: url('../images/arrowleft1.jpg') no-repeat;
position: relative;
z-index: 100;
}

a#arrow_right{
float:right;
background: url('../images/arrowright1.jpg') no-repeat;
position: relative;
z-index: 100;
}

.trans {
zoom: 1;
filter: alpha(opacity=50);
opacity: 0.5;
}

#maximage { 
max-height: 600px;
width:900px;
position: fixed;
top: 120px;
margin:0px auto 0px auto;
padding:0;
left:0;
z-index: -5000; 
}

#maximage img {
max-height: 600px;
width:100%;
margin:0px auto 0px auto;
align:center;
}

#pages {
margin:0px;
width:100%;
padding:0px;
bottom:0;
position:fixed;
text-align:center;
height:40px;
}

#pages #content {
margin:0;
font-size: 18px;
}

#content {
width:100%;
padding:0px;
background: url('../images/transparent.jpg') repeat;
overflow:hidden;
}

.product {
padding:0px 0px 0px 0px;
}

.contact {
padding:40px 0px 120px 0px;
}

#nav {
margin:0px auto 0px auto;
width:250px;
padding:0px;
text-align:center;
overflow:hidden;
}

#menu {
clear:both;
width:369px;
margin:0 auto;  
}

#menu li {
font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
float:left;
width:auto;
background: #A68538 repeat;
margin-right:0px;
cursor:pointer;
}

#menu li#contact {
margin:0;
border-left: none;
}

li {
background: #A68538;
list-style: none;
border: 1px solid #000000 ;
width:150px;
text-align:center;
padding:10px;
display:inline;
}

#copy {
width:700px;
margin: 0 auto 0 auto;
}

em {
font-style: normal;
font-weight: bold;
}