Forum Moderators: not2easy
I installed the Lightbox2 in my site: <>
But there's a problem when opening the images in IE7. It only shows half of the transparent in the background.
Here's the CSS:
#lightbox{ position: absolute; left: 0; width: 100%; text-align: center; line-height: 0; z-index:20100;}
#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; border:1px #333333; 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: 20000;
width: 100%;
height: 500px;
background-color: #000;
Does anyone know how to fix it ?
Thank you.
[edited by: SuzyUK at 7:16 am (utc) on July 19, 2008]
[edit reason] sorry no personal links, see charter [/edit]
sorry I had to remove your link per our TOS/Charter (see pinned posts at top of forum) but let me add some inital observations to see if anyone has come across the issue already.. I'm trying some searches for you meantime as well.
the "overlay" is being told to be 100% wide but it is fact only 700px wide which is the same width as the sites main wrapper div.. it is being positioned at the left of the viewport hence it only looks "half" wide.. but the images inside it are centered in the viewport?
anyway I added position: relative to the body element which doesn't fix the issue but does put the overlay back over the main wrapper.
.......
...[stop press] ;) found it I think
your main CSS has this
body {
background: #fff;
color: #333333;
background-image: url(img/bg-full.jpg);
margin: 15px auto;
width: 700px;
text-align: left;
font: 76%/160% Verdana,Arial,Helvetica,sans-serif;
background-color: #13629b;
background-repeat: repeat-x;
}...
#tudo {
margin: 0px;
padding: 20px;
background-color: #FFFFFF;
}
where #tudo is the wrapper div
the "lightbox" takes its postion and width from the body element so that's why the 700px width
it's still not stable to use the <body> element as the site "wrapper" because of positioning and IE in general not just because of lightbox, so we still advise the use of a wrapper div. Now you have one so you can simply transfer the width and centering to it and all should then be well with your lightbox
i.e. change the css above to something like
/* a very basic reset to remove defaults to make sure IE uses the correct coordinates */
html, body {margin: 0; padding: 0;}/* remove widths and margins */
body {
color: #333333;
background: #13629b url(img/bg-full.jpg) repeat-x 0 0;
text-align: center; /* IE5.x centering */
font: 76%/160% Verdana,Arial,Helvetica,sans-serif;
}...
/* add width and margin in here */
#tudo {
margin: 15px auto;
width: 660px; /* 700px - the padding */
padding: 20px;
background-color: #fff;
text-align: left; /* reset the IE5.x centering */
}
see how that goes, it's hard to know if that will affect other things throughout the site.. I do see you have rounded corners top and bottom of the #tudo div..it might be that you have to move them inside the #tudo div or maybe just add the width and centering to them too
or if it's easier all around remove just the width and margins from the body element and add a new HTML wrapper div around all of your existing code to do the same work, this should mean you don't have to make any other changes to your existing divs
hth for now
