Foros del Web » Creando para Internet » CSS »

li:hover no me funciona en IE7

Estas en el tema de li:hover no me funciona en IE7 en el foro de CSS en Foros del Web. Tengo el siguiente código CSS para el menú. #menu { position:absolute; top:125px; left:10px; background-color:silver; width:800px; height:25px; } #menu ul { list-style:none; margin:0px; padding:0px; } #menu ...
  #1 (permalink)  
Antiguo 01/12/2008, 06:19
 
Fecha de Ingreso: diciembre-2008
Mensajes: 5
Antigüedad: 9 años
Puntos: 0
li:hover no me funciona en IE7

Tengo el siguiente código CSS para el menú.

#menu
{
position:absolute;
top:125px;
left:10px;
background-color:silver;
width:800px;
height:25px;
}
#menu ul
{
list-style:none;
margin:0px;
padding:0px;
}
#menu li
{
float:left;
height:100%;
margin:0px 0px 0px 0px;
padding:7px;
background-color:red;
}
#menu li:hover
{
background-color:yellow;
}
#menu a
{
color:blue;
text-decoration:none;
font-family:Century Gothic,Sans-Serif,Verdana,Arial;
font-size:15px;
display:block;
font-weight:bold;
}
#menu a:visited
{
text-decoration:none;
}
#menu a:link
{
}
#menu a:hover
{
background-color:green;
}
#menu a:active
{
}


Lo que quiero probar es que al pasar el puntero por encima de un elemento de la lista se ponga de color amarillo (estoy de pruebas) en Firefox funciona, en IE 7 , no y debería... que hago mal? porque por más que busco menos me entero.
  #2 (permalink)  
Antiguo 01/12/2008, 06:44
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: li:hover no me funciona en IE7

Tienes que especificar el fondo amarillo en

#menu a:hover{
}
o en
#menu li a:hover{
}
Te recomiendo que no utilices colores a través de sus nombres porque cada explorador lo interpreta de una manera...

El código sintetizado y cambiados los colores por unos hesadecimales.....

Código:
#menu{
position:absolute;
top:125px;
left:10px;
background-color:#c7c7bf;
width:800px;
height:25px;
}
#menu ul{
list-style:none;
margin:0px;
padding:0px;
}
#menu li{
float:left;
height:100%;
margin:0px 0px 0px 0px;
padding:7px;
background-color:#ff0;
}
#menu a{
color:blue;
text-decoration:none;
font-family:Century Gothic,Sans-Serif,Verdana,Arial;
font-size:15px;
display:block;
font-weight:bold;
}
#menu li a:hover{
background-color:#ff0;
}
#menu a:visited{
text-decoration:none;
}
Aresillo!!
  #3 (permalink)  
Antiguo 01/12/2008, 07:48
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: li:hover no me funciona en IE7

Cita:
Iniciado por murquis Ver Mensaje
Lo que quiero probar es que al pasar el puntero por encima de un elemento de la lista se ponga de color amarillo (estoy de pruebas) en Firefox funciona, en IE 7 , no y debería... que hago mal? porque por más que busco menos me entero.
Muestra cómo tienes el html y si tienes un doctype, porque ese código css funciona perfectamente en IE7, haciendo amarillo el fondo del li al pasar el ratón.
__________________
Visita mi nueva web idplus.org
  #4 (permalink)  
Antiguo 01/12/2008, 09:16
 
Fecha de Ingreso: septiembre-2008
Ubicación: En algun sitio del CyberSpacio
Mensajes: 150
Antigüedad: 9 años, 3 meses
Puntos: 2
Respuesta: li:hover no me funciona en IE7

yo creo que deberías hacer lo que dice aresillo, cambiar los colores por hexadecimales, en especial esto:

#menu li:hover
{
background-color:yellow;
}

por esto:

#menu li:hover
{
background-color:#FFCC00;
}
__________________
Visita la mejor web: http://infoadictos.net
  #5 (permalink)  
Antiguo 01/12/2008, 09:19
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: li:hover no me funciona en IE7

Un pequeño detalle: yellow es #FF0, o #FFFF00
__________________
Visita mi nueva web idplus.org
  #6 (permalink)  
Antiguo 01/12/2008, 10:24
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: li:hover no me funciona en IE7

Así estaba puesto arribota!

Aresillo!!
  #7 (permalink)  
Antiguo 01/12/2008, 11:21
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: li:hover no me funciona en IE7

Cita:
Iniciado por shurshok Ver Mensaje
background-color:#FFCC00;
Sí, se lo hacía notar a shurshok.
__________________
Visita mi nueva web idplus.org
  #8 (permalink)  
Antiguo 02/12/2008, 04:16
 
Fecha de Ingreso: diciembre-2008
Mensajes: 5
Antigüedad: 9 años
Puntos: 0
Respuesta: li:hover no me funciona en IE7

Hola buenas de nuevo, lo primero gracias por vuestras respuestas. Lo que he probado es lo siguiente:

1º Copie el codigo de aresillo y lo sustituí por el mío (vamos que lo borre), y nada, sigue funcionando solo en Firefox.
2º Volvi a mi codigo y probe a cambiar solo los colores por hexadecimales, nada.
3º Cogí mi codigo ,añadí la parte de #menu li a:hover y quité la parte mia de #menu li:hover y #menu a:hover. Solo me cambia lo que sería el link, cuando paso el puntero por encima del texto y el recuadrito del texto, es lo único que me cambia de color, tanto en IE como en FIREFOX.
4º Lo mismo que en 3º, pero esta vez dejando #menu a:hover y #menu li:hover, en Firefox cambia el fondo, pero en IE no, y en Firefox si cambio los colores de #menu li:hover y #menu li a:hover me los muestra diferentes.

Conclusión a la que llego, #menu li a:hover, solo afecta al texto enlazado. Según como entiendo el comando, le estais diciendo al navegador que al pasar el puntero por el texto enlazado cambie el fondo de los 2 no?

Así que me surge otra pregunta, se puede ampliar el texto enlazado a todo el cuadro li, o voy a tener que hacer imagenes con el texto? (esto último no me mola nada jejeje)
Códigos

HTML
Código:
<html>
<title>
Pagina de pruebas
</title>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- cargo los estilos -->
<link rel="stylesheet" href="formato.css" type="text/css" media="all">
<!-- Cargo el icono de la web -->
<link rel="shortcut icon" href="imagenes/favicon.ico">
<!--
-->
</head>
<body>
		

			<div id="logo">
					 hola logo
			</div>
			
			<div id="menu">
					<ul>
						<li><a href="#">Menu 1</a></li>
						<li><a href="#">Menu 2</a></li>
						<li><a href="#">Menu 3</a></li>
					</ul>
			</div>
			
			<div id="submenu">
					 hola submenu
			</div>
			<div id="cuerpo">
					 hola cuerpo
			</div> 
</body>
</html>
CSS
Código:
*{margin:0px ; padding:0px ; border:0px; outline:0px;} /*Ponemos  todos los margenes, bordes y separaciones a cero, para que todos los 
																				

	   navegadores los vean iguales*/

body        
 {
	background:#2E7AC6 url(imagenes/background.png) repeat-x top left;
 }
#logo
 {
	position:absolute;
	top:0px;
	left:75px;
	background-image:url("imagenes/logo.png");
	background-repeat:no-repeat;
	width:900px;
	height:100px;
 }

/*Caracterisiticas del Menu*/
#menu
 {
 	position:absolute;
	top:125px;
	left:10px;
	background-color:#c7c7bf;
	width:800px;
	height:25px;
 }
#menu ul
{
 	list-style:none;
	margin:0px;
	padding:0px;
}
#menu li
{
	float:left;
	height:100%;
	margin:0px 0px 0px 0px;
	padding:7px;
	background-color:#aa5;
}
#menu li:hover
{
	background-color:#0F0
}

#menu a
{
	color:#000;
	text-decoration:none;
	font-family:Century Gothic,Sans-Serif,Verdana,Arial;
	font-size:15px;
	display:block;
	font-weight:bold;
}
#menu a:visited
{
	text-decoration:none;
}
#menu a:link
{
}
#menu a:hover
{
	background-color:#F00;
}
#menu a:active
{
}
/*Fin caracteristicas del Menu*/

#submenu
 {
	position:absolute;
	top:150px;
	left:10px;
	background-color:blue;
	width:800px;
	height:30px;
 }
#cuerpo
 {
	position:absolute;
	top:180px;
	left:10px;
	background-color:pink;
	width:800px;
	min-height:600px;
}
Sorry por el tocho

Última edición por murquis; 02/12/2008 a las 04:21 Razón: Poner el código html y css
  #9 (permalink)  
Antiguo 02/12/2008, 04:40
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: li:hover no me funciona en IE7

Quita el padding: 7px de #menu li y pónselo a #menu a
__________________
Visita mi nueva web idplus.org
  #10 (permalink)  
Antiguo 02/12/2008, 06:01
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: li:hover no me funciona en IE7

Ponle un dtdencima del <html>:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Aresillo!!
  #11 (permalink)  
Antiguo 03/12/2008, 03:11
 
Fecha de Ingreso: diciembre-2008
Mensajes: 5
Antigüedad: 9 años
Puntos: 0
De acuerdo Respuesta: li:hover no me funciona en IE7

Vale funciona lo del padding
Ahora si me lo podeis explicar mejor , creo que lo se congiuió con ese padding es ampliar el "tamaño" del enlace y es lo que cambiaría de color no?, así queda mejor, porque hace que todo el LI quede como enlance y no tienes porque ir al texto a hacer click.

Y Aresillo, lo que debería de escribir es esto:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

justo después del <html> no? o va en otro sitio? y para que sirve?

Gracias de nuevo a todos por contestar
  #12 (permalink)  
Antiguo 03/12/2008, 04:01
 
Fecha de Ingreso: septiembre-2008
Ubicación: En algun sitio del CyberSpacio
Mensajes: 150
Antigüedad: 9 años, 3 meses
Puntos: 2
Respuesta: li:hover no me funciona en IE7

Cita:
Iniciado por Mikmoro Ver Mensaje
Sí, se lo hacía notar a shurshok.
Jajaja, me confundí con el oro jajaja.
__________________
Visita la mejor web: http://infoadictos.net
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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 19:54.