PDA

View Full Version : pop-up image viewer



sfo
09-20-2008, 02:25 PM
1) Script Title: pop-up image viewer

2) Script URL (on DD): http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/

3) Describe problem: Okie so...I m all new in css and coding and i was making a website, now what happens is that I used this image viewer on my gallery www.....gr/html/gallery.html and on firefox everything looks normal (or at least how i want them to look) but on IE if you take a look the Large image is on the same height with the Thumb and thats a problem.. Can someone tell me what's rong and how can I fix it so it;s not on the same height?

auntnini
09-21-2008, 12:12 AM
For HOVER/SPAN CSS basics see http://meyerweb.com/eric/css/edge/popups/demo.html. Then you might be more confident about changing your settings for left:-1000px and/or left:60px. Once you take the CSS out of the box, you are not stuck with the settings.

This is your current CSS (as they were "boxed"):


.thumbnail{ position: relative; z-index: 0; }
.thumbnail:hover{ background-color: #FFFFFF; z-index: 50; }
.thumbnail span{ position: absolute; padding: 0px; left: -1000px; border: 0px; visibility: hidden; }
.thumbnail span img{ border-width: 0; padding: 0px; }
.thumbnail:hover span{ visibility: visible; top: 0; left: 60px; }


The thumbnail is position:RELATIVE so you can set the HOVER/SPAN position:POSITIVE in relation to the thumbnail. Looking at your page, I’d be inclined to set a right margin (instead of left). I used a variation of this at http://artdemo.tripod.com/illustration/indexCSS.html#top and http://chanit.com/gallery/index.htm wherein there were different margin settings for the left and right columns, unfortunately I accidentally deleted my better/original CSS file for this.

sfo
09-21-2008, 12:55 AM
Hi and firstly thanks for your reply...secondly....:P will it be rong to tell you WHAT? lol...im sorry...i feel like a lil idiot but i dont really understand...and i dont understand how this will help?