Lightbox 2.04 overlay error in IE

[AKiraVos]

1) Script Title:
Lightbox 2.04

3) Describe problem:
Website URL: http://nielsvos.ath.cx

Lightbox normally gives a semi-transparent overlay to your website when viewing an image with it. This works fine at higher resolutions, but as soon as you need to scroll to view the entire image, the overlay is showing an overlay-less bar when using Internet Explorer (IE).
Here are some screen shots to illustrate what I mean:


Lightbox.css:

#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; 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; color: #000; }
#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: 9px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 10px auto 5px auto; line-height: 1.4em; overflow: auto; width: 100%; color: #666; }

#imageData a	{	margin: 0px; padding: 0px; height: 16px; }
#imageData{	padding:2px 2px 2px 2px;	}
#imageData #imageDetails{ margin-left: 10px; width: 70%; height: 14px; float: left; text-align: left;}	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ float: left; padding: 2px 10px 0px 10px; background: #000; height: 14px; color: #fff; font-weight: bold;}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 2px; outline: none;}

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; color: #fff }

Why is this happening and can someone help me to fix it?

[jscheuer1]

This worked out in local testing with your page. Add this to the head of the page, just before the </head> tag:

<!--[if IE]>
<script type="text/javascript">
function fixedIE(tl, n, el){
var sc = 'scroll'+tl, d = document, c = 'compatMode',
b = d[c]&&d[c]=='CSS1Compat'? d.documentElement : d.body;
n = n-0; if(typeof n!='number')return 0;
if(/^(Top|Left)$/.test(tl))
return b[sc]+n+'px';
if(/^(Bottom|Right)$/.test(tl)&&typeof el=='object'){
tl = tl=='Right'? 'Left' : 'Top', sc = 'scroll'+tl;
var dim = 'client' + (tl=='Top'? 'Height' : 'Width');
return b[sc]+b[dim]-el[dim]-n+'px';
}
return 0;
}
</script>
<style type="text/css">
#overlay {
top:expression(fixedIE('Top',0));
left:expression(fixedIE('Left',0));
}
</style>
<![endif]-->

[AKiraVos]

Well thank you, that completely fixed it!

Is it also possible to put that code in a .js file (for example inside the lightbox.js)?

[Nile]

Well, to do that put this inside the lightbox.js:

if(!document.all){
function fixedIE(tl, n, el){
var sc = 'scroll'+tl, d = document, c = 'compatMode',
b = d[c]&&d[c]=='CSS1Compat'? d.documentElement : d.body;
n = n-0; if(typeof n!='number')return 0;
if(/^(Top|Left)$/.test(tl))
return b[sc]+n+'px';
if(/^(Bottom|Right)$/.test(tl)&&typeof el=='object'){
tl = tl=='Right'? 'Left' : 'Top', sc = 'scroll'+tl;
var dim = 'client' + (tl=='Top'? 'Height' : 'Width');
return b[sc]+b[dim]-el[dim]-n+'px';
}
return 0;
}
}

And put this inside a CSS file:

* html #overlay {
top:expression(fixedIE('Top',0));
left:expression(fixedIE('Left',0));
}

[jscheuer1]

Well, to do that put this inside the lightbox.js:

if(!document.all){
function fixedIE(tl, n, el){
 . . . .

And put this inside a CSS file:

* html #overlay {
top:expression(fixedIE('Top',0));
left:expression(fixedIE('Left',0));
}

That will NOT work. if(!document.all) excludes all IE, and * html #overlay only selects for IE 6 and less.

If you are concerned with getting the code off of the page, the best approach would be to create two additional files:

ie_lb.css:

#overlay {
top:expression(fixedIE('Top',0));
left:expression(fixedIE('Left',0));
}

and ie_lb.js:

function fixedIE(tl, n, el){
var sc = 'scroll'+tl, d = document, c = 'compatMode',
b = d[c]&&d[c]=='CSS1Compat'? d.documentElement : d.body;
n = n-0; if(typeof n!='number')return 0;
if(/^(Top|Left)$/.test(tl))
return b[sc]+n+'px';
if(/^(Bottom|Right)$/.test(tl)&&typeof el=='object'){
tl = tl=='Right'? 'Left' : 'Top', sc = 'scroll'+tl;
var dim = 'client' + (tl=='Top'? 'Height' : 'Width');
return b[sc]+b[dim]-el[dim]-n+'px';
}
return 0;
}

You could then replace the code on the page with this:

<!--[if IE]>
<script type="text/javascript" src="ie_lb.js"></script>
<link rel="stylesheet" href="ie_lb.css" type="text/css">
<![endif]-->

Just make sure that the src and href attributes point to the files' actual locations on your server.

[AKiraVos]

Hey thanks it works great!

I have one real strange problem left. ONE of my fotos is giving a problem ONLY in IE (... again ... IE... ). I have portrait format fotos (469x700px) and landscape format fotos (700x469).

With one foto that is landscape format, lightbox thinks its portrait shaped, so lightbox displays itself around 469x700px while the foto is 700x469px. It only happens with that particular foto. If I rename the filename everything is fine. As soon as I rename it back to its original file name, things are messed up again. Even if I replace the file with another foto with the same filename, its messed up.

First I thought it had something to do with temporary internet files, so I first tried to refresh with CTRL+F5 but that didnt change a think. I even emptied my temp files, cookies and EVEN history :P then rebooted my computer. But still as soon as there is a foto with that particular filename (arch2.jpg) its messed up.

Is this a strange IE bug? or a lightbox bug? I couldnt fix it so I just changed the filename from arch2.jpg to arch2a.jpg and everything was fine again.

[jscheuer1]

That is really strange. If you could put a up a separate page somewhere that demonstrates this, I might, and I stress might, be able to figure it out.

As long as it works out for you as arch2a.jpg though, I wouldn't worry about it.

[AKiraVos]

Well indeed it isnt a big problem for me if it works fine like this. In fact, when I tested it on another pc, the problem didnt appear with the filename arch2.jpg. So there must be a factor located on my pc to explain this...

It just puzzled me and I don't like it if things happen which I don't understand :P

I will add the file with the filename arch2.jpg this evening and post the link here when its up. Big chance your computer doesnt display the foto wrong, but at least we can try

[AKiraVos]

Ok, I have copied arch2a.jpg and t_arch2a.jpg en named the copy arch2.jpg and t_arch2.jpg.
http://nielsvos.ath.cx/architecture
When I view the foto arch2.jpg in IE it appears to me like this:



In FireFox and on other computers everything appears normal.

[Anouk718]

That will NOT work. if(!document.all) excludes all IE, and * html #overlay only selects for IE 6 and less.

If you are concerned with getting the code off of the page, the best approach would be to create two additional files:

ie_lb.css:

#overlay {
top:expression(fixedIE('Top',0));
left:expression(fixedIE('Left',0));
}

and ie_lb.js:

function fixedIE(tl, n, el){
var sc = 'scroll'+tl, d = document, c = 'compatMode',
b = d[c]&&d[c]=='CSS1Compat'? d.documentElement : d.body;
n = n-0; if(typeof n!='number')return 0;
if(/^(Top|Left)$/.test(tl))
return b[sc]+n+'px';
if(/^(Bottom|Right)$/.test(tl)&&typeof el=='object'){
tl = tl=='Right'? 'Left' : 'Top', sc = 'scroll'+tl;
var dim = 'client' + (tl=='Top'? 'Height' : 'Width');
return b[sc]+b[dim]-el[dim]-n+'px';
}
return 0;
}

You could then replace the code on the page with this:

<!--[if IE]>
<script type="text/javascript" src="ie_lb.js"></script>
<link rel="stylesheet" href="ie_lb.css" type="text/css">
<![endif]-->

Just make sure that the src and href attributes point to the files' actual locations on your server.

I also used this solution for my website. It´s great! But I still have a problem. The overlay still has problems in Firefox.

What do I have to change about the 2 files to let it work for all browsers?