CODEWITHSUNDEEP
cssinternet-explorerinternet-explorer-6navigation
Kahuna
Kahuna

Reputation:

IE 6 does not recognize the current page

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

Upvotes: 0

Views: 490

Answers (2)

Tom
Tom

Reputation: 1

Change this in your code

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

to

#topcontent1 #mainNav li a {

Upvotes: 0

Scott M.
Scott M.

Reputation: 7347

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

#mainNav a.current

instead of

#topcontent1 #mainNav ul li a.current

Upvotes: 1

Related Questions