Or maybe the weirdness is my own doing. My first foray into CSS sprites, using the technique for a horizontal menu. Each item on the menu corresponds to a page on the site, and I'm using a "selected" class (subclass?) to highlight the current page. Works in every browser tried except IE6. What IE6 does is replace the selected menu item with the last menu item, regardless of what page is loaded. See attached image.

Here's my code, with 'Home' selected in this instance.

HTML:

<ul id="menu">
    <li><a href="#" class="home selected">Home</a></li>
    <li><a href="#" class="author">Author</a></li>
    ...
    <li><a href="#" class="blog">Blog</a></li>
    <li><a href="#" class="chat">Chat</a></li>
</ul>

CSS:

ul#menu {
    width: 801px;
    margin: 0px auto;
    list-style: none;
}

ul#menu li { display: inline; }

ul#menu li a {
    display: block;
    float: left;
    height: 30px;
    background-image: url(menu.png);
    text-indent: -9999px;
}

ul#menu li a.home {
    width: 96px;
    background-position: 0 0;
}
ul#menu li a.home:hover, ul#menu li a.home.selected {
    width: 96px;
    background-position: 0 -30px;
}

....

ul#menu li a.chat {
    width: 81px;
    background-position: -718px 0;
}
ul#menu li a.chat:hover, ul#menu li a.chat.selected {
    width: 81px;
    background-position: -718px -30px;
}

What I think is happening in IE6 is that it's interpreting each a.(id).selected as a redefinition of a single class, whereas every other browser is understanding it the way I intended. I'd love to use a single class definition for the whole menu, but since the background position is different in each case, I don't know how I'd go about that. Apart from using a unique id for each item's selected state, what can I do to talk IE6 into displaying things correctly?

While I don't intend to expend a lot of effort supporting an ancient browser, the site this is for does have a number of IE6 users still and I don't want something so fundamental as menu navigation to be screwed up for them.

2 answers

1
point

I'd suggest adding the selected class to the li instead. This method will work in every browser including IE6.

The reason you're running into trouble is that IE6 doesn't understand multiple classes on a single element.

Answered over 6 years ago by Joshua Clanton
  • Ah, thanks for pointing me in the right direction! I'll give that a shot. Michael over 6 years ago
  • That fixed things, thanks again. It occurred to me too after trying your solution that I could have / should have used ids for each menu item, eg. ul#menu li a#author.selected I can't remember now why I chose class names instead. Michael over 6 years ago
1
point

I'd also worry a bit about choosing class names that might be special to IE - from experience I know it has issues with .active as well, and selected could be special in terms of the select box.

Answered over 6 years ago by Tony Crockford