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


Subscribe to comments Comment | Trackback |
Post Tags:

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

Thank you! great catch there… :)

Ehud added these pithy words on Nov 10 10 at 5:58 pm

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

Thanks! This helps a lot!

Tim added these pithy words on Jul 21 11 at 12:49 pm

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

Thanks!!!!! ;)

Luca added these pithy words on Sep 20 11 at 3:35 am

Brilliant! It works

Tim added these pithy words on Oct 28 11 at 8:14 am

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

Add a Comment


XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>