background-position script not working in IE6

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
oldnoisy
Forum Newbie
Posts: 12
Joined: Sat Sep 12, 2009 7:49 pm

background-position script not working in IE6

Post by oldnoisy »

So I've done a ton of research and tried every fix I could think of (jQuery fixes, htc behaviours, etc) and nothing has worked. It seems most of the fixes are built for just changing the background color. I just can't get it to work in IE6! Even if I just got the Javascript to change the state without rollovers (for IE6) that would be okay.

The way it's setup is that there's an image in 3 states in it (inactive, rollover, active), setup on the y-axis. So when a user rolls over it shoves the background down 111px to show the rollover, etc.

This works in IE 7/8 FF 2/3 Safaris and most likely everything else:

http://www.muchomungo.com/CrowdTwist/pa ... plate.html

Relevant CSS

Code: Select all

li {
    list-style:none;
    float:left;
 
}
 
 
ul {
    list-style:none;
    margin:0;
    padding:0;
}
 
ul#toolbar a {
    height: 111px;
    display:block;
    text-indent:-9999px;
    font-size:0px;
    line-height:0px;
    outline: none;
}
 
#toolbar li.unselected:hover {
background-position:0px 222px;
}
 
 
#toolbar li.selected {
    background-position: bottom;
    height: 111px; 
    z-index: 10;
    }
#toolbar li.unselected {
    background-position: top;
    margin-left:0px;
    }
 
li#dashboard {
    background-image:url("../../images/artist_center/nav_dashboard_mo.jpg");
    width:112px;
    height: 111px;
}
 
li#reporting {
    background-image:url("../../images/artist_center/nav_reporting_mo.jpg");
    width:103px;
    height: 111px;
    
}
li#pointscales {
    background-image:url("../../images/artist_center/nav_pointscales_mo.jpg");
    width:109px;
    height: 111px;
}
li#prizelocker {
    background-image:url("../../images/artist_center/nav_prizelocker_mo.jpg");
    width:114px;
    height: 111px;
}
li#email {
    background-image:url("../../images/artist_center/nav_email_mo.jpg");
    width:104px;
    height: 111px;
}
 
 
http://www.muchomungo.com/CrowdTwist/re ... /style.css


JS

Code: Select all

var currentSection = 'dashboard';
    
    
var newpane = function(gotoLink){
 
    if (currentSection == gotoLink) {
        return;
    }
    lastSection = currentSection;
    currentSection = gotoLink;
    
    // Change the section highlight.
    // Extract the root section name, and use that to change the background image to 'top', revealing the alt. state
 
    
    document.getElementById(currentSection).className = "selected";
    if (lastSection) {
        document.getElementById(lastSection).className = "unselected";
    }
}
Thanks for any help!
Last edited by oldnoisy on Wed Oct 07, 2009 1:35 pm, edited 2 times in total.
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: IE6 hover and script issue

Post by kaszu »

IE 6 doesn't support :hover for any other element than A
Use onmouseover, onmouseout events in javascript to add/remove CSS class.
oldnoisy
Forum Newbie
Posts: 12
Joined: Sat Sep 12, 2009 7:49 pm

Re: IE6 hover and script issue

Post by oldnoisy »

kaszu wrote:IE 6 doesn't support :hover for any other element than A
Use onmouseover, onmouseout events in javascript to add/remove CSS class.
Ok I'm aware of that, but what's wrong with my script that it wont change the background position when selected?
Post Reply