Trouble with Lightbox in Dreamweaver

[PaulRice]

Hello everyone, I'm new to the site (and to Dreamweaver), and I need just a little bit of help.

I've set up a lightbox gallery on my website, and its working fine except for one thing. When the image is clicked on and opens up larger, a large white space appears below the image which contains the 'prev,' and 'next' buttons. Apart from that it works, could someone look at my coding and see if I've made a newbie mistake?
Any help at all would be HUGELY appreciated.

Cheers!
My site:
http://www.paulricedesign.com/photo.html

[jscheuer1]

Your lightbox.css file has been edited or has become corrupted. Or it was distributed to you that way.

Anyways, it's OK except for this line:

#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; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#overlayoverlayoverlay{ 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%; backgr . . .

It should be:

#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; }
#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%; backgr . . .

In an unrelated matter - Put your images on a diet!

[PaulRice]

Hi John - Yep that worked! I also moved the css. code above the javascript (a suggestion from someone else).
Thank you so much, as my knowledge of coding is still woefully limited this really has helped me out more than you can imagine.

Your point of my images being too big is right as well, I just stuck them up there really unedited - they'll be cut down before the site is properly done.

Thanks again!