Jquery cycle: images and pager css problem

Jquery cycle: images and pager css problem

I am tryin to center the image and the pager in the page I've created for testing out the plugin.

The pager is located on the left. I can only center it by manually setting margin-left but I want something indipendent a fixed number in pixels. Also checking with inspection tools of dreamweaver I found the images are always placed with position:absolute and are bypassing my css.

Is there any simple suggestion for this?

Thanks,
Marco

Here's the code:

  1. <!DOCTYPE html>
    <html>
    <head>
    <title>jquery cycle demo - apple style</title>

    <style type="text/css">

     #nav {height: 40px;}
     #nav li { width: 20px; float:left; list-style: none }
     #nav a {width: 20px;}
     #nav a.box {background-color:#CCC; float: left; width: 10px; height: 10px;
        -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;}
     #nav a.activeSlide {background-color: #9CF}
     #nav a:focus { outline: none; }
     #nav img { border: none; display: block }
     #slideshow div img {width:100px; margin:auto;}
     #navigation div {width:100%; margin:auto;}

    </style>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js"></script>
    <script type="text/javascript" src="http://malsup.github.com/jquery.easing.1.1.1.js"></script>

    <script type="text/javascript">
    $(function()
        {
        $('#slideshow')
        .after('<div id="navigation"><ul id="nav"></ul></div>')
        .cycle({  
            pager:  '#nav',
               pagerAnchorBuilder: function(i,el)
        {
                return '<li><a href="#" class="box"></a></li>';
        }
        });
       
    });
    </script>
    </head>

    <body>

        <div id="slideshow">
            <img src="images/hero3_20110302.jpg" />
            <img src="images/hero4_20110302.jpg" />
            <img src="images/hero5_20110302.jpg" />
            <img src="images/hero6_20110302.jpg" />
        </div>
      

    </body>

    </html>