IE6 showing wrong background image

Question

Hi,

Im using the YUI tabs components and customised each tab to show a unique icon and then show a variation of the icon when the tab is selected.

As we know YUI adds 'selected' class to the selected tab and I manually added 'nav-xxx' where xxx is the tab name to each tab.

Im using the following css:

.nav-directory {
    background: url(/images/nav-browse.png) no-repeat scroll 0 0;
    height:34px;
    width:141px;
}

.nav-directory.selected {
    background: url(/images/nav-browse-selected.png) no-repeat scroll 0 0;
}

.nav-admin{
    background: url(/images/nav-admin.png) no-repeat scroll 0 0;
    height:34px;
    width:121px;
}

.nav-admin.selected {
    background: url(/images/nav-admin-selected.png) no-repeat scroll 0 0;
}

This works perfectly in all browsers including IE8 but not IE6. When a tab is selected it shows the same 'selected' background, nomatter which tab is selected.

Doesn't IE6 support combined classes correctly??

I know its hard to explain without showing the page but its on a intranet system.

Thanks

Answer 1

ie6 doesn't understand chained class names, ie ".nav-admin.selected" won't work in ie.

It will just look at the last class name and ignore the rest.