IExplorer7 no hace caso a ciertos enlaces hover

sk8 · #1 (**permalink**) 16/07/2008, 12:19

Hola.

Tengo un problema un poco raro. Tengo los enlaces definidos en la hoja de estilos para que cuando el usuaio pase por encima el raton salga en la parte inferior la linea punteada. Pues bien:

Con Firefox todos los enlaces responden perfectamente al pasar el raton por encima pero en IE7 algunos de ellos solo aparece la mano caracteristica pero no el efecto de subrallado deseado.
La verdad es que llevo 3 dias y no encuentro la solución. El unico patron que encuentro que relacione a los enlaces revoltosos en IE7 es que aparece la mano en aquellos enlaces en los que he definido una capa exclusivamente para ese enlace. Es decir que el contenido de la capa es ese exclusivamente.
Si aparte de ese pongo 3 o 4 mas en la capa si se subrayan pero si pongo uno solo no

Lo mismo me pasa si defino una capa y en ella pongo 10 enlaces un debajo del otro. Todos responden bien al pasar el raton menos el que esta colocado en ultimo lugar.

Si se os ocurre algo por disparatado que sea estare muy agradecido.

Un saludo

JavierB · #2 (**permalink**) 16/07/2008, 12:26

Hola

Asegúrate de que has definido los estilos en el orden correcto: link, visited, hover y active

Si sigue fallando, pon el código que estás usando a ver si encontramos el fallo.

Saludos,

Mikmoro · #3 (**permalink**) 16/07/2008, 15:44

Creo que esto va a ser un asunto de padding, margin u overflow, por el que el subrayado del enlace en realidad queda fuera de la caja. En principio me inclino por overflow: hidden, pero en IE los padding y margin dan muchos quebraderos de cabeza. Como dice JavierB, muestra "el cuerpo del delito"

Mikel.

sk8 · #4 (**permalink**) 17/07/2008, 04:56

Gracias de antemano por el interes en ayudarme. Estoy muy agradecido.

Bueno os aviso que soy muy novato y mi codego probablemte sea una mierdeciglia, asi que espero que los mas expertos en la materia no se den de cabezazos por semejante código. Bueno agradeceria tb que me dijerais si estoy utilizando algunas etiquetas o atributos de forma equivocada a parte de ayudarme con el problema en cuestión.

He decidido extraer partes de código y hacer pruevas para tratar de ver lo que ocurre. NO se porque tal como esta si van las partes del menu superior, pero si quito el encabezado h1 ya no se subraya al pasar por enciama y tam poco entiendo porque el contenido de Novedades funciona el subrayado de todos los enlaces a excepción de los de abajo.

CSS:

Código:

/* CSS Document */

A:link{color:#999999; text-decoration:none;}
A:visited{color:#66cc00; text-decoration:none;}
A:hover{color:#66cc00;text-decoration:none;padding-bottom: 2px;border-bottom: dotted 2px #66cc00;}

#Menu
	{
	position:absolute;left: 207px;top: 100px;width: 693px;height: 17px;z-index:2;
	}
	
#CategoriasFondo
{
	position: absolute;left: 440px;top: 190px;width: 220px;height: 333px;z-index: 1;background-image:url(categoriafondo.gif);visibility: visible;
}

#Novedades
{
	position: absolute;left: 10px;top: 5px;width: 200px;height: 323px;z-index: 2;visibility: visible;
}

	
.LinkStyle
	{
	font-family: Verdana, Helvetica, sans-serif;font-size: 8pt;color: #999999;font-weight: normal;
	}

.LinkContenido
	{
	font-family: Verdana, Helvetica, sans-serif;font-size: 9pt;color: #999999;font-weight: normal;
	}

Codigo HTML:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<link rel="STYLESHEET" type="text/css" href="prueba2.css" />

</head>

<body>

<div id="Menu"><h1 class="LinkStyle">Inicio | <a href="pruebalinks.html">Rap</a> | <a href="pruebalinks.html">Hip-Hop</a> | <a href="pruebalinks.html">Rock</a> | <a href="prueba.html">Punk</a> | <a href="Pop.html">Pop</a> | <a href="pruebalinks.html">House</a> | <a href="pruebalinks.html">Funk</a> | <a href="pruebalinks.html">Techno</a> | <a href="pruebalinks.html">Soul</a> | Sugerencias </h1>
</div>


<div id="CategoriasFondo">
  <div id="Novedades" class="LinkContenido">
<p>16-Marzo-2008
        
         <a href="prueba.html">n1</a>        
         <a href="nolink.html">n2.</a>
      <a href="prueba.html">n3</a>	  </p>	  
	  <p>16-Marzo-2008
        
         <a href="prueba.html">n1</a>        
         <a href="nolink.html">n2.</a>
      <a href="prueba.html">n3</a>	  </p>
	  
	  <p>15-Enero-2008
        
        <a href="prueba.html">n1</a>        
         <a href="nolink.html">n2.</a>
      <a href="nolink.html">n3</a>.	  </p>
	
	</div>
</div>

</body>
</html>

Gracias de nuevo por vuestra atención y disculpas de nuevo por semejante patata. Un saludo

Mikmoro · #5 (**permalink**) 17/07/2008, 05:13

Pues ahora ya no estoy muy seguro de tu problema. Yo veo todos subrayados al pasar el ratón, claro, excepto "inicio" y "sugerencias", porque no tienen vínculo

Los de abajo, n1, n2 y n3 los veo subrayados.

Con respecto a tu código, sin profundizar, a un simple vistazo te recomiendo que te acostumbres a usar minúsculas en clases e ID's, porque así evitarás posibles errores al escribir los selectores de la css y demás.

Mikel.

sk8 · #6 (**permalink**) 17/07/2008, 05:29

Jue pues ahora si que estoy perdido. Usas IE7? Y se te ven subrayados los n1, n2 y n3 de abajo e... juer que perdio esoty.

Si tienes un momento prueba quitando el h1. Si quito es h1 no se ve el subrayado.
Y los n1,n2,n3 de abajo no los veo subrayados

Nuse...

Muchas gracias por tu interes. Por cierto tienes razon en el tema de las mayusculas. A menudo me ocasiona confusiones, te hare caso.

Si a alguien se le ocurre algo....

Un saludo.

Mikmoro · #7 (**permalink**) 17/07/2008, 08:25

Ah, lo siento, no te entendí lo del navegador y lo miré en FF y IE6. Ahora veo que falla en IE7. Luego le echo un vistazo y te comento si no responde alguien antes.

Mikel.

sk8 · #8 (**permalink**) 17/07/2008, 10:05

ok. Muchas gracias por ser tan amable, sigo dandole vueltas pero no caigo que puede ser.

un saludo.

Mikmoro · #9 (**permalink**) 17/07/2008, 10:28

Todavía no lo he mirado, pero no sé por qué no te lo he dicho antes: no deberías tener eso dentro de un H1. El H1 es para el título principal. Cámbialo por un div sin más a ver qué ocurre. Si no va hablamos.

Mikel.

Mikmoro · #10 (**permalink**) 18/07/2008, 01:31

Viendo ahora tu código con IE7 tienes 2 opciones:

- o quitas en padding-bottom: 2px; del a:hover
- o añades un selector "p" y le pones padding-bottom: 3px;

p {padding-bottom: 3px;}

Mikel.

sk8 · #11 (**permalink**) 21/07/2008, 08:34

Lo he intentado tal como dices y continuo igual. Lo estraño es que se vea bien cuando le aplico una etiqueta ya definida como <h1> o <p>, si se las quito ya no funciona el subrayado. tal vez sea porque estas etiquetas traen ciertos valores definidos. Por ejemplo en ie7 me mete un margin-top que me descuadra en comparación con firefox al usar los h1 que soluciono poniendo a la etiqueta h1 un nuevo valor marging-top:0px;

Tal vez tenga que modificar alguna etiqueta y me gustaria saber donde puedo encontrar los valor predefinidos de h1, h2, p, etc...

Un saludo y muchas gracias por ayudarme.

Mikmoro · #12 (**permalink**) 21/07/2008, 09:11

Bueno, el padding de 3 px era muyyyyy justito.

Mira este ejemplo: es tu código con el elemento "p" y un padding-bottom de 4 px.

Mikel.

sk8 · #13 (**permalink**) 21/07/2008, 14:49

Bien bien!!!

Muchas gracias. Así todo perfecto, muchas gracias por tu ayuda. No sabes cuanto te lo agradezco. Habia provado tb con 4 y 5 px de padding, el problema era que no lo aplicaba correctamente. Al ver el codigo que has puesto me he dado cuenta que no lo estaba aplicando al elemento p si no a la etiqueta que contenia a dicho elemento.

Te estoy muy agradecido.

un saludo

Mikmoro · #14 (**permalink**) 21/07/2008, 15:14

De nada, es un placer.

Mikel.