Firefox seems to be ignoring some JavaScript code in my program. The code below is used to change the background position of the element #navi li a, and the for loop that you see is part of a timer that changes images and text; as well as, the background position of the #navi (which is a sprite). The problem occurs when you get down to the condition if(j === count). Firefox recognizes the initial backgroundPosition property and sets the sprite to -12 pixels but when that element is no longer active. For a better idea of what happens the sprite is 11 x 24 pixels of two circles, the circle at 0 0 is yellow or active and the circle at 0 -12 is white or inactive. Firefox changes all of the circles to yellow as the timer goes but doesn’t reset them back to white when they are no longer active. The code for IE6 and Safari works as intended, Firefox is currently the only browser with this problem.
for (j=1;j<4;j++){
if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)){
var ieversion=new Number(RegExp.$1)
if (ieversion>=6){
document.getElementById("navi"+j).style.backgroundPosition = "0 -12";
document.getElementById("image_description"+j).style.visibility = "hidden";
}
} else if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)){
var ffversion=new Number(RegExp.$1)
if (ffversion>=3){
document.getElementById("navi"+j).style.backgroundPosition = "0 -12";
document.getElementById("image_description"+j).style.visibility = "hidden";
}
} else { //Safari
document.getElementById("navi"+j).style.backgroundPosition = "bottom bottom";
document.getElementById("image_description"+j).style.visibility = "hidden";
}
if (j===count){
if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)){
var ieversion=new Number(RegExp.$1)
if (ieversion>=6){
document.getElementById("navi"+j).style.backgroundPosition = "0 0";
document.getElementById("image_description"+j).style.visibility = "visible";
}
} else if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)){
var ffversion=new Number(RegExp.$1)
if (ffversion>=3){
document.getElementById("navi"+j).style.backgroundPosition = "0 0";
document.getElementById("image_description"+j).style.visibility = "visible";
}
} else { //Safari
document.getElementById("navi"+j).style.backgroundPosition = "top top";
document.getElementById("image_description"+j).style.visibility = "visible";
}
}
}
Have you tried with adding px unit ?
Seems to be possible duplicate of :
CSS/Javascript How do I make this background-position movie in Firefox like it does in IE7+?