CSS image possitioning in IE and Firefox

Hi,
I have a small problem with some css scripting that when you hover over an image, a second image pops up in front of the first. However, vertical alignment of the new pop-up image looks different in IE and firefox.

I must have the pop-up image aligned vertically by the top.


.thumbnail:hover span{ 
visibility: visible;
top: 40px;

The new pop-up image pops up in relation to the embedded image. Firefox seems to take the reference point of the embedded image from the bottom of the image and IE from the top, causing the pop-up image to shift up. Any ideas?

The entire code..


<head>
<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: #ffffff;
padding: 0px;
left: 0px;
border: 6px solid #EBEBEB;
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: 40px;
display: inline;
}
</style>
</head>
<a class="thumbnail" href="#thumb"><img src="images/2009-1.jpg" width="140" height="100" border="0" /><span><img src="images/big.jpg" /><br />pop-up</span></a>

CSS image possitioning in IE and Firefox

css image IE firefox possitioning

GULLonline

Seb7

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week