Foros del Web » Creando para Internet » CSS »

Problema con Tooltip en FF

Estas en el tema de Problema con Tooltip en FF en el foro de CSS en Foros del Web. Estoy intentando hacer un tooltip con scrolls pero el problema es que en FF al intentarlo desplazar por la barra me sale un simbolo de ...
  #1 (permalink)  
Antiguo 26/06/2008, 05:27
 
Fecha de Ingreso: agosto-2007
Mensajes: 11
Antigüedad: 10 años, 3 meses
Puntos: 0
Problema con Tooltip en FF

Estoy intentando hacer un tooltip con scrolls pero el problema es que en FF al intentarlo desplazar por la barra me sale un simbolo de prohibido, mientras que si lo hago pulsando las flechitas o con la rueda del raton funciona. (En IE y Opera funciona perfectamente).

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Bubble Tooltips</title>
<meta content="CSS Tooltips">

<style type="text/css">
body{font: .75em Arial,sans-serif; background: #FFFFFF; color: #333333}
div#container{width: 500px; margin:0 auto}
h1{ color: #F60; margin: 1em 0 0; letter-spacing: -2px; }
p{margin: 0 0 1.7em; }

/*---------- bubble tooltip -----------*/
a.tt{
    position:relative;
    z-index:24;
    color:#3CA3FF;
	font-weight:bold;
    text-decoration:none;
    outline:0;
}
a.tt span{ display: none; }

/*background:; ie hack, something must be changed in <a> for ie to execute it*/
a.tt:hover{ z-index:25; color: #aaaaff; background:;}

a.tt:hover span.tooltip{
    display:block;
    position:absolute;
    top:0px; left:0;
	padding: 15px 0 0 0;
	width:310px;
	color: #993300;
    text-align: center;
	filter: alpha(opacity:90);*/
	KHTMLOpacity: 0.90;
	MozOpacity: 0.90;
	opacity: 0.90;
}
a.tt:hover span.top{
	display: block;
	padding: 30px 8px 0;
    background: url(bubble.gif) no-repeat top;
}
a.tt:hover span.middle{ /* different middle bg for stretch */
	display: block;
	padding: 0 8px; 
	height:100px;
	background: url(bubble_filler.gif) repeat bottom;	
}

a.tt:hover span.bottom{
	display: block;
	padding:3px 8px 10px;
	color: #548912;
    background: url(bubble.gif) no-repeat bottom;
}

a.tt:hover div.content{
	display:block;
	width:285px;
	height:100px;
	padding-right:10px;
	overflow:auto;		
	text-align:left;
	cursor:none;			
}

</style>




</head>

<body>
	
		
			<a href="#" class="tt">hover here!
				<span class="tooltip">
					<span class="top">
					</span>
					<span class="middle">
						<div class="content">
							WOOWW!, <br>This really is a very long tooltip.  Normally they aren't this long but every once in a while you feel the urge to use a really long description to make sure you get your point across to everyone!  This could go on and on all of the way down the page and probably overflow onto the next website you visit!  No, seriously go check the next website you planned on visiting..but you have to be quick when you move the mouse off of this link.  I bet you can't do it fast enough ;)
						</div>
					</span>
					<span class="bottom">
					</span>
				</span>
			</a>
</body>
</html>
hay alguna forma de solucionarlo?

Gracias
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 14:20.