IE7 & Popup Image Viewer

[intricateartist]

I could use some help - with the release of IE7, my users do not get the large image when they hover in my gallery. I know IE hates certain CSS properties, but I've tried them all and I'm not having any luck. It works fine in Firefox & IE6, it just hates IE7. Help would be appreciated.

Sample page: http://intricateart.com/2007-collection-thumbs/

CSS:

#contentleft-thumbs {
float: left;
background: transparent url('img/previewpane.jpg') top left;
background-repeat: no-repeat;
width: 40%;
height: 400px;
padding: 0px;
margin-right: 10px;
}

#thumbnails {
margin-top: 0px;
}


.thumbnailimg {
font-family: arial, verdana, helvetica, tahoma, sans-serif;
font-size: 10px;
color: #352019;
line-height: 100%;
text-align: center;
background-color: #fff;
float: left;
margin-bottom: 10px;
padding: 4px;
border: 1px solid #7a4503;
width: 150px;
height: 130px;
margin-right: 10px;
}

.printthumbnailimg {
font-family: arial, verdana, helvetica, tahoma, sans-serif;
font-size: 10px;
color: #352019;
line-height: 100%;
text-align: center;
background-color: #fff;
float: left;
margin-bottom: 15px;
padding: 4px;
border: 1px solid #7a4503;
width: 150px;
height: 175px;
margin-right: 10px;
}

.thumbnail img{
border: 1px solid white;
margin: 0 0 5px 0;
}

.thumbnail img {
cursor: default;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
border: 1px solid #99480d;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
top: 120px;
left: 43px;
background-color: #f0e3b7;
padding: 2px;
border: none;
visibility: hidden;
color: black;
text-decoration: none;
}

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

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
margin-top: 120px;
top: 0;
left: 43px; /*position where enlarged image should offset horizontally */
overflow: hidden;
}

[intricateartist]

Does anyone have any recommendation for me on this IE7 fix?

[liam77]

Have you tried to take the
overflow:hidden off the last definition? Does the popup show up then?


Liam.

[intricateartist]

Thanks, Liam - I removed that, if you have IE7 could you have a look for me? Otherwise I'll check it in a few hours - it renders ok in Firefox and IE6, so maybe that was the trigger.

[liam77]

It didn't fix it sorry, I just checked in IE7...

You don't have the z-index property in the .thumbnail:hover definition, and you don't have a definition for .thumbnail at all (with it's own z-index property and value).

See the original style sheet here:

http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/P80/

Have you tried adding those in?


Liam.

[intricateartist]

Thanks for looking, Liam.

I added the z-index back in, but the position: relative did not set the thumbs where I wanted them to appear, and I set the value to 0. Does that work in IE7?

[liam77]

It's still not working in IE7. But, you have the z-index set to 0 in both of those definitions. If you want to change it again so it looks like the one below, I'll have another look at it.


.thumbnail:hover {
z-index: 50;
}

Apart from that I'm not sure what else could be changed.

It has probably got to do with the positioning of the .thumbnail:hover span.


.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
margin-top: 120px;
top: 0;
left: 43px; /*position where enlarged image should offset horizontally */
overflow: hidden;
}

could you take the margin-top:120px out and change the top:0 to top:120px ?

I have had trouble getting IE7 and Firefox to show the same result with absolute positioning (using this same Popup Image Viewer css code). The only way that I found that worked was to use position:fixed which gave the same result for both browsers, and should be right for you to use. That will not work for IE6 or below though (that can be fixed with more code).



Liam.

[intricateartist]

Liam,

I made your suggested revisions, hopefully that is working?

I can't thank you enough for your time and assistance.

[liam77]

No, it's still not working...