CSS Tooltip Problem...

[eMonk]

Screenshot from Internet Explorer 7


- tooltip displays behind thumbs, why isn't it showing up infront like firefox?

Screenshot from Firefox 2


- tooltip displays infront of thumbs, but why is it position down further?

a.tip {
	position: relative;
}

a.tip span {
	display: none;
	position: absolute;
	top: 95px;
	left: -17px;
	width: 125px;
	padding: 5px;
	z-index: 100;
	background: #000000;
	text-align: center;
	color: #FFFFFF;
	-moz-border-radius: 5px; /* this works only in camino/firefox */
	-webkit-border-radius: 5px; /* this is just for Safari */
}

a:hover.tip {
	font-size: 99%; /* this is just for IE */
}

a:hover.tip span {
	display: block;
}

any ideas?

[leek]

Link us to the page with this on it.

[eMonk]

Here's a working example : http://www.munkgalleries.com/css/tooltip/example.php

z-index is set to "100" so it *should* be displaying ontop of everything else like firefox. i'm not using a z-index greater then 100...

[eMonk]

nevermind, found a different working code... thx

[fris]

http://www.nickstakenburg.com/projects/prototip2/

[mrkris]

http://www.nickstakenburg.com/projects/prototip2/

Mmm prototype.