Элемент получает 100% ширину с высотой в IE6

Я пытаюсь создать горизонтальный список ссылок с помощью <ul>, в котором все <a> являются display: block и имеют высоту. В IE6 он продолжает получать 100% ширину после того, как я установил высоту для <a>, сделав его вертикальным списком.

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

Диапазон предназначен для фонового изображения с эффектом наведения, я попытался удалить его и его стиль, проблема остается.

Doctype - это строгий XHTML 1.0. Что ж, я могу заставить его работать в IE6 с помощью простого заполнения, но, как известно, вертикальное заполнение в Safari реализовано иначе, чем в других браузерах.

Мой вопрос в том, есть ли у меня способ сохранить высоту и display: block (из-за фоновых изображений), но без ширины (я хочу, чтобы длина элемента была гибкой) для <a> и сделать горизонтальный список в IE6. Спасибо!