No replies
jpgonc
jpgonc's picture
Offline
newbie
Last seen: 9 years 36 weeks ago
Joined: 2011-04-08
Posts: 8
Points: 12

Hello, I am having an issue that's driving me nuts: My tooltip gets behind the images. Here's the code:

<div id="continente">
   <div class="tabbertab">
    <h2>North America</h2>
      <p class="navega">
       <a class="dicasp" href="fotos.html?zona=NA&amp;pais=CA&amp;fotos=0" target="_blank"><img src="./imagens/ca.gif" alt="Canada"/><span>Canada</span></a><span>(0)</span>
       <a class="dicasp" href="fotos.html?zona=NA&amp;pais=CU&amp;fotos=0" target="_blank"><img src="./imagens/cu.gif" alt="Cuba"/><span>Cuba</span></a><span>(0)</span>
       <a class="dicasp" href="fotos.html?zona=NA&amp;pais=MX&amp;fotos=0" target="_blank"><img src="./imagens/me.gif" alt="Mexico"/><span>Mexico</span></a><span>(0)</span>
       <a class="dicasp" href="fotos.html?zona=NA&amp;pais=US&amp;fotos=0" target="_blank"><img src="./imagens/us.gif" alt="USA"/><span>United States</span></a><span>(0)</span>
............... etc... etc...
      </p>
   </div>
</div>

div#continente a.dicasp span { display: none; }
div#continente a.dicasp:hover span {
	position: absolute;
	display: block;
	left: 55%;
	top: 75%;
	background-color: #02111A;
	border: 1px solid #566670;
	padding: 5px;
	font: normal bold 16px "Nevis Bold", Tahoma, Georgia;
	color: #FFFFFF;
        width: 200px;
}
div#continente a.dicasp {
    position:relative;
    z-index:24;
}
 
.tabbertab {
	padding: 15px 0;
	border: 2px groove #FFFFFF;
	height: 110px; 
}