Why won't my date line up with my anchor tags under IE7,6?

<ul>
        <li><a href="#">test one<span>2011-06-21</span></a></li>
        <li><a href="#">test one<span>2011-06-21</span></a></li>
        <li><a href="#">test one<span>2011-06-21</span></a></li>
        <li><a href="#">test one<span>2011-06-21</span></a></li>
        <li><a href="#">test one<span>2011-06-21</span开发者_StackOverflow></a></li>
        <li><a href="#">test one<span>2011-06-21</span></a></li>
      </ul>

the css:

ul {
    margin:15px 0;
    padding:0;
    list-style:none;
    line-height:28px;
}

ul li a {
    padding-left:20px;
    color:#2e2e2e;
    font-size:14px;
    text-shadow:#FFF 1px 1px;
    background: url(triangle.png) 0 5px no-repeat;
}

ul li a span {
    float:right;
}

Why won't my date line up with my right-floated anchor tags under IE 6 and 7, but is ok under firefox? How do I correct it?

Actually, you just need your spans on the left of the text preceeding it:

<a href="#"><span>2011-06-21</span>test one</a>

span is an inline element, meaning to do block-type floats on it, you must declare it as

span {
    display: block
}