littlemiss
08-08-2007, 10: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:
#lightbox{
background-color:#eee;
padding: 10px;
border-bottom: 2px solid #666;
border-right: 2px solid #666;
}
#lightboxDetails{
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; }
#overlay{
display:none;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:5000;
background-color:#808080;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
#overlay[id]{ /* IE6 and below Can't See This */
position:fixed;
Any help would be amazing!
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:
#lightbox{
background-color:#eee;
padding: 10px;
border-bottom: 2px solid #666;
border-right: 2px solid #666;
}
#lightboxDetails{
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; }
#overlay{
display:none;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:5000;
background-color:#808080;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
#overlay[id]{ /* IE6 and below Can't See This */
position:fixed;
Any help would be amazing!