Problème de position:relative, absolu;

Bonjour,

J'ai téléchargé un diaporama que j'ai inséré dans mon site, le problème est que ce diaporama ce déplace vers la droite quand je change de résolution.

voici le code css et html:

code de la page index:

<div id="main">

<div id="haut"><img src="Image/ggg.jpg" width="800" height="117" /><div class="barre_logo"><img src="Image/barre-logo.jpg" width="1100" height="6"/></div>
               
</div>

<div id="gauche"> </div>

<div id="centre">
<div id="slider1">
                    <ul id="slider1Content">
                        <li class="slider1Image">
                            <img src="Image/images_intro/1.jpg" />
                    <span class="texte_right"><strong></strong><br /></span>
                    </li>
                        <li class="slider1Image">
                            <img src="Image/images_intro/2.jpg" />
                    <span class="texte_right"><strong></strong><br /></span>
                    </li>
                        <li class="slider1Image">
                            <img src="Image/images_intro/3.jpg" />
                    <span class="texte_right"><strong></strong><br /></span>
                    </li>
                        <li class="slider1Image">
                            <img src="Image/images_intro/4.jpg" />
                    <span class="texte_right"><strong></strong><br /></span>
                    </li>
                        <li class="slider1Image">
                            <img src="Image/images_intro/5.jpg" />
                    <span class="texte_right"><strong></strong><br /></span>
                    
                    <li class="slider1Image">
                            <img src="flash/diaporama centre/image/6.JPG" />
                    <span class="texte_right"><strong></strong><br /></span>
                      </li>
    </li><div class="clear slider1Image"></div></ul></div><br/>

<div id="droite"></div>

<div id="pied"><div class="barre_bas"><img src="Image/barre-logo.jpg"  width="1100" height="6"/><div id="button_entrer"><a href="index.php"></a></div></div><p style="font-family:Verdana, Geneva, sans-serif; font-size:9px; color:#FFF; margin-top:-7px; "> <br  >ggggggggggggggggggggggggggggggggggggggggggggggg</br> ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</p>
</div></div> 

voici le code css di diaporama:

#slider1{
    width: 900px; 
    height: 400px; 
	margin-top:50px;
	margin-left:355px;
    position: relative;
	overflow: hidden;}
.slider1Image {
    float: left;
    position: relative;

	display: none;}
	
.slider1Image span, .slider2Image span {
    position: absolute;
	font: 10px/15px Arial, Helvetica, sans-serif;
    padding: 5px 14px;
    width: 694px;
    background-color: #000;
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
	-khtml-opacity: 0.7;
    opacity: 0.7;
    color: #fff;
    display: none;}
.clear {
	clear: both;}
.sliderImage span strong, .slider1Image span strong, .slider2Image span strong {
    font-size: 18px;
	font-family:Arial,Helvetica, sans-serif;
	text-decoration:underline;}
.texte_left {
	top: 0;
    left: 0;
	width: 90px !important;
	height: 180px;
}
.texte_right {
	right: 0;
	bottom: 0;
	width: 90px !important;
	height: 180px;
}

#li
{ list-color:#FFF;}

Merci d'avance