Problème LightBox

Bonjour,
J'ai installer une lightbox sur mon site à cette adresse :
http://www.kinouche.com/news.htm
elle fonctionne parfaitement sous safari, mais avec IE cela pose problème car elle necessite une scrollbar horizontale et l'image n'est pas centrée par rapport à la fenetre....
Voici ma css :

body
{
    background-color:#000000;
	font-size: 12px;
	color: #FFFFFF;
	font-family: arial; 
 	text-indent: 15px;
	list-style-type: circle;
	margin: 0 ; 
	padding: 0 ; 
}

#b
{ 
      color: #960049;
}

#i
{
      color: #3d3a3a;
}

#haut 
{
  margin: 0 auto;
  text-align: center;
}

#conteneur
{
	width:1026px;
	margin: 0 auto ;
        padding: 10px 0px;
        text-align: center;
}

#boutonhaut 
{
        margin-top: 20px;
        text-align: center;
}

#boutonhaut a {
        margin: 0px 5px;
}

#boutonhaut a img{
        border: none;
}

#gauche {
        height:297px;
        width:221px;
        margin-top: 10px;
        margin-left:0px;
        background-image:url(gauche.jpg);
        float: left;
}

#droit {
        height:300px;
        width:222px;
        margin-top: 10px;
        background-image:url(droite.jpg);
        float: right;
}
#centre {

        height: 295px;
        width: 577px;
        margin-top: 10px;
        overflow: auto;
        background-image:url(contenu.jpg);
}

#boutonbas {
        height: 71px;
        margin-top: 10px;
        text-align: center;
}

#boutonbas a {
        margin: 0px 5px;
}

#boutonbas a img{
        border: none;
}

a:link {
font-family:arial;
font-size:100%;
color: #FFFFFF;
background-color:transparent;
text-decoration:none;
}

a:visited {
font-family:arial;
font-size:100%;
color: #FFFFFF;
background-color:transparent;
text-decoration:none;
}

a:hover {
font-family:arial;
font-size:100%;
color: #FFFFFF;
background-color:transparent;
text-decoration:none;
}


#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

#lightbox img {
height:auto;
margin:0 0 0 -15px;
padding:0;
width:auto;
}




Merci d'avance de vos réponse et très bonne journée à vous =)
Configuration: Mac OS X
Safari 530.19

3 réponses

  1. et bien il fallait mettre le css directement dans le style du blog pour que ça marche
    1. mm problème ça marche sous safari mais dans fire fox la fenêtre apparaît tout en bas a gauche, obligé de scroler pour voir l'image....