Okay, so we were building another site that uses Lightbox in a photo gallery – problem was, the ‘Close’ button didn’t appear to work in Firefox or Safari. The ‘Close’ image was in place, but you couldn’t click on it. After some muddling around, we figured out what the problem was.
On this particular site we had set some styles for floated images that would add margins around them to give some space between the image and other content.
.left { float: left; }
img.left {
margin-right: 15px;
margin-bottom: 10px;
}
For some reason, it appears as if those styles are getting applied to the image in the Lightbox photo gallery, causing it to have a bottom margin that overlaps the ‘Close’ link – and only in Firefox and Safari.
So we just added a new line in our lightbox.css file:
#imageContainer img { margin-bottom: 0; }
Browse Timeline
Comments ( 10 )
In my case, the “imageContainer” div was flowing over the “outerImageContainer” div.
Fix: lightbox.css
#outerImageContainer {overflow:hidden}
tspiderus added these pithy words on
May 05 10 at
2:35 pm
Great fix for Lightbox 2!
Thank you for posting tspiderus
Cheers,
Mischa
Mischa added these pithy words on
Aug 30 10 at
8:24 am
Same problem occurs in Chrome. OMG I’m so happy I found this fix
Thank you! Works beautiful now.
Darek added these pithy words on
Oct 23 10 at
1:15 pm
Ehud added these pithy words on Yeah i had this problem in Chrome great fix thanks mate you nailed it.
George added these pithy words on
May 08 11 at
6:21 pm
Tim added these pithy words on I would have never figured out that the overflow was the issue. Thanks to a quick search and this helpful tip I got it fixed in minutes rather than hours of trying to debug it.
Robert added these pithy words on
Aug 09 11 at
11:52 am
Luca added these pithy words on 
This is a great solution to problems with lightbox 2 not allowing the close button to be clicked with large images. Great work!
Andrew added these pithy words on
Dec 02 11 at
6:06 pm