Problemas display Block en Mozilla I Barra navegación roll over

Patri · #1 (**permalink**) 04/03/2008, 15:22

Hola :)!

Antes que nada agradecerles por cualquier tipo de ayuda y el tiempo que puedan dedicar a contestar esta duda !

El problema es la siguiente:

Este sitio: http://cablemodem.fibertel.com.ar/pa...nes_somos.html

está diseñado con CSS y validado tanto el CSS como el XHTML 1.0 Transitional, ambos están correctos.

El problemas es que la barra de navegación (los cuadrados) se ve bien en IE7 y mal en Mozilla. La barra está arnada con un div para cada opción y un link en su interior que esta forzado con display:block; para que cuando pase el ratón por encima del mismo el div contenedor tome el color en su totalidad:

A.nav, A.nav:VISITED, A.nav:ACTIVE, A.nav:LINK{
color:#374e7a;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
text-decoration: none;
display:block;
Width:100%;
}

A.nav:HOVER{
text-decoration: none;
color:#FFFFFF;
background:#9cabd2;
}

El tema es que en Mozilla, la región del link no aparece desde el comienzo del div sino que queda un margen en la parte superior, haciendo que al pasar sobre él el ratón el color no llena completo la barra. Lo que veso es que la región sensible del link está como corrida hacia abajo.

¿Alguien tiene alguna idea de como arreglar esto para que funcione en Mozilla? ¿Porqué aparece este margen?

Mil gracias por su tiempo!

webosiris · #2 (**permalink**) 04/03/2008, 16:10

intenta usar más la semantica...un menu es una lista de enlaces, así que la podrías hacer con

Código HTML:

<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Quienes somos</a></li>
<li><a href="#">Productos</a></li>
<li><a href="#">Servicios</a></li>
</ul>

despues flotas los li y le das display:block a los li a

de todas formas, tu problema actual es que FireFox te esta aplicando un margin por defecto al P que tenes dentro de esos divs. Cuando inicias un archivo CSS conviene prefijar a 0 los valores de márgenes y paddings que vienen por defecto. Para eso puedes usar el selector universal así (va al inicio de tu archivo CSS):

Código:

*{margin:0;padding:0}

Patri · #3 (**permalink**) 05/03/2008, 02:13

Mil gracias por contestar mi pregunta ! Voy a intentar por ese lado a ver que pasa !

Patri · #4 (**permalink**) 05/03/2008, 02:22

Lo probé y funcionó a la perfección, te agradezco mucho... !!! Hacía un día que no podía sacarlo y no le encontraba la vuelta. Es mi primera web hecha con CSS y me falta aprender mucho más!

Patri