PDA

View Full Version : CSS Popup Image Viewer script not working in IE8



michelle1977
07-12-2009, 02:48 PM
1) Script Title: CSS Popup Image Viewer

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

3) Describe problem:

I've been using the above script for a while and it works very well. However, with the new Internet Explorer 8 the pop up images appear below the image next to it, instead of on top. Any ideas on how I can change the script so it works properly in IE8?

michelle1977
07-18-2009, 02:27 PM
Anybody have a solution for this?

ddadmin
07-19-2009, 06:25 AM
As far as I can tell in IE8 the only minor difference is that the enlarged image appears below its thumbnail, but this doesn't really adversely affect anything practically speaking. What if you modify the line in red with the change below:


.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: -40px;
left: 60px; /*position where enlarged image should offset horizontally */
}

michelle1977
07-19-2009, 08:30 PM
Hi and thanks for your help. Unfortunately that doesn't solve it. The enlarged image appears above its own thumbnail, but below the other thumbnails on the page: http://www.lettersets.com/dd.gif

Any ideas?

michelle1977
07-23-2009, 02:37 PM
Does anybody have an idea how to fix this?

ddadmin
07-23-2009, 04:23 PM
I'll try a few things in IE8 with this script next week. Not sure if I can find an easy solution to the problem though. Currently on vacation btw.

michelle1977
07-31-2009, 01:30 AM
Thanks, I really appreciate your help and it would be great if you found a solution for this. Ugh... I really don't like the new IE8...

MitZ
08-03-2009, 04:01 PM
I'm affraid i've got the same problem as Michelle1977.

The enlarged image appears above its own thumbnail, but below the other thumbnails on the page. I've tried to make some adjustments to the z-index settings but that doesn't seem to help.

Any help is welcome! :)

Thanks a lot in advance.

MitZ
08-08-2009, 01:44 PM
Hope you really enjoyed your vacation ddadmin!

But... (yeah, there's the 'but' :) )... have you had any time to look into this (for me really big) IE8 problem?

Hope to hear from you.

MitZ
08-18-2009, 10:08 PM
Hi there Michelle1977,

Have you found a solution to the popup image problem yet? I've tried all sorts of adjustments but nothing seems to work properly in IE8.

Hope to hear from you!

michelle1977
09-19-2009, 02:56 PM
Hi,

Does anybody have any solution for this yet?

clair
09-28-2009, 10:31 AM
Try this and then fiddle with the left: in the thumbnail hover span:
This the very fist section in the CSS.

.thumbnail{
position: relative;
z-index: -0;

}
Set the z-index to -0 instead of 0.
Clair

MitZ
10-11-2009, 09:57 AM
Unfortunately your solution doesn't work Clair. Thanks for the help though!

Does anyone else has an idea how to let this work in IE8?

lifelinz
02-17-2010, 06:46 PM
The original script does work in ALL browsers except IE8 - which cannot handle the z-indexing. In order to get it to work on mine - I had to double up the beginning and end style tags. My code is below. Why this is the case for IE8 - I don't know but it works now.


<style type="text/css">
<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
/*Seems the dynamicdrive code was not so great after all -edited by SleepinDevil*/

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
position: relative;
z-index: 900;
background-color: transparent;
}

.thumbnail span{ /*CSS for enlarged image*/
display:none;
position: absolute;
left: -1000px;
z-index: 910;
padding: 5px;
background-color: black;
color: white;
border: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
display:block;
position: absolute;
top: 20;
left: -200px; /*position where enlarged image should offset horizontally */
z-index: 910;
}

</style>
</style>

michelle1977
05-05-2010, 09:02 AM
Hi,

Has anybody had any success with the above solution? I de-installed IE8 because it was making my computer too slow, so I can't test it.

Michelle

michelle1977
07-29-2010, 12:42 PM
1) Script Title: CSS Popup Image Viewer

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

3) Describe problem:

I've been using the above script for a while and it works very well. However, with the new Internet Explorer 8 the pop up images appear below the image next to it, instead of on top. Any ideas on how I can change the script so it works properly in IE8?

I still haven't found a solution for the above problem. Has anybody else found a way around it in the meantime?

Jurkin
09-09-2010, 03:51 PM
.thumbnail {
position: static;
z-index: 0;
}
:)