IE issue with images in tabs

[Iain71]

Hope someone can help with this. I've been trying to use rollover images in tabs - the best way to explain is probably just to link to what I mean - towards the bottom of the page below.

Basically the images are changing as you rollover them correctly in safari and firefox, but not in IE(6) :

http://www.pioneerautomotive.co.uk/indexnew701.shtml

For the tabs, the CSS is currently :

.TabbedPanelsTab1 {
position: relative;
top: 0px;
float: left;
padding: 4px 0px;
margin: 0px 40px 0px 0px;
font: bold 1em sans-serif;
background-color: #FFFFFF;
list-style: none;
color:#999999;
border-left: solid 1px #fff;
border-bottom: solid 1px #fff;
border-top: solid 1px #fff;
border-right: solid 1px #fff;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
width:80px;
height:110px;
text-align:center;
background-image:url(step101.jpg);
background-repeat:no-repeat;
}

x4, called .TabbedPanelsTab1, .TabbedPanelsTab2, .TabbedPanelsTab3, .TabbedPanelsTab4

and for corresponding styles each for hover and selected :

.TabbedPanelsTab1:Hover {
background-color: #FFFFFF;
color:#24303C;
border-bottom: solid 1px #FFFFFF;
background-image:url(step105.jpg);
background-repeat:no-repeat;
}

.TabbedPanelsTab1:Selected {
background-color: #FFFFFF;
color:#24303C;
border-bottom: solid 1px #FFFFFF;
background-image:url(step105.jpg);
background-repeat:no-repeat;
}

The full CSS page is at :

http://www.pioneerautomotive.co.uk/SpryTabbedPanels701.shtml

If anyone could help me get this working correctly in IE that would be much appreciated.

Cheers.

[Iain71]

I have managed to get it working now using that IE7.js script, although not without a catch - although the thing now works in IE, the first tab no longer defaults to the selected (ie colour) image.

http://www.pioneerautomotive.co.uk/indexnew101.shtml

So each tab has the following CSS (each numbered 1-4)

.TabbedPanelsTab1 {
position: relative;
top: 0px;
float: left;
padding: 4px 0px;
margin: 0px 30px 0px 0px;
font: bold 1em sans-serif;
background-color: #FFFFFF;
list-style: none;
color:#999999;
border-left: solid 1px #fff;
border-bottom: solid 1px #fff;
border-top: solid 1px #fff;
border-right: solid 1px #fff;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
width:80px;
height:110px;
text-align:center;
background-image:url(step101.jpg);
background-repeat:no-repeat;
}

.TabbedPanelsTab1:Hover {
background-color: #FFFFFF;
color:#24303C;
border-bottom: solid 1px #FFFFFF;
background-image:url(step105.jpg);
background-repeat:no-repeat;
}

.TabbedPanelsTab1:Selected {
background-color: #FFFFFF;
color:#24303C;
border-bottom: solid 1px #FFFFFF;
background-image:url(step105.jpg);
background-repeat:no-repeat;
}

Is it possible to set the first tab to be selected when the page loads, as was happening here :

http://www.pioneerautomotive.co.uk/indexnew401.shtml