Élément gagne 100% de largeur avec une hauteur dans IE6

Question

J'essaye de faire une liste horizontale de liens avec <ul> où tous <un> est display: block et a une taille. Dans IE6, il continue à obtenir 100% de largeur après avoir défini une hauteur pour <un>, ce qui en fait une liste verticale.

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; 
} 

La durée est pour un effet de vol stationnaire image de fond, j'ai essayé de l'enlever et de son style, problème reste.

Doctype est la version XHTML 1.0 Strict. Eh bien, je peux le faire fonctionner dans IE6 avec un simple rembourrage, mais le rembourrage vertical est connu pour être implémenté différemment dans Safari que dans les autres navigateurs. Ma question est s'il y a un moyen pour moi de conserver la hauteur et afficher: bloc (à cause des images de fond) mais sans largeur (je veux que la longueur de l'élément soit flexible) pour <a> et faire une liste horizontale dans IE6 . Merci!

Answer 1

flottant les éléments de l'enfant peut être la solution dont vous avez besoin:

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