Help - Search - Members - Calendar
Full Version: ** SOLVED **lightbox problem
Pixel2Life Forum > Help Section > HTML, XHTML, CSS and General Web Design
zoom4267
click on an image.

when the large image comes up, you will see a scroll bar at the bottom. i cant figure out why its there and where it comes from, i dont want it there.

http://www.skytopdesigns.com/mecca/designs.html

this is the lightbox i am using

http://www.huddletogether.com/projects/lightbox2/

thanks
Demonslay
Try to install Firebug for Firefox to manipulate the page and find out what is going on. Using this, I've found your problem quite easily.

The problem is that all images on your page are styled to have a padding of 8px (style.css line 65). Using Firebug I disabled the rule and immediately the problem scroolbar went away. I'm guessing it is because Lightbox makes a div element with a width of the image, and when you add a padding that it wasn't expecting, it overflows the frame.

Three solutions I came up with:
1. Kill the padding all together for all images
2. Make an exception rule to kill padding on images within that #lightbox div
3. Add a style for overflow:hidden on #imageDataContainer

I would recommend the second one. Add this code to either your own style, or to lightbox.css.

CODE
#lightbox img {
padding:0 !important;
}


That solves the scroll problem, but there is an inconsistency of color between the Close button and the space where the caption text would go below the image. I'll let you use Firebug to find out how to solve that on your own. bigwink.gif

If you've never heard of Firebug, I highly recommend you try it out. Imagine being able to crawl every detail of a live webpage, be it manipulated with JavaScript or not, manipulate HTML, CSS, JavaScript, anything. Also imagine a command prompt-style way of executing your own debugging stuff... truly the best web development tool ever created, as it has lots more goodies included. smile.gif
zoom4267
thanks and i will try your suggestions

i do have firebug but i am not a great coder so i would easily miss some of the fixes, i did find some solutions playing with the .js file but i am really bad at that so i wont touch it much,

thanks alot
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2009 Invision Power Services, Inc.