Element gets 100% width with height in IE6

I am trying to make a horizontal list of links with <ul> where all <a> is displayed: block and has height. In IE6, it keeps getting 100% width after I set the height for the <a>, making it a vertical list.

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


      

        
        
        
      

    

Fly over for some hover effect background image, I tried to remove it and its style, the problem remains.

Doctype is XHTML 1.0 Strict. Well, I can get it to work in IE6 with just indention, but Safari has been known to implement vertical padding than other browsers.

My question is if there is a way to keep the height and display: block (due to background images) but no width (I want the element length to be flexible) for <a> and make a horizontal list in IE6. Thank!