List type problem in Internet Explorer - 【StackMirror】|html|css

.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.

html
css

2009-06-16 08:26
by bboran

Can you show your html code as well - Alsciende 2009-06-16 08:34

Giving your sample HTML would make it easier to test - instanceof me 2009-06-16 08:35

Which IE version would also be helpfu - jitter 2009-06-16 08:39

@bboran, although you can't vote up answers yet, you can mark an answer as accepted by clicking on the tick icon. This'll make sure it doesn't show up in the 'unanswered questions' list - Alistair Knock 2009-06-17 08:10

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>

)

2009-06-16 08:41
by Alistair Knock

thank you very much. this worked for me in ie 7 but in ie8 nothing changed - bboran 2009-06-16 08:49

Works OK for me in IE8 with/without compatibility mode using your HTML and the combined CSS. Are you sure the old CSS hasn't been cached? (Ctrl-F5 - Alistair Knock 2009-06-16 08:58

yes i am sure. this is very weird - bboran 2009-06-16 09:00

Try making a test page with only the HTML you posted above and the combined CSS posted above, see if that works. It may be something else on your page is influencing layout - Alistair Knock 2009-06-16 09:07

ohh thank you very much . i was using a wrong ie condition code that was not working on ie 8 =) now the code works great both in ie 7 and 8. thanks alot. i am new in here so i cant give vote sorry - bboran 2009-06-16 18:00

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.

2009-06-16 08:50
by CtlAltDel

thanks but still no change on ie - bboran 2009-06-16 08:53

You might have to add text-decoration: none; for the a as well to hide the underline - CtlAltDel 2009-06-16 09:07

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.

2009-06-16 09:59
by pw.