Re: [Ovillo] Problema display:block ?

Mon, 31 Jan 2005 20:30:46 -0800 

Tienes una solución a este problema de IE.

Añade un width: 100%; a la regla del "anchor"

#opciones li a
{
        display: block;
        
        width: 100%;

        color: #000000;
}


este width SOLO tiene que verlo el Iexplorer ya que los otros se pueden indigestar. Puedes usar el hack del underscore:


#opciones li a
{
        display: block;
        
        _width: 100%;

        color: #000000;
}





Iban Rodriguez wrote:

Hola,

Estoy trasteando mientras (por fin) hago mi primera página CSS (hasta el
momento solo "sabía" la teoría... ahora es cuando me toca sacudirme con cada
tontería que quiero hacer).

He hecho un menú lateral utilizando una lista, y resulta que tengo varios
lios. Uno es una simple duda (la comentaré al final) y lo otro es un
problema que quiero solucionar.


1- El menú debe tener rollover de forma que se rellene la "celda" entera al
pasar el ratón
2- Los links deberían colorearse de igual forma al pasar el ratón por la
celda o por el propio link. Es decir, idealmente, la celda entera debería
ser el link.

Googleando aquí y allá y mirando algunos ejemplos, he conseguido que esto
funcione... en FireFox.

Ahora resulta que en IE los "li" se me separan entre ellos unos 3 pixeles.
He descubierto que poniendo margin negativo a li la cosa va bien, pero
obviamente el margen también afecta a FireFox, de forma negativa (en ambos
sentidos).


Ahora bien, los detalles:



HTML:
________________________
<ul id="opciones">
        <li><a href="/?">Opcion 1</a></li>
        <li><a href="/?">Opcion 2</a></li>
        <li><a href="/?">Opcion N</a></li>
</ul>
________________________


CSS
____________________________
#opciones
{
        margin: 0;
        padding: 0px;
        width: 140px;
        list-style: none;
        margin-right: 5px;
        padding-top: 15px;
}

#opciones li
{
        width: 140px;
        line-height: 32px;
        margin-left: 0;
        font-size: 80%;
        font-variant: small-caps;
        display: block;
        background: #CCCCCC;
        padding-left: 5px;
        border: 1px solid #FFFFFF;
        border-left: 2px;
        border-right: 2px;
}

#opciones li:hover
{
        background: #9E8C7B;
}

#opciones li a
{
        color: #000000;
}

#opciones li a:hover
{
        color: #FFFFFF;
}
_____________________


Estando así, funciona perfectamente en IE pero el enlace sólo se ilumina al
pasar el ratón por el texto. Es decir se ilumina el fondo de la lista y el
enlace sigue negro, a no ser que pase el ratón justo por el enlace.


Si a

#opciones li a

Le añado un display:block, en firefox consigo el efecto que quiero (toda la
fila es el enlace y se ilumina todo igual al pasar el ratón por cualquier
zona de cada "li"), pero en explorer, además de NO ser enlace la fila
entera, me separa los LI entre ellos.

Sólo por el display:block.... ... Alguna solución? O me olvido simplemente
de eso?

Este es el problema... ahora la pequeña duda.

Algunos de estos enlaces llegan a ocupar 2 lineas. Con "line-height" he
visto que cada línea me ocupa 32px, y claro yo quiero que la CELDA ocupe
32px.

He probado a poner sólo "height: 32px", pero lo que ocurre es que el texto
se me pone arriba en lugar de quedarse centrado verticalmente...
Básicamente, me interesa que los enlaces estén centrados verticalmente,
ocupen 1 ó 2 líneas... en sus 32px de "li".

Gracias de antemano,
Un saludo.



--
arnau siches
css.artnau.com

_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://ovillo.org/mailman/listinfo/ovillo_ovillo.org

Responder a