CSS Popup Image Viewer

[VaporGlide]

Hi,

I was able to make the CSS Popup Image Viewer shown here (http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/) work as a pop down, but when I changed the .thumbnail:hover span top attribute to -400 instead of -1000 I'm getting different results in Firefox and IE7. Any ideas how to make them render approximately the same? IE is rendering a couple of hundred pixels higher than firefox.

Here are the changes I made in the stylesheet:

<style type="text/css">

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

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #333333;
padding: 0px;
left: -1000px;
/*border: 1px dashed gray;*/
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 on hover*/
visibility: visible;
top: -400px;
left: 0px; /*position where enlarged image should offset horizontally */

}

</style>

TIA

Jeff

[Nile]

Can you please tell me what the difference between the popup or popdown? I can't figure out, because the image already does popdown. :-/

[Medyman]

Hey VG,

That's happening because of the IE's messed up box model. I'm betting that IE is off by exactly the height of your thumnail image, right?

The solution? Add an IE only CSS statement. Working off the example on the demo page (height of 66px), it would be this:


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

[VaporGlide]

Hi Medyman,

So by putting * in front of a CSS statement only IE will read it? I've never heard that, thanks.

VG


Hey VG,

That's happening because of the IE's messed up box model. I'm betting that IE is off by exactly the height of your thumnail image, right?

The solution? Add an IE only CSS statement. Working off the example on the demo page (height of 66px), it would be this:


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

[Medyman]

Hi Medyman,

So by putting * in front of a CSS statement only IE will read it? I've never heard that, thanks.

VG

Yup! It's comes in handy. I wouldn't rely too heavily on it. Most things, if coded in a standards compliant way, will render the same across most browsers. There are some sticking points though (as in this case) where the little IE hack is useful.

[VaporGlide]

Yup! It's comes in handy. I wouldn't rely too heavily on it. Most things, if coded in a standards compliant way, will render the same across most browsers. There are some sticking points though (as in this case) where the little IE hack is useful.

I just tried it out and it works brilliantly... thanks for the hand. :D

VG