lightbox/css issue?

[nic309]

Hi all, am really hoping someone might be able to help with this..! Just doing a site for a friend and using the trusty lightbox to display images. I've downloaded a css template from a site as a basis for the site but now when i open the page in a browser, the image opens fine but the lightbox overlay doesn't cover the menu seperator images on the sidebar menu. This is beyond me! I've tried changing most aspects of the code but I just can't figure it out. Any help would be massively appreciated!
(screenshot attached)

[jscheuer1]

There are a lot of versions of the trusty Lightbox. Whatever version you might need to boost the z-index values for both the lightbox and the overlay divs. These go by slightly different names in various versions. If you're using the most recent version, 2.51, then the css looks like so:


/* line 6, ../sass/lightbox.sass */
#lightboxOverlay {
position: absolute;
top: 0;
left: 0;
z-index: 99999;
background-color: black;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=85);
opacity: 0.85;
display: none;
}

/* line 15, ../sass/lightbox.sass */
#lightbox {
position: absolute;
left: 0;
width: 100%;
z-index: 100000;
text-align: center;
line-height: 0;
font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
font-weight: normal;
}
/* line 24, ../sass/lightbox.sass */
#lightbox img {
width: a . . .

Try adding the red 9 and 0 as shown. You may need to add more than one to each.

The browser cache may need to be cleared and/or the page refreshed to see changes.

I say might though because if your menu is Flash based, you may have to adjust it so that it uses wmode transparent or opaque.

I can't really tell the exact z-index required nor if the menu is Flash based, nor if it is, what the best way of applying wmode to it would be without seeing the page. If it is Flash based and part of a CMS, that could get tricky.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

[nic309]

Thankyou so much John, that has sorted the overlay completley! Just wondering also if you'd have any idea why the menu seperators still appear without any lightbox overlay at all? They don't cut in front of the image as before but appear almost highlighted behind the lightbox.
Thanks so much again!

[jscheuer1]

I'm pretty sure I would need to see the live page to figure that out.

The only thing I can think of to try without seeing the page is to add another 9 to the overlay z-index and another 0 to the lightbox z-index. That might not do anything. But it's certainly worth a try.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

[nic309]

Hi again John and thanks for replying again. I really appreciate you taking a look at this, here's the link to the sites gallery page I just uploaded.
http://cotswoldgilding.co.uk/gallery.html (http://www.cotswoldgilding.co.uk/gallery.html)

[jscheuer1]

That page is using Lightbox 2.04 and this is the current lightbox.css file:


#lightbox{ position: absolute; left: 0; width: 100%; z-index: 10000; 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: 9999; width: 100%; height: 500px; background-color: #000; }

Using a text only editor like NotePad, make the highlighted and red change.

BTW, I checked out the page in IE 9 and Lightbox did not appear to work in that browser.

Consider updating to Lightbox 2.51:

http://lokeshdhakar.com/projects/lightbox2/

[nic309]

Dear John, that has completley sorted it, thanks so much for your help. Before asking a question, I will now always check I'm fully up to date!
Thanks so much again.