Thank you! Now, here's my code. Call me blind or whatever, but I'm not seeing it..

If anything in this code is incorrect, please, please tell me where it is and what to fix ... :confused: Then I can simply copy this code to all of my site's lightbox css and finally be done with this thing. (And "they" say this is easy... )

#lightbox{position: absolute;left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width:auto; height:auto;}
#lightbox a:hover{ text-decoration:none; }

#outerImageContainer{ position: relative; background-color: #fff; width:auto; height:auto; margin: 0 auto; }
#imageContainer{ padding: 0px; }

#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: 100%; height: 100%; background-image: url(data:images/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;background: url(http://www.wedding-favor-bookmarks.c.../prevlabel.gif) no-repeat 0% 85% !important;}
#nextLink { right: 0; float: right;background: url(http://www.wedding-favor-bookmarks.c.../nextlabel.gif) no-repeat 100% 85% !important;
}
#prevLink:hover, #prevLink:visited:hover { background: url(http://www.wedding-favor-bookmarks.c.../prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(http://www.wedding-favor-bookmarks.c.../nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font:10px Verdana, Helvetica, sans-serif; color:444; background-color: #fff; margin:auto; line-height: 2.5em; overflow: auto; width: 100%; }

#imageData{padding:0 10px; color: #444; }
#imageData #imageDetails{ width: 100%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold;}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;}
#imageData #bottomNavClose{ width:100%; padding-bottom: 0.7em; outline: none;}

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

Yeah! Thank you so much!! We're getting there...

Baby steps...

All of the graphics are showing up on Wedding Favor Bookmarks and Personalized Bookmarks for All Occasions

But now the Close graphic isn't showing up on these two sites:
Lighted Personalized Wine Bottles and Mason Jars
Memorial Bookmarks for Funerals and Memorial Ceremonies

Ultimately, on ALL the sites, I would like the format show like this - Centered below the image instead of the Prev and Next cutting into the images, which can be crucial because they're bookmarks :

Image x of x

Previous Next

Close

And another baby step successfully completed! Thank you!

Now for the formatting... Can you help me configure the positioning of the labels so they appear below the images in one of the two following positions, whichever is easiest to figure out?




OR

I can't even begin to tell you how very helpful you've been!! I think I'm going to play it safe and leave well enough alone now.

I just went through every image on every page of all three sites and I don't think the labels look so intrusive that I need to be playing around with the code anymore. All of the .gifs are showing up and it's working correctly - thank you!!!!!!!!

Obviously YOU didn't read the entire thread before posting this did you?