margin-top: 0px; /* solo acepta a navegadores que usen est�ndares */
_margin-top: -3px; /* solo afecta a IE */
En el tema de la alineacion vertical, no tengo ni idea de como ayudarte :\ de todas formas puedes usar un "max-height" (http://www.w3schools.com/css/pr_dim_max-height.asp) por probar que no quede
Saludos!
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.
_______________________________________________ Lista de distribuci�n Ovillo Para escribir a la lista, envia un correo a [email protected] Puedes modificar tus datos o desuscribirte en la siguiente direcci�n: http://ovillo.org/mailman/listinfo/ovillo_ovillo.org
-- manu contreras <[EMAIL PROTECTED]> blog: echo.proletarium.org skype: manucontreras
_______________________________________________ Lista de distribuci�n Ovillo Para escribir a la lista, envia un correo a [email protected] Puedes modificar tus datos o desuscribirte en la siguiente direcci�n: http://ovillo.org/mailman/listinfo/ovillo_ovillo.org
