IE 6 does not recognize the current page

Question

I am using a simple list as navigation which brings up the appropriate background image depending on the state of the link normal, hover or current. In IE6 the current or actual page is being ignored, not displaying the different image and leaving the link active. The code is -

<div id="mainNav">
  <ul>
    <li><a href="../index.html">Home</a></li>
    <li><a href="../work.html" class="current">Projects</a></li>
    <li><a href="../contact.html">Contact</a></li>
  </ul>
</div>

The CSS for the navigation is -

#topcontent1 #mainNav {
    position: absolute;
    left: 86px;
    width: 328px;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 0.9em;
    padding: 0px;
    clear: both;
    color: #666633;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    font-weight: 700;
    text-transform: uppercase;
}
#topcontent1 #mainNav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    float: left;
    width: 100%;
}
#topcontent1 #mainNav li {
    float: left;
    margin: 0;
    padding:0;
    display: block;
}
#topcontent1 #mainNav li a:link, #topcontent1 #mainNav li a:visited {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 1em;
    color: #fff;
    text-decoration: none;
    display: block;
    background-repeat: no-repeat;
    margin-right: 10px;
    width: 99px;
    height: 62px;
    margin-top: 0px;
    line-height: 62px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0;
    text-align: center;
    padding-top: 60px;
    background-image: url('../images and html/images/tabnorm.jpg');
}
#topcontent1 #mainNav li a:hover {
    color: #f8b449;
    border: none;
    background-image: url('../images and html/images/tabhover.jpg');
    background-repeat: no-repeat;
}
#topcontent1 #mainNav ul li a.current {
    color: #AAB3B2;
    background-image: url('../images and html/images/tabcurr.jpg');
    background-repeat: no-repeat;
}
#topcontent1 #mainNav ul li a.current:hover {
    color: #AAB3B2;
    cursor: default;
}

The #topcontent1 #mainNav ul li a.current style is seemingly being ignored by IE6.

can anyone see an issue or suggest a work around

Answer 1

IE6 seems to have problems with complicated selector statements. maybe try using

#mainNav a.current

instead of

#topcontent1 #mainNav ul li a.current

Answer 2

Change this in your code

#topcontent1 #mainNav li a:link, #topcontent1 #mainNav li a:visited {

to

#topcontent1 #mainNav li a {