Element gains 100% width with a height in IE6

Question

I'm trying to make a horizontal list of links with <ul> wherein all <a> is display:block and has a height. In IE6, it keeps getting 100% width after I set a height for <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;
}

The span is for some hover effect background image, I tried to remove it and its styling, problem remains.

Doctype is XHTML 1.0 Strict. Well I can get it working in IE6 with just padding but vertical padding is known to be differently implemented in Safari than it is by other browsers.

My question is if there's a way for me to retain height and display:block (because of background images) but without width (I want the item length to be flexible) for <a> and make a horizontal list in IE6. Thanks!

Answer 1

Floating the child elements may be the fix you need:

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