Probléme Internet Explorer & Lightbox

Bonjour,


J'utilise Lightbox pour mon site. Jusque là pas de soucis avec Firefox le script s'affiche bien, les images apparaissent ...

Lorsque je passe sous Internet Explorer quand je clique sur ma miniature; l'image s'ouvre mais l'arrière plan opaque s'affiche qu'à environ 2 tiers de ma page WEB.
Le site doit pouvoir être consultable par tous navigateurs (Site crée pour exposer mes créations dans le but d'obtenir un stage).

Je fais donc appel aux savoirs des internautes
Merci d'avance à tous

Cordialement,

Nykia


Mon script CSS de la page Web:

body{
width:100%;
margin:auto;
}
a {
text-decoration:none;
color: #CCCCCC;
}
a:link {
color:#666666;
text-decoration: none;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border: none;
}
a:visited {
color:#666666;
text-decoration: none;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border: none;
}
a:hover {
color:#000000;
text-decoration: none;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border: none;
}
a:active {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border: none;
text-decoration: none
}
span
{
Color:#999999;
font-size: 10px;
font-style: normal;
font-weight: 400;
text-decoration: none;
background-color: #FFFFFF;
}
t
{
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border: none;
}
t:link
{
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border: none;
}


///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

Mon script CSS de la lightbox:

#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; }