IE7 first floating div sits higher than the rest, rest aligned fine

I have an issue where I have a set of href's floating next to each other. This looks fine in all browsers except the old IE versions in which the first link sits higher than all the other links.

CSS:

.google_pager 
{
width:500px;
white-space:normal;
padding:20px 0 10px 0;
font-weight:bold;
font-size:1.1em;
overflow:auto;
}

.google_p开发者_如何学编程ager span 
{
background-color:#6699C9 !important;
padding: 2px 6px;
color:#FFFFFF !important;
float:left;
height:0;
}

.google_pager a 
{ 
padding: 2px 6px;
text-decoration:none;
float:left;
height:0;
}

A selected pager link becomes a span instead of a link.

All help is welcome!

I had this problem as well with PHP generated lists. Not sure if this is your exact problem, but ensure that your closing ul tag is on a new line. For example I used this line of code for my last li,

    echo "<li><a href='#'>link</a></li>\n";

Sounds weird, but my problem looked the exact same as the example image you provided.

(P.S.) I realise this question was asked 6 months or so ago, but hopefully someone else will find this useful, as it was rather frustrating for me until I stumbled on the solution by accident!

Though I couldn't reproduce the issue without having your HTML, try applying display: block to .google_pager span and .google_pager a.

P.S. Also, any particular reason you are specifying zero height?

This is the best (being semantic) pattern for link lists. Follow this and they will work fine:

<div class="pages">
<ul>
    <li><a href="...">First</a></li>
    <li><a href="...">1</a></li>
    <li><a href="...">2</a></li>
    <li><a href="...">3</a></li>
    <li><a href="...">Last</a></li>
</ul>
</div>

CSS:

.pages ul, .pages li {
   list-style=type:none;
   padding:0;
   margin:0    
}


.pages li {
    display:inline-block   
}