Cookies en Outbook

Esta web utiliza cookies propias para ofrecer una mejor experiencia. Al navegar, aceptas dichas cookies.
  • Más información acerca de las cookies

Outbook

UI-Dev & more

Enlaces como bloque en Internet Explorer 6

El problema

Tengo unos enlaces dentro de elementos de lista, para un menú de navegación.

Esos enlaces se convierten en bloque mediante CSS, con la propiedad display:block; .

En Firefox, Opera e Internet Explorer 7 el enlace funciona correctamente, aunque no se pase el puntero por encima del texto de enlace.

En Internet Explorer 6 hay que pasar el puntero por encima del texto de enlace, en caso contrario el enlace no se activa.

ul {list-style-type: none; margin:0; padding:0; width:160px;}
ul li {background:#FFFF99; margin-bottom:3px; border-bottom:1px solid #fff;}
ul li a {display:block; padding:4px;}
ul li a:hover {background-color:#FFCC66;}

La solución

Darle una anchura fija al enlace:

ul {list-style-type: none; margin:0; padding:0; width:160px;}
ul li {background:#FFFF99; margin-bottom:3px; border-bottom:1px solid #fff;}
ul li a {display:block; padding:4px;width:160px;width:152px;}
ul li a:hover {background-color:#FFCC66;}

Ejemplo de funcionamiento

Atención: el efecto solo se observará en Internet Explorer 6 y anteriores.

Enlace sin anchura definida

Enlace con anchura definida

Publicado

Categorías: