CSS Lightbox

We have deiced as a group to use a lightbox affect on the images so that they can be viewed in the original size. We decided that it would need to be all CSS without any java-script, so that people that do not have java-script enabled on their computers can still have the affect. I searched the internet and found several suitable lightbox affects that i could use. These were:

1. http://windyroad.org/static/css-lightbox/css-lightbox.html#showimagecap
   
2. http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed/
3. http://windyroad.org/static/css-lightbox/css-lightbox.html#showimagecap
4. http://www.cssplay.co.uk/menu/lightbox-click.html+
5. http://www.cssplay.co.uk/menu/lightbox-hover.html
6. http://www.cssplay.co.uk/layouts/body5.html
7. http://k-u-h-n.net/wp/index.php/2009/07/08/kuhn-pure-css-lightbox/
   

After looking through all of the affects, i decided that number seven had the best affect with most browsers, and had the best look and feel along with functionality.

Now i had the base for the affect i then set out to modify it for our needs. I had to create a separate class in the CSS for every image so that we could position it exactly where we wanted it.

I managed to get this to work in Mozilla Firefox but when i opened it in Internet Explorer i had a few problems. I main problem was when you clicked on the image for the affect was all the images would come up with their smaller thumbnails over the lightbox affect.
The way i coded this one was having and individual DIV with a class around each image to position it.

I fixed the problem by just putting the class within the code of the image which still allows me to position it but it does not effect the affect.