z-index behaves differently in firefox

i have the following code

#flipper #Front {
    z-index:81;
}
#flipper #Back {
    z-index:80;
}
.face{
    position:absolute;
    width:100%;
    height:100%;
}
.front{
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
}
#flipper > * {
    max-width:100px;
    cursor:pointer;
}


       <div id='flipper'>
        <div id='Front' class='front face'>
            <img src='images/front.gif'>
        </div>
        <div id='Back' class='back face'>
            <img src='images/back.gif'>
            <a href="/link" title="get in /here/" style="position: relative; top: -100px; display:none;">peek</a>
        </div>

    </div>

and script

/* flip */

function flipOwlly() {
        if (Side=='front') {
                jQuery('#flipper').css('-webkit-transform','rotateY(180deg)');
                jQuery('#flipper').css('-moz-transform','rotateY(180deg)');
                jQuery('#Front').css('z-index','79');
                jQuery('#flipper a[href="/login"]').css('display', 'inline-block');
                Side = 'back';
        } else {
                jQuery('#flipper').css('-webkit-transform','rotateY(360deg)');
                jQuery('#flipper').css('-moz-transform','rotateY(360deg)');
                //setTimeout(jQuery('#Fro开发者_开发技巧nt').css('z-index','81'), 550);
                jQuery('#Front').css('z-index','81');
                owllySide = 'front';
        }
        return false;
}

EDITED TO ADD JS CODE

and i have a jquery code to run css animation for flipping the whole #flipper element, and then changing the front z-index to 79 [and back].

my problem is that this displays differently on firefox and chrome. in firefox, higher z-index number send my image back! so when the page loads, the logical order is ok, but the back image is on top of the front on....

even IE renders it fine! whats going on?

Posting your jquery code could help. Anyway, I tested flipping the z-index and it seems to be working:

$(document).ready(function()
{
    $("#flipper").click(function()
    {
        $("#Front").css("z-index", $("#Front").css("z-index") == "79" ? "81" : "79"); 
    });
});

However, if you are just trying to toggle between the images, it would be better to toggle their visibility rather than their z-indexes:

#flipper #Back 
{
    display: none;
}

$(document).ready(function()
{
    $("#flipper").click(function()
    {                     
        $("#Front").toggle();
        $("#Back").toggle();
    });
});

the way i fixed this was kind of workaround, which i really dont like, but it was the only way i could find..

since i have 2 div for each side, i simply 'display:none'-ed the back face one, so even if a browser wrongfully decides to display it, it won't!