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

IMAC/ · #1 (**permalink**) 23/11/2008, 15:16

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>

Aresillo · #2 (**permalink**) 23/11/2008, 16:50

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!!

Mikmoro · #3 (**permalink**) 23/11/2008, 18:31

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;
}

IMAC/ · #4 (**permalink**) 24/11/2008, 06:04

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 :)

Mikmoro · #5 (**permalink**) 24/11/2008, 06:12

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.

IMAC/ · #6 (**permalink**) 24/11/2008, 07:33

Cita:

Iniciado por Mikmoro

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)

Mikmoro · #7 (**permalink**) 24/11/2008, 07:55

Pon el código que estás usando, porque puede ser que eso anule la siguiente propiedad o el selector completo.

IMAC/ · #8 (**permalink**) 24/11/2008, 10:38

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>

Mikmoro · #9 (**permalink**) 24/11/2008, 10:58

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?

IMAC/ · #10 (**permalink**) 24/11/2008, 11:28

Cita:

Iniciado por Mikmoro

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.

Mikmoro · #11 (**permalink**) 24/11/2008, 11:45

Cita:

Iniciado por IMAC/

¿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/

¿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/

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.