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:

Code:

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

or:

Code:

<!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:

Code:

body {
margin:0;
padding:0;
}

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

Code:

#page {
margin:10px;
}

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

HTML Code:

<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...interests.html

**jscheuer1** · 03-05-2008, 02:27 PM

Using a text only editor, find this section in lightbox.js:

Code:

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

Make it ike so:

Code:

	} 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

Thread: Lightbox 2.0 Dim Area (Behind photographs) Help

Thread Tools

Search Thread

Lightbox 2.0 Dim Area (Behind photographs) Help

Link to the page

Many Thanks

Bookmarks

Bookmarks

Posting Permissions