Mouseover Tabs Menu - IE6 issue with image rollovers

[slippery_jack]

1) Script Title:
Mouseover Tabs Menu

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex1/mouseovertabs.htm

3) Describe problem:
Hi. I have been trying to customize the Mouseover Tabs Menu script so that I can use image rollovers instead of just a background colour. It is working well in the browsers I have tested, except for IE6 on PC. I have provided a link to the test page at the end of this message. Using IE on PC, if you rollover any of the top level tabs and then onto the second level tab area (the solid blue bar) you will see that the tab image you have just rolled off is being replaced by an incorrect image.

It took me a while to work out where this 'new' image was coming from but it seems that whatever image is last in the following css is used here by IE6. Rolling on/off 'Client Services' illustrates this best.

The problem is that I can't work out why this is happening and I have been banging my head all day, so now I can't see the wood for the trees. Any help would be much appreciated.

The CSS mentioned is:
.tabsmenuclass a.locations:hover, .tabsmenuclass a.locations.selected{
background-image: url(../images/tab_locations.png);
color: white;
}

.tabsmenuclass a.home:hover, .tabsmenuclass a.home.selected{
background-image: url(../images/tab_home.png);
color: white;
}
.tabsmenuclass a.management:hover, .tabsmenuclass a.management.selected{
background-image: url(../images/tab_management.png);
color: white;
}
.tabsmenuclass a.client_services:hover, .tabsmenuclass a.client_services.selected{
background-image: url(../images/tab_client_services.png);
color: white;
}
.tabsmenuclass a.jobs:hover, .tabsmenuclass a.jobs.selected{
background-image: url(../images/tab_jobs.png);
color: white;
}
.tabsmenuclass a.testimonials:hover, .tabsmenuclass a.testimonials.selected{
background-image: url(../images/tabs_testimonials.png);
color: white;
}
.tabsmenuclass a.contact:hover, .tabsmenuclass a.contactselected{
background-image: url(../images/tab_contacts.png);
color: white;
}

And my test URL is:
http://www.stephenmurphy.co.uk/menu/index.html

Many thanks in advance,
Stephen

[ddadmin]

Please try and format any code in your post using the CODE tags. It just makes it easier to read.

Debugging CSS in any browser is tricky, especially in inconsistent browsers like IE6. It's easier in this case for me to just come up with something brand new. In this case, you should find it relatively easy to, say, integrate an image based CSS tabs menu such as Uber Round Tabs (http://www.dynamicdrive.com/style/csslibrary/item/uber_round_color_tabs/) with this script. Here's a screenshot:

http://i41.tinypic.com/zx6z6a.gif

Getting to the above simply means modifying the HTML of the top level menu so each link contains an inner SPAN element (as dictated by Uber Rounds Tabs):


<div id="mytabsmenu" class="ubercolortabs">
<ul>
<li><a href="http://www.javascriptkit.com" rel="gotsubmenu[selected]"><span>JavaScript Kit</span></a></li>
<li><a href="http://www.cssdrive.com" rel="gotsubmenu"><span>CSS Drive</span></a></li>
<li><a href="http://www.codingforums.com"><span>No Sub Menu</span></a></li>
</ul>
</div>

And the CSS, basically dropping in the CSS for Uber Round Tabs:


/* ######### CSS for top level tabs ######### */

.ubercolortabs{
padding: 0;
width: 100%;
overflow: hidden;
background: transparent;
}

.ubercolortabs ul{
font: bold 11px Arial, Verdana, sans-serif;
margin: 0;
padding: 0;
list-style: none;
}

.ubercolortabs li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform: uppercase;
}


.ubercolortabs a{
float: left;
color: white;
background: #804000 url(roundleft.gif) no-repeat left top; /*default background color of tabs, left corner image*/
margin: 0 2px 0 0;
padding: 0 0 1px 3px;
text-decoration: none;
letter-spacing: 1px;
}

.ubercolortabs a span{
float: left;
display: block;
background: transparent url(roundright.gif) no-repeat right top; /*right corner image*/
padding: 7px 9px 3px 6px;
cursor: pointer;
}

.ubercolortabs a span{
float: none;
}


.ubercolortabs a:hover, .ubercolortabs li a.selected{
background-color: #AE5300; /*background color of tabs onMouseover*/
color: white;
}

.ubercolortabs a:hover span{
background-color: transparent;
}

/* ######### CSS for sub menu container below ######### */

.tabsmenucontentclass{
clear: left;
background: #E8E8E8;
width: 90%;
height: 24px;
padding: 5px;
border: 1px solid silver;
}

.tabsmenucontentclass ul{
margin: 0;
padding: 0;
list-style-type: none;
}

.tabsmenucontentclass li{
float: left;
margin-right: 1em;
}