...

View Full Version : Resolved Lightbox2 overlay div height too short in IE <= 7



tomws
03-16-2009, 09:56 PM
Not sure if the root problem is a js load issue or rather css. Problem page is here: http://arcangelmetalworks.com/pictures.php

I've had success using the Lightbox2 module on several Drupal-based sites, but this is the first time I've handled the straight code and tried to drop it into a hand-coded site. Internet Explorer fails to draw the overlay div to the full page height. Firefox 3 performs as expected.

The web site suggests setting the body margin and padding to zero, but those were set anyway and tweaking didn't help. Another suggestion was to stick initLighbox() into the body onload, but that function doesn't exist. Also tried initialize() and Lightbox.initialize(), but again it's claimed those functions don't exist. Looking into the code, however, initialize() is where the div height is calculated, I think.

It should be noted that the lightbox still works on IE even when using one of these failed onload attempts. And I don't actually get IE to report any js error with the onloads - I have to rely on Firebug for that.

Anyone have an idea of what I'm overlooking? I've spent too much time staring at code and coming up blank.

Old Pedant
03-16-2009, 11:06 PM
So can you show us the code that draws the overlay so we don't have to go poking around for it??

Yes, I see the effect. Looks like it's drawing it only to the physical height of the window, not to the full scrollable height. You might have to use some browser-specific code.

tomws
03-17-2009, 12:57 AM
I don't think about people not using Firebug to look at code. See here: http://arcangelmetalworks.com/js/lightbox.js

Actually, now that I look at what I copied, I need to check why it's still nested. I thought I had moved the code and linked up to the top level /js directory thinking that it might have been a hard-coded path issue in the lightbox code.

EDIT: I moved the code to the top level directories (like I dreamed I had done before, apparently), but the problem is still there. Fixed my link above to point to the current location.

tomws
03-17-2009, 01:18 AM
Found the fix thanks to a response elsewhere. Will post the link to the solution and the solution itself.

Link: http://www.dynamicdrive.com/forums/showpost.php?p=140184&postcount=5
The solution involves IE specific code, as suggested above. I'll assume that the Drupal module maintainers do something to add this in themselves since I've never had a problem with that.


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.

googlebot
10-10-2010, 02:48 AM
Found the fix thanks to a response elsewhere. Will post the link to the solution and the solution itself.

Link: http://www.dynamicdrive.com/forums/showpost.php?p=140184&postcount=5
The solution involves IE specific code, as suggested above. I'll assume that the Drupal module maintainers do something to add this in themselves since I've never had a problem with that.

Hello, I developed a solution on my blog to correct incompatibilities lightbox with Internet Explorer:

see:
lightbox internet explorer (http://www.lucaspeperaio.com.br/blog/lightbox-no-internet-explorer-resolvido/)

Ai está a solução para o bug do internet explorer na galeria ligthbox!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum