Outbook
HTML+CSS+JS, Accesibilidad, PHP y más
Inicio
Desarrollo web
CSS
Enlaces como bloque en Internet Explorer 6
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.
Artículos relacionados:
Datos del artículo:
- Publicado el Miércoles 3 de octubre de 2007 a las 20:52
- Archivado en CSS, Desarrollo web, XHTML
- Etiquetas: HTML, Internet Explorer, Navegadores web
- Seguimiento de comentarios (RSS 2.0).
Comentarios del artículo
Puedes comentar o hacer trackback desde tu propio sitio web.
Si el comentario no guarda relación con el tema del artículo o los comentarios previos, si la redacción del mismo es ilegible (estilo HOYGAN), o si contiene insultos u otros términos ofensivos, será borrado de inmediato. No se garantiza ningún soporte a los ejemplos de desarrollo web presentados en este sitio.
Todavía no hay comentarios.










