[CSS/HTML] Lightbox FF vs. IE6,7

[Verwijderd]

Ik heb een website gemaakt en gebruik daarbij het lightbox script om mijn fotos te bekijken.
http://nielsvos.ath.cx
Echter, er gebeurd iets vreemds.
Lightbox geeft een soort semi-transparant masker over je pagina op het moment dat je er een foto mee opent, zodat de aandacht van de kijker voor de foto gereserveerd wordt.
Als het scherm groot genoeg is en er niet gescrolld hoeft te worden is er niets aan de hand.
Wanneer er wel gescrolld moet worden gaat het in FF gewoon goed, maar in IE krijgt alleen het deel van de pagina dat op moment van klikken in beeld is het zojuist beschreven masker, en op het moment dat je scrolt krijg je een maskerloze strook.

Ik heb de volgende screenshots gemaakt om het nog wat te verduidelijken wat ik bedoel:


Mijn CSS is als volgt:

code:

#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; color: #000; }
#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: 9px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 10px auto 5px auto; line-height: 1.4em; overflow: auto; width: 100%; color: #666; }

#imageData a    {   margin: 0px; padding: 0px; height: 16px; }
#imageData{ padding:2px 2px 2px 2px;    }
#imageData #imageDetails{ margin-left: 10px; width: 70%; height: 14px; float: left; text-align: left;}  
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ float: left; padding: 2px 10px 0px 10px; background: #000; height: 14px; color: #fff; font-weight: bold;}            
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 2px; outline: none;}

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

Ik gebruik lightbox ook op een andere site waar ik dit probleem helemaal niet heb. Ik heb geprobeerd de css en .js van die site te gebruiken, maar dan blijft het probleem.

• Zou het kunnen dat de css van lightbox conflicteerd met de css van de rest van mijn website?
• Hebben jullie misschien een ander idee waar het aan kan liggen?

[TeeDee]

Verwijderd schreef op dinsdag 22 april 2008 @ 17:49:

• Zou het kunnen dat de css van lightbox conflicteerd met de css van de rest van mijn website?
• Hebben jullie misschien een ander idee waar het aan kan liggen?

• Zonder een concrete online testcase wordt het lastig.
• zie ^^

[Verwijderd]

Online testcase? Bedoel je een website? Ik heb hem online hoor, vergeten in de topic te zetten:

http://nielsvos.ath.cx

Wat bedoel je met zie ^^?

[iH8]

kijk hier eens:

http://www.dynamicdrive.c...ve/index.php/t-10373.html