Page 1 of 1

background-position script not working in IE6

Posted: Tue Oct 06, 2009 11:51 pm
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!

Re: IE6 hover and script issue

Posted: Wed Oct 07, 2009 9:50 am
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.

Re: IE6 hover and script issue

Posted: Wed Oct 07, 2009 12:02 pm
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?