PDA

View Full Version : Lightbox 2.0 Dim Area (Behind photographs) Help



MiziaQ
03-04-2008, 09:26 PM
1) Script Title:

2) Script URL (on DD):

3) Describe problem:

Hey, I'm working on a project for my web development course. I added the lightbox 2.0 to view photographs. The dim area behind the picture covered the entire page before I added <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

I tried messing around with the overlay bit of the css, but nothing works. How can I keep the doctype and still have the dim area cover the entire page ? The funny thing is that firefox displays it just fine, but ie screws it up. Please help :)

jscheuer1
03-05-2008, 05:16 AM
You should not be using an XHTML DOCTYPE, try:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

or:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

But that may or may not solve your problem. I've had success following this sort of strategy. Using style, I first zero out the margin and padding of the body:


body {
margin:0;
padding:0;
}

Then, if I want a margin for the page, I create a page division style:


#page {
margin:10px;
}

and use it in my HTML markup to contain everything inside the body tag:


<body>
<div id="page">
Everything that went in the body before now goes here
<div>
</body>

MiziaQ
03-05-2008, 12:23 PM
Thanks a lot, i changed the padding and margin in the body style to 0, and it helped a bit (the dim area now covers the entire width). I however have a scrollbar for my content div. For pictures that fit inside the screen, there is no problem. Pictures that are larger in size extend the page. The extension is not within the dark area. Any suggestions ? Cheers

jscheuer1
03-05-2008, 01:30 PM
The script is supposed to take that into account, resizing the overlay after displaying the image. It sounds like you are somehow hiding the true height of the page from the script. Which version of IE are you using? It would help me to see your page:

Please post a link to the page on your site that contains the problematic code so we can check it out.

MiziaQ
03-05-2008, 01:43 PM
Here's the link :) In the header, you have a navigation bar.
Press on photography, and you should be able to see the problem
with the first image. Cheers

http://corvus2.ucc.ie/BScI07/MZywien/Scripts/interests.html

jscheuer1
03-05-2008, 02:27 PM
Using a text only editor, find this section in lightbox.js:


} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;

Make it ike so:


} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight = Math.max(document.documentElement.clientHeight, document.documentElement.scrollHeight);

MiziaQ
03-05-2008, 03:25 PM
Great job John, worked just fine :) You are a lifesaver