El elemento gana 100% de ancho con una altura en IE6

Question

Estoy tratando de hacer una lista horizontal de enlaces con < ul > en donde todos < a > Esta pantalla: bloque y tiene una altura. En IE6, sigue obteniendo un ancho del 100% después de establecer una altura para & Lt; a & Gt ;, convirtiéndolo en una lista vertical.

HTML:

<ul id="header">
    <li><a href="#"><span>ST.KILDA ROAD MEDICAL CENTRE</span></a></li>
    <li><a href="#"><span>Public Health Management</span></a></li>
    <li><a href="#"><span>ST.KILDA ROAD PSYCHOLOGY SERVICES</span></a></li>
    <li><a href="#"><span>OCCUPATIONAL ASSISTANCE SERVICE</span></a></li>
    <li><a href="#"><span>ST.KILDA ROAD Sports &amp; Physio</span></a></li>
</ul>

CSS:

#header {
    height:1%;
    overflow:hidden;
}
#header li {
    float:left;
}
#header li a, #header li a span {
    display:block;
    height:28px;
}

El intervalo es para una imagen de fondo de efecto de desplazamiento, intenté eliminarlo y su estilo, el problema persiste.

Doctype es XHTML 1.0 Strict. Bueno, puedo hacerlo funcionar en IE6 con solo relleno, pero se sabe que el relleno vertical se implementa de manera diferente en Safari que en otros navegadores.

Mi pregunta es si hay una manera de retener la altura y la visualización: bloque (debido a las imágenes de fondo) pero sin ancho (quiero que la longitud del elemento sea flexible) para < a > y haga una lista horizontal en IE6. Gracias!

Answer 1

Flotar los elementos secundarios puede ser la solución que necesita:

#header li a, #header li a span {
  display:block;
  height:28px;
  float:left;
}