List type problem in Internet Explorer

Question

.work .nav {
    list-style: none;
    margin: 0 0 5px 5px;
    padding: 0;
    position:absolute;
    top:248px;
    left:15px;
    z-index: 2;
}
.work .nav:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.work .nav li {
    float: left;
    margin-right: 5px;
}
.work .nav li a {
    float: left;
    display: block;
    padding-top: 10px;
    width: 10px;
    height: 0;
    border: 1px solid #ccc;
    overflow: hidden;
}
.work .nav li a:hover {
    background: #bbb;
}
.work .nav li a.on {
    background: #ccc;
}

This is how it looks in Firefox and Internet Explorer. it looks perfect in Firefox but in IE it is messing up.

How can i fix this problem?

Thank you all.

Answer 1

A possible fix (works for me in IE8 and Firefox 3) is to remove the padding-top and change it to height:10px, then make the text colour the same as the background, e.g.:

.work .nav li a {
    float: left;
    display: block;
    width: 10px;
    height: 10px;
    border: 1px solid #ccc;
    color:#fff;
    overflow: hidden;
}

.work .nav li a:hover {
    background: #bbb;
    color:#bbb;
}
.work .nav li a.on {
    background: #ccc;
    color:#ccc;
}

(edit: for the HTML I used:

<div class="work">
<ul class="nav">
 <li><a href="">1</a></li>
 <li><a href="">2</a></li>
 <li><a href="">3</a></li>
</ul>
</div>

)

Answer 2

Change the following piece of CSS:

.work .nav li {
    float: left;
    margin-right: 5px;
    height: 10px;
    line-height: 0px;
}

This will make it behave correctly, although I didn't have IE8 handy to test. I used   for the contents of the link.

Answer 3

Using your CSS and Alistair Knock's HTML, I was able to replicate the the problem by putting IE (IE8 and IE8 in IE7 mode) into quirks mode. It rendered fine in standards mode which makes me think you could solve your problem by including a valid DOCTYPE in your HTML.

I used the IE Developer Toolbar to switch between quirks and standards mode (as well as IE8 and IE7 mode). It comes in very handy.