IE issue with images in tabs

[duklaprague]

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) :

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;
}

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

Cheers.

[edited by: SuzyUK at 5:35 pm (utc) on Jan. 26, 2008]
[edit reason] No URI's, thanks [/edit]

[rocknbil]

Welcome aboard duklaprague, please see the TOS [webmasterworld.com], personal URL's are not allowed - the link you posted returns a 404 anyway. :-)

What's not showing here is probably the most common problem, you have the mouseover/hover effects on an image or other non anchor element. Mouseovers should always be applied to the anchor elements <a></a>, as these are the "natural" element for mouseover/hover effects.

[Xapti]

What he's getting at is that IE6 does not support :hover on anything other than an anchor element.
Other than redesigning to set the anchor hover, you could use javascript to get IE6 to emulate the :hover selector. A javascript called IE7.js is one such script.

[duklaprague]

Cheers for the replies - sorry about the link - didn't realise it was a no no - seemed the easiest way to illustrate what I was trying to do.

I had it working where each tab was the same using :

.TabbedPanelsTab {
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;
}

and the same rollover image, again without multiple versions of the style for each tab :

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

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

Would there be another way of making the background image for each tab on rollover be different?

Or... with that IE7.js script, is there anything more to it than attaching it to the page, and uploading it?

[rocknbil]

As said, make your anchors the tabs.

<ul id="nav">
 <li><a href="some_link.html">Purchase Information</a></li>
 <li><a href="some_link_too.html">Contact</a></li>
</ul>

#nav li { list-style:none; margin:0; padding: 0 6px 0 6px; }
#nav a { 
 display: block;
 line-height:1.6em; /* tab sizes up/down with browser prefs */
 height:1.6em; 
 background: url(static-state.gif);
}
#nav a:active { background:url:(active-state.gif); }
#nav a:visited { background:url:(visited-state.gif); }
#nav a:hover { background:url:(hover-state.gif); }

This approach is both semantically correct and works in all browsers. A lot of styling stuff is left out here to communicate the concept.

[duklaprague]

I get you - although I'm not actually using links, which might not have been clear without the link.

I'm basically adapting the Spry Tabbed Panels thing in Dreamweaver, so rather than creating links, it's a little interactive thing on a page whereby the user mouses over the different tabs to change their image from a faded version to a colour version, representing 4 steps of a process, and a line or two about each step to appear below the images as each one is moused over.

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.

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?