Problem with background-position with px in Firefox 4

Question

I'm positioning a background sprite and changing the position on hover (using jQuery), and it works as expected in Chrome, IE(8) and Safari (I'm on a PC, Win 7) but I'm having problems with Firefox (4). Nothing happens and in the error console I get this:

Warning: Error in parsing value for 'background-position'. Declaration dropped.

I initially position the background like this:

background-position: bottom left;

and alter the position on hover like this:

$(document).ready(function () {

var bgPos = 'bottom left';

        $("#nav-01").hover(function () { $('.nav-wrap').css('background-position', '-787px left'); }, function () { $('.nav-wrap').css('background-position', bgPos); });
        $("#nav-02").hover(function () { $('.nav-wrap').css('background-position', '-656px left'); }, function () { $('.nav-wrap').css('background-position', bgPos); });
        $("#nav-03").hover(function () { $('.nav-wrap').css('background-position', '-525px left'); }, function () { $('.nav-wrap').css('background-position', bgPos); });
        $("#nav-04").hover(function () { $('.nav-wrap').css('background-position', '-394px left'); }, function () { $('.nav-wrap').css('background-position', bgPos); });
        $("#nav-05").hover(function () { $('.nav-wrap').css('background-position', '-263px left'); }, function () { $('.nav-wrap').css('background-position', bgPos); });
        $("#nav-06").hover(function () { $('.nav-wrap').css('background-position', '-132px left'); }, function () { $('.nav-wrap').css('background-position', bgPos); });
        $("#nav-07").hover(function () { $('.nav-wrap').css('background-position', '-1px left'); }, function () { $('.nav-wrap').css('background-position', bgPos); });

    });

To debug I tried changing '-787px left' to 'top left' and that worked, so the problem seems to be positioning the background using px in Firefox? Is this a bug (a feature... hehe) or am I simply doing something wrong...? (I also tried using em and % but none of it worked.)

Answer 1

-787px is a perfectly valid value for background-position. However, you are mixing the order: Horizontal comes first. That could be the problem. Try turning the values around:

left -787px