View Full Version : Needing Help - lightbox Overlay only spanning some of page

08-08-2007, 11:07 AM
Hi Again, I got another problem if I fix this one my site is finished and bug free (woo!), Its another weird one.

I am using a lightbox script for viewing gallery images, which works fine, the only problem is that the overlay which colours the screen when the image loads is only showing for a part of the screen in IE (Works fine in all other browsers). My content height resizes as needed, but my navigation height is set, and the overlay only extents to cover the page down to the end of the navigation, no further. Here is the css code for the lightbox, I modified it slightly, but here it is:

padding: 10px;
border-bottom: 2px solid #666;
border-right: 2px solid #666;
font-size: 0.8em;
padding-top: 0.4em;
#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; }
#closeButton{ top: 5px; right: 5px; }

#lightbox img{ border: none; clear: both;}
#overlay img{ border: none; }

-moz-opacity: 0.8;
filter: alpha(opacity=80);
#overlay[id]{ /* IE6 and below Can't See This */

Any help would be amazing!

08-08-2007, 01:15 PM
I did a fairly large mod to lightbox by placing a second close button at the top / resizing the border to incorporate this change. I think I know what you mean that happens on one specific image for me, and I cant otherwise change it!

08-10-2007, 11:58 AM
I cant really show a picture coz i dont have IE on my laptop, but its like when the image open in the lightbox, the background is supposed to be overed with a grey overlay to kinda fade it out, the problem is this overlay does not span the full page, its not really a big issue it just makes the site look messy. Any help, anybody :( ?

08-11-2007, 12:24 PM
I found this on the lightbox site



The shadow overlay doesn't stretch to cover full browser window.
Remove the default margin and padding from the body tag. Add body{ margin: 0; padding: 0; } to your stylesheet.
The shadow overlay doesn't show up in IE.
Find the filter: progid:DXI line that you added to your stylesheet. There is a reference to the overlay.png in this line. Make sure that it is set relative to the current webpage, not relative to the CSS file.

08-13-2007, 10:20 AM
hi yes, I did use overlay.png before but it was to the same effect, i dont have any margin tags either, thanks :D