I need help desperately!

[athoora]

1) Script Title:
css-image-gallery
2) Script URL (on DD):
http://www.dynamicdrive.com/style/cs...image-gallery/
3) Describe problem:

Hello every one, I loved this script and I customized it to view my image gallery, but there was a problem in the image overlapping in IE! I tried to solve it and I couldn't, I'm also in a hurry to finish my website so I switchd to a very simple similar CSS photo gallery, the problem is I want and need to add a description to each of my images when it is enlarged, I don't know how! I'm not that CSS expert, I can't find exactly how to show the image desc in the right place and It's been 2 months since I've been telling ppl I'll finish my website soon! I know it's not a hard thing for u nice ppl!

my website is www.cookie-licious.com, you can see that my pics need some words!

Pls help!

Thanks a Zillion!

[jscheuer1]

Your link in your post to the cookie-licous site is broken - at least at the moment. Which code are you using? I'm thinking that it would be easier to fix the image rendering in IE than to add captions to a different gallery that doesn't have them. Do you have a link to the page you made using the code from:

http://www.dynamicdrive.com/style/cs...image-gallery/

?

[athoora]

Hello

I fixed the link I hope that u can see it now!

Fixing that script toke me to another problems, at least for me only because as I said I'm not a CSS expert I just customize for my self the easy stuff

this is the CSS I'm using now to view the image enlarged in a specific spot:

#gallery {width:300px;}
#gallery ul {list-style:none; padding:0; margin:0; width:180px; position:relative; float:left;}
#gallery ul li {display:inline; width:52px; height:52px; float:left; margin:0 0 5px 5px;}
#gallery ul li a {display:block; width:50px; height:50px; text-decoration:none; border:1px solid #000;}
#gallery ul li a img {display:block; width:50px; height:50px; border:0;}
#gallery ul li a:hover {white-space:normal; border-color:#ddd;}
#gallery ul li a:hover img {position:absolute; left:180px; top:0; width:auto; height:auto; }

I would really appreciate it if you can please tell me how and where to add that caption!

Thanks a 10 Zillion!

Athoora

[jscheuer1]

I added these styles (highlighted) and changed the top (red) for the img hover:

#gallery {width:750px;}
#gallery ul li a span {visibility:hidden;position:absolute; top:-53px;}
#gallery ul li a:hover span {visibility:visible;color:#555;left:182px;font-weight:bold;white-space:nowrap;}
#gallery ul {list-style:none; padding:0; margin:0; width:180px; position:relative; float:left;}
#gallery ul li {display:inline; width:52px; height:52px; float:left; margin:0 0 5px 5px;}
#gallery ul li a {display:block; width:50px; height:50px; text-decoration:none; border:1px solid #000;}
#gallery ul li a img {display:block; width:50px; height:50px; border:0;}
#gallery ul li a:hover {white-space:normal; border-color:#ddd;}
#gallery ul li a:hover img {position:absolute; left:180px; top:-50px; width:auto; height:auto; border:0 }

And this (example markup highlighted):

<li><a href="#nogo"><img src="mini/2-mini.jpg"><span>My Caption</span></a></li>

Using FF's developer extension. It seems to work out.

[athoora]

Oh My God!! Thanks u a 98374928 Zillion times! u have made my year! hehehe
that's all I needed! THANK U:>