Contacta (+34) 622 045 404

Estudio de desarrollo front-end, maquetación web, diseño y programación WordPress freelance.

Fundado por Alberto Fortes, diseñador y maquetador web HTML5 responsive design, front-end developer JavaScript y programador WordPress freelance a medida desde 2006.

Especializados en outsourcing con importantes clientes finales.

[bug explorer 6] margenes excesivos entre li en un menu vertical en CSS

16 Febrero, 2007

Seguramente ya habreis llegado a esta solución, se trata de que cuando creamos un menú horizontal en CSS, y pasais block a li a en ie6 os habrán salido unos márgenes excesivos entre los li, esto se soluciona dando un height:1px; a cada li.
El problema viene de la propiedad hasLayout de explorer. El elemento li no tiene layout por lo que hay que dársela. La forma más rápida de darle layout es darle altura y height:1% s econvierte en el candidato ideal como hack por ser completamente inocuo. También da layout y evita este problema el darle float o width o display block…

Por ejemplo, si tenemos este menú hozizontal:

En html:

En CSS:

ul#vertical {
list-style:none;
padding: 0;
margin:0 0 1em 0;
font-size: .9em;
}
ul#vertical li{
margin: 0 0 1px 0;
color:#666;
font-weight:bold;
}
ul#vertical li a {
margin:1px 0;
padding: 3px 0 3px 1em;
background: #f2f0ec;
display:block;
color:#666;
text-decoration:none;
}
*html ul#vertical li a {
height: 17px; /*para ie 6*/
}
ul#vertical li a:hover{
background: #fff;
}

Esto quedaría así:

Gracias al hack para internet explorer 6 (height:1px; al ul li a) solucionamos la vista y conseguimos que se vea igual en ie6 que en el resto de navegadores