Foros del Web » Creando para Internet » CSS »

Problema con a:hover en ie6

Estas en el tema de Problema con a:hover en ie6 en el foro de CSS en Foros del Web. hola, buenas noches a todos los miembros de este excelente foro, que contiene mucha ayuda pra todos, bueno antes que todo, mil disculpas sin no ...
  #1 (permalink)  
Antiguo 27/03/2010, 01:32
 
Fecha de Ingreso: marzo-2010
Mensajes: 19
Antigüedad: 7 años, 8 meses
Puntos: 1
Problema con a:hover en ie6

hola, buenas noches a todos los miembros de este excelente foro, que contiene mucha ayuda pra todos, bueno antes que todo, mil disculpas sin no he posteado en el lugar correcto este tema, es que tiene que ver con un problema de un dropdown menu con superfish un plugin de la libreria jquery.
Pues nada, que parece que todo iba bien, pero al momento de correr la pagina en ie6, el background de la etiqueta a no se muestra alo ancho de todo el background de la "li" sino solo la palabra y un poco mas.

ya intente arreglarlo con un poco de javascritp en la web encontre esta solucion
en este sitio,
http://www.zoneartcss.com/webdesign/css/fix-css-loqueseahover-para-ie-6

puse en marcha la segunda opcion, y funcionó, en parte, porque ahora si se mostraba bien pero resulta, que al quitar el mouse de el ultimo item de la primera lista del submenu, (puesto que de ahi surge la siguiente sublista) el background le quedaba fijo y aunque desplazara el mouse a cualquier lado no se quitaba y si daba click en cualquier item del submenu, este también quedaba igual hasta que refrescaba la pagina.

De antemano muchas gracias a quienes puedan ayudarme.
Cualquier solucion sera bienvenida.


Bueno espero explicarme bien, pero una imagen vale mas que mil palabras, esperando asi explicarme mejor todavia:

Aqui esta la url de la imagen:

[url]http://www.uppush.com/uploads/978imagenmenus.png[/url]


o aquí está la imagen,




Este es el codigo css
Código HTML:
#main .sf-menu  li li {
 line-height:1.0;} 





#main li a,
#main li a span{
 text-decoration:none;
 font-size:15px;
 float: left;
 padding-left:20px;
 
 background-position: 0 0;
}
#main li a span{
padding-left:1px;
padding-right:20px;
background-position:right top;
cursor:pointer;
}
.sf-menu  li.current a,
.sf-menu  li.current a span{
background-image:url(images/botonnav4.png);
 }
.sf-menu li a:hover,
.sf-menu li a:hover span{
background-image:url(images/botonnav4.png);
}
.sf-menu li li a:hover{
background-image:none;}
#main{
margin-left:200px;
 float:left;
 display:inline;
 line-height:78px;
 text-transform:uppercase;  }
 
/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
	margin:			0;
	padding:		0;
	list-style:		none;
}
#main ul.main2 {
line-height:1.0;}
.sf-menu ul {
	position:		absolute;
	top:			-999em;
	width:			10em; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {
	width:			100%;
}
.sf-menu li:hover {
	visibility:		inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
	float:			left;
	position:		relative;
}

.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
	left:			0;
	top:			4.9em; /* match top ul list item height */
	z-index:		99;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
	top:			-999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
	left:			10em; /* match ul width */
	top:			0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
	top:			-999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
	left:			10em; /* match ul width */
	top:			0;
}

/*** DEMO SKIN ***/
.sf-menu {
	float:			left;
	margin-bottom:	1em;
}
.sf-menu  ul a {
	
	padding: 		.75em 1em;
	text-decoration:none;
}

.sf-menu li li{
background:#ccdd55;
}
.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
	color:			#13a;
}
#main li li a {
font-size:14px;
}
.sf-menu li:hover,.sf-menu li.sfHover,.sf-menu a:focus,.sf-menu a:hover,.sf-menu a:active{ outline:0}
.sf-menu li li:hover,.sf-menu li li.sfHover,.sf-menu li li a:focus,.sf-menu li li a:hover,.sf-menu li li a:active{background:#000;}




  #2 (permalink)  
Antiguo 27/03/2010, 15:09
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Problema con a:hover en ie6

Hola tonywhite:
Mira hasta donde se :hover no funciona en ie6.
Buscando en google encontre esta solución (basada en js), no la he probado, si anda me cuentas si?

También podrías incluir la librería jsIE7 que arregla esta cuestión.

Espero lo soluciones, saludos!
  #3 (permalink)  
Antiguo 27/03/2010, 21:49
 
Fecha de Ingreso: marzo-2010
Mensajes: 19
Antigüedad: 7 años, 8 meses
Puntos: 1
Respuesta: Problema con a:hover en ie6

Cita:
Iniciado por cristian_cena Ver Mensaje
Hola tonywhite:
Mira hasta donde se :hover no funciona en ie6.
Buscando en google encontre [URL="http://www.cristalab.com/tips/pseudoclases-de-css-en-ie-c21950l/"]esta solución [/URL](basada en js), no la he probado, si anda me cuentas si?

También podrías incluir la librería [URL="http://blog.unijimpe.net/ie5-ie6-estandar-con-ie7js/"]jsIE7[/URL] que arregla esta cuestión.

Espero lo soluciones, saludos!
Bueno,cristian-cena, muchas gracias, esta arreglado el problema, pero no totalmente, con la segunda opcion con jsIE7, pues al hacer click sobre cualquier menu item de la lista, quda el background permanente hasta recargar la pagina.

La primera opción, es la que ya habia usado, y no me habia resultado tampoco.

En cuanto lo que comentas de a la etiqueta de Hover, sí funciona unicamente con <a> por ejemplo li:hover no lo toma en cuenta pero li a:hover sí,
ahora bien, en mi caso, he puesto un valor "background" solo se aplica sobre el texto y/o los paddings pero, no sobre el ancho del backckground de toda la "li"

---------------------------------------------------------------------- ------------------------------ ----------------------------->>>>>>>


Esto que escribo es editando la respuesta, pues nada, que he dado con la solucion, solo modificando el ancho del hover, a la misma medida que el background de la lista en si, :), ahora solo queda un problemilla , y es que como el bkcground es ancho para el text ue ecribo, al pasar el mouse sobre la palabra se aciva , pero si lo paso fuera del texto no lo hace.

Es decir que tengo que pasar exactamente sobre la palabra.
¿Como hacer para que al pasar por cualquier parte de la lista del submenu se active el hover , sin necesidad de pasar exactamente por la palabra?

ya he probado con display:block y nada.

Última edición por tonywhite; 28/03/2010 a las 09:08
  #4 (permalink)  
Antiguo 29/03/2010, 10:29
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Problema con a:hover en ie6

Cita:
Iniciado por tonywhite Ver Mensaje
Es decir que tengo que pasar exactamente sobre la palabra.
¿Como hacer para que al pasar por cualquier parte de la lista del submenu se active el hover , sin necesidad de pasar exactamente por la palabra?

ya he probado con display:block y nada.
Hola tonywhite:

En css todo va dentro de cajas, tu seguramente estas dando el hover al enlace, por lo que el :hover se está aplicando a la caja-css de la etiqueta <a>
ej: ul li a:hover {...}

Bien, simplemente asigna el hover para el item de la lista o para la lista entera segun tu necesidad.
ej:
ul:hover {...}
o bien
ul li:hover{...}


Saludos y gracias por postear la respuesta! un abrazo.
  #5 (permalink)  
Antiguo 29/03/2010, 10:41
 
Fecha de Ingreso: agosto-2008
Mensajes: 469
Antigüedad: 9 años, 3 meses
Puntos: 20
Respuesta: Problema con a:hover en ie6

Buenas,

otra opción para conseguir lo que deseas tonywhite, es añadirle al enlace display block y un padding. Debes tener en cuenta que ul:hover no funciona en todos los navegadores.

Saludos¡¡
__________________
Revisa las FAQ's antes de disparar.
  #6 (permalink)  
Antiguo 29/03/2010, 11:06
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Problema con a:hover en ie6

Respecto de la buena sugerencia de impostor, agregar que:

En css existen cajas de linea y cajas de bloque, <a> crea una caja de linea, por lo tanto con display:block; lo que haces es transformar esa caja de lína en una caja de bloque.

Si supongamos quieres probar al revés este comportamiento: puedes crearte un div y darle display:inline; y verás como este div que por defecto es de bloque pasa a ser una caja de línea.

Saludos
  #7 (permalink)  
Antiguo 31/03/2010, 20:16
 
Fecha de Ingreso: marzo-2010
Mensajes: 19
Antigüedad: 7 años, 8 meses
Puntos: 1
Respuesta: Problema con a:hover en ie6

Gracias, por las respuestas, pues el ultimo problema, pues lo he resueñlto de una manera poco ortodoxa, agregué un width, que fuera igual al width de la lista, y ya quedo. Y no habia leido las respuestas, pero muchas gracias porque anotare las respuestas para tenerlas a la mano en caso cuando las necesite.

Saludos.

Etiquetas: Ninguno
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 15:16.