Foros del Web » Creando para Internet » CSS »

Iluminar al pasar el raton por encima, ¿fallo en IE?

Estas en el tema de Iluminar al pasar el raton por encima, ¿fallo en IE? en el foro de CSS en Foros del Web. Buenas Estoy con un menú y tengo un ligero problemilla. Cuando paso el ratón por encima de un LI, se ilumina toda su "celda", pero ...
  #1 (permalink)  
Antiguo 23/11/2008, 15:16
Avatar de IMAC/  
Fecha de Ingreso: octubre-2005
Mensajes: 738
Antigüedad: 12 años, 1 mes
Puntos: 14
Iluminar al pasar el raton por encima, ¿fallo en IE?

Buenas

Estoy con un menú y tengo un ligero problemilla.
Cuando paso el ratón por encima de un LI, se ilumina toda su "celda", pero cuando estoy en el Internet Explorer la "celda" es más estrecha se ilumina algo menos que la "celda" o fila del menu.
¿por qué pasa eso?

Este es mi código:

Código HTML:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<style>
#menuv {
	background: #000000;

	width: 198px;
	font-style: bold; 
	font: 80% Arial, Helvetica, sans-serif;

}
#menuv ul, li {
	list-style-type: none;

}

#menuv ul {
	margin: 0;
	padding: 0;
}


#menuv a {
	font-style: bold; 
	text-decoration: none;
	color: #ffffff;
	display: block;
	padding: 3px 6px;
	width: 186px;
}

#menuv a:hover {
	background: #ff5e00;
}
</style>

<body bgcolor="#FFFFFF" text="#000000">
<div id="menuv">
	<ul>
		<li><a href="#menuv">Inicio</a></li>
		<li><a href="#menuv">Comentarios</a></li>
		<li><a href="#menuv">Noticias</a></li>
		<li><a href="#menuv">Contacto</a></li>
		<li><a href="#menuv">Acerca de nosotros</a></li>
				<li><a href="#menuv">Inicio</a></li>
		<li><a href="#menuv">Comentarios</a></li>
		<li><a href="#menuv">Noticias</a></li>
		<li><a href="#menuv">Contacto</a></li>
		<li><a href="#menuv">Acerca de nosotros</a></li>
				<li><a href="#menuv">Inicio</a></li>
	</ul>
</div>
</body>
</html> 
  #2 (permalink)  
Antiguo 23/11/2008, 16:50
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: Iluminar al pasar el raton por encima, ¿fallo en IE?

Mira lo que te pongo en negrita...

Código HTML:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<style>
#menuv {
	background: #000000;
[B]
	width: 198px;[/B]
	font-style: bold; 
	font: 80% Arial, Helvetica, sans-serif;

}
#menuv ul, li {
	list-style-type: none;

}

#menuv ul {
	margin: 0;
	padding: 0;
}


#menuv a {
	font-style: bold; 
	text-decoration: none;
	color: #ffffff;
	display: block;
	padding: 3px 6px;
	[B]width: 186px;[/B]
}

#menuv a:hover {
	background: #ff5e00;
}
</style>

<body bgcolor="#FFFFFF" text="#000000">
<div id="menuv">
	<ul>
		<li><a href="#menuv">Inicio</a></li>
		<li><a href="#menuv">Comentarios</a></li>
		<li><a href="#menuv">Noticias</a></li>
		<li><a href="#menuv">Contacto</a></li>
		<li><a href="#menuv">Acerca de nosotros</a></li>
				<li><a href="#menuv">Inicio</a></li>
		<li><a href="#menuv">Comentarios</a></li>
		<li><a href="#menuv">Noticias</a></li>
		<li><a href="#menuv">Contacto</a></li>
		<li><a href="#menuv">Acerca de nosotros</a></li>
				<li><a href="#menuv">Inicio</a></li>
	</ul>
</div>
</body>
</html> 
Qué quiere decir...?
Que la lista tiene un ancho de 198px y cuando pasas el ratón por encima de 186px... pon los dos a 198px...

Aresillo!!
  #3 (permalink)  
Antiguo 23/11/2008, 18:31
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: Iluminar al pasar el raton por encima, ¿fallo en IE?

En ese caso se estropea para FF (por cosa de no usar doctype)

Pruébalo así:

Cita:
#menuv {
background: #000000;
width: 198px;
font-style: bold;
font: 80% Arial, Helvetica, sans-serif;
}
#menuv ul, li {
list-style-type: none;
padding-left: 6px;
}
#menuv ul {
margin: 0;
padding: 0;
}
#menuv a {
font-style: bold;
text-decoration: none;
color: #ffffff;
display: block;
padding: 3px 0 3px 6px;
margin-left: -6px;
width: 100%;
}
#menuv a:hover {
background: #ff5e00;
}
__________________
Visita mi nueva web idplus.org
  #4 (permalink)  
Antiguo 24/11/2008, 06:04
Avatar de IMAC/  
Fecha de Ingreso: octubre-2005
Mensajes: 738
Antigüedad: 12 años, 1 mes
Puntos: 14
Respuesta: Iluminar al pasar el raton por encima, ¿fallo en IE?

Perdón, fue un error tonto.

Probé con varias cosas, pero me fallaba que no dejé un espacio entre las dimensiones y los px, puse 198px en lugar de 198 px.

Ahora me funciona bien, gracias igualmente a todos :)
  #5 (permalink)  
Antiguo 24/11/2008, 06:12
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: Iluminar al pasar el raton por encima, ¿fallo en IE?

No, el fallo lo tienes ahora, porque no debes dejar ese espacio; debe ser 198px, sin espacio, si no, lo único que hace es que no te coge los 198px, vamos, como si no lo pusieras.
__________________
Visita mi nueva web idplus.org
  #6 (permalink)  
Antiguo 24/11/2008, 07:33
Avatar de IMAC/  
Fecha de Ingreso: octubre-2005
Mensajes: 738
Antigüedad: 12 años, 1 mes
Puntos: 14
De acuerdo Respuesta: Iluminar al pasar el raton por encima, ¿fallo en IE?

Cita:
Iniciado por Mikmoro Ver Mensaje
No, el fallo lo tienes ahora, porque no debes dejar ese espacio; debe ser 198px, sin espacio, si no, lo único que hace es que no te coge los 198px, vamos, como si no lo pusieras.
Lo mismo de debe de ser, porque si elimino la linea del width en el Internet Explorer se agranda todo y se ve mal.
Si pongo el espacio me funciona sin problemas en los 2. No quiero decir que esté bien, no se por qué será pero tira bien con el width: 198 px (con espacio)
  #7 (permalink)  
Antiguo 24/11/2008, 07:55
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: Iluminar al pasar el raton por encima, ¿fallo en IE?

Pon el código que estás usando, porque puede ser que eso anule la siguiente propiedad o el selector completo.
__________________
Visita mi nueva web idplus.org
  #8 (permalink)  
Antiguo 24/11/2008, 10:38
Avatar de IMAC/  
Fecha de Ingreso: octubre-2005
Mensajes: 738
Antigüedad: 12 años, 1 mes
Puntos: 14
De acuerdo Respuesta: Iluminar al pasar el raton por encima, ¿fallo en IE?

Aquí esta:

Código HTML:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<style>
#menuv {
	background: #000000;

	width: 198px;
	font-style: bold; 
	font: 80% Arial, Helvetica, sans-serif;

}
#menuv ul, li {
	list-style-type: none;

}

#menuv ul {
	margin: 0;
	padding: 0;
}


#menuv a {
	font-style: bold; 
	text-decoration: none;
	color: #ffffff;
	display: block;
	padding: 3px 6px;
	width: 198 px;
}

#menuv a:hover {
	background: #ff5e00;
}
</style>

<body bgcolor="#FFFFFF" text="#000000">
<div id="menuv">
	<ul>
		<li><a href="#menuv">Inicio</a></li>
		<li><a href="#menuv">Comentarios</a></li>
		<li><a href="#menuv">Noticias</a></li>
		<li><a href="#menuv">Contacto</a></li>
		<li><a href="#menuv">Acerca de nosotros</a></li>
				<li><a href="#menuv">Inicio</a></li>
		<li><a href="#menuv">Comentarios</a></li>
		<li><a href="#menuv">Noticias</a></li>
		<li><a href="#menuv">Contacto</a></li>
		<li><a href="#menuv">Acerca de nosotros</a></li>
				<li><a href="#menuv">Inicio</a></li>
	</ul>
</div>
</body>
</html> 
  #9 (permalink)  
Antiguo 24/11/2008, 10:58
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: Iluminar al pasar el raton por encima, ¿fallo en IE?

Bueno, como te decía esto está a decisión de cada uno, pero ese código css no es válido según la especificación CSS2 de la W3C.

¿Por qué no pruebas el código que te puse ayer, que funciona perfectamente y valida sin problemas?
__________________
Visita mi nueva web idplus.org
  #10 (permalink)  
Antiguo 24/11/2008, 11:28
Avatar de IMAC/  
Fecha de Ingreso: octubre-2005
Mensajes: 738
Antigüedad: 12 años, 1 mes
Puntos: 14
De acuerdo Respuesta: Iluminar al pasar el raton por encima, ¿fallo en IE?

Cita:
Iniciado por Mikmoro Ver Mensaje
Bueno, como te decía esto está a decisión de cada uno, pero ese código css no es válido según la especificación CSS2 de la W3C.

¿Por qué no pruebas el código que te puse ayer, que funciona perfectamente y valida sin problemas?
No lo usaba porque hay cosas que no entiendo en el código, y bueno, me gusta entender lo que uso :)

Me has convencido, y lo usaré, pero me gustaría aclara algunas pues acabo de meterme en el css:
¿podrías explicarme que hace cada una de estas lineas en el menuv a ?

Código HTML:
	display: block;
	padding: 3px 0 3px 15px;
	margin-left: -15px;
¿Y bueno, ya que estamos... por qué ese "a" en el estilo? ¿ qué indica? "#menu a"

Y si no es mucho abusar ... aquí:
Código HTML:
#menuv a:hover {
	background: #ff5e00;
}
Supongo que es el efecto que tiene una capa cuando estás hover, pero... por qué se pone background y no color como tiene especificado en "#menu a"?

Gracias Mikmoro.
  #11 (permalink)  
Antiguo 24/11/2008, 11:45
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: Iluminar al pasar el raton por encima, ¿fallo en IE?

Cita:
Iniciado por IMAC/ Ver Mensaje
¿podrías explicarme que hace cada una de estas lineas en el menuv a ?

display: block;
padding: 3px 0 3px 15px;
margin-left: -15px;
display: block; hace que se comporte como un elemento de bloque en lugar de como lo que es, un elemento de línea, aceptando dimensiones de ancho y alto, que los de línea no aceptan.

Cita:
Iniciado por IMAC/ Ver Mensaje
¿Y bueno, ya que estamos... por qué ese "a" en el estilo? ¿ qué indica? "#menu a"
Esto no lo entiendo y no lo veo en mi código. Si te refieres a "#menuv a", se refiere a los enlaces que estén dentro de un elemento cuyo ID sea "menuv"

Cita:
Iniciado por IMAC/ Ver Mensaje
Y si no es mucho abusar ... aquí:
#menuv a:hover {
background: #ff5e00;
}
Supongo que es el efecto que tiene una capa cuando estás hover, pero... por qué se pone background y no color como tiene especificado en "#menu a"?
Background es la forma de abreviar una propiedad genérica, pudiendo poner en una misma propiedad todas las posibles en este caso como color, url, repeat, etc.

Si solo vas a poner color, se suele usar background-color, pero da lo mismo usar sólo background, en la que podrías poner todos los atributos de una sola vez.
__________________
Visita mi nueva web idplus.org
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 17:44.