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) : I had a link here, but unhelpfully can't seem to post it. 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.
you should clean up your css to start with .TabbedPanelsTab1 { position: relative; top: 0px; float: left; padding: 4px 0px; margin-right: 40px; font: bold 1em sans-serif #999; border: 1px solid #fff; -moz-user-select: none; -khtml-user-select: none; cursor: pointer; width:80px; height:110px; text-align:center; background-image:url(step101.jpg) no-repeat #fff; } What is this line for? list-style: none; List style is for lists, you're setting the css for a div.
I seem to have the reverse issues, it usually ends up being FF that causes the problems not IE7 for me.. Now IE6... ya I've had way more problems with IE6 than anything. I would agree, clean up the css.. and alter the css to work for IE6 specifically.. example below: * html #TabbedPanelsTab1 { /*IE 6 only CSS */ margin-left: 0px; } Code (markup):
Cheers for the replies - Basically I've managed to get it to change each tabs backround image to the same image, using : .TabbedPanelsTab { position: relative; top: 0px; float: left; padding: 4px 0px; margin: 0px 40px 0px 0px; font: bold 1em sans-serif; background-color: #FFFFFF; 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; } .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; } So really, I'm looking to have it whereby the background image changes to a different image for every tab. Cheers.
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?