Probleem met schaduw van een lightbox

[FrankFaes]

Hoi,

Ik ben bezig met het implementeren van een lightbox op een website.
Dit gaat prima op één klein ding na. De schaduw achter de lightbox vult niet de volledige pagina, maar alleen het gedeelte wat binnen je scherm past. Wanneer je je scherm op bv. 50% zet wordt het schaduw vlak ook groter...

Zie hier de live versie zoals het nu is:
http://www.faesentertainment.nl/lightbox.html

Ik heb gebruik gemaakt van deze lightbox:
http://www.lokeshdhakar.com/projects/lightbox2/
(De wijzigiging in de stylesheet heb ik veranderd, maar veranderd niets)

Dit is de CSS:
#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: 100%; background-color: #000; }

Weet iemand hoe dit opgelost kan worden?

Alvast bedankt!

 

[csshunter]

Hoi Frank,
Ik kan het probleem niet zien op je testpagina: daar doet de hele lightbox het niet.
Oorzaak: prototype.js, scriptaculous.js en lightbox.js zitten niet in het opgegeven mapje faesentertainment.nl/jslightbox/prototype.js enz.

Met vriendelijke groet,
CSShunter
_____________
PS: De html-validator ziet 24 Errors, 6 warnings; die zouden misschien een rol kunnen spelen.

 

[FrankFaes]

Beste CSS Hunter,

Mijn vraag is al opgelost. Vandaar dat ik de pagina offline heb gehaald.

Maar toch bedankt!

 

[csshunter]

Mijn vraag is al opgelost.

Oh! Vanochtend stond ie nog als zielig 4 dagen oud onopgelost probleem in de rij.
Maar inmiddels is ie gelukkig groen "opgelost" aangevinkt, zie ik, zodat er geen helpende hulpers meer op af hoeven te stormen.
En voor als iemand iets dergelijks is overkomen en hier een kijkje neemt: wat was trouwens de oplossing?

 

[FrankFaes]

De oplossing van het probleem was het vervangen van de position 'absolute' in 'fixed'.
Dit probleem deed zich trouwens alleen voor in IE en niet in FF.