jQuery .width() cross-browser issue

[elbeato]

I'm having trouble with cross-browser compatibilty with a jQuery click function. I want it to return the width of #bbox and have it play the animations based on what it returns. I have set the width of #bbox to 0px in my CSS as the starting state.

THE PROBLEM: w returns as 0px as the starting state in Firefox, but in Chrome and IE it returns fractions of a pixel, which screws everything up. Has anyone encountered this type of thing before?

    $('div').on('click', '#browse', function() {
        var w = $("#bbox").css('width');

        if (w != '0px' && w != '0') {
            $("#bbox").stop().animate({'width': '0', 'opacity': '0'}, function(){
                $("#bbox").css({'z-index': '0', 'display': 'none'});
            })

        }

        else {
            $("#bbox").animate({'width': '550px', 'opacity': '1'}, function(){

            $(document).one('click', function(){

                $("#bbox").stop().animate({'width': '0', 'opacity': '0'}, function(){
                    $("#bbox").css({'z-index': '0', 'display': 'none'});
                });
        })

            $('#bbox').click(function(event){
                        event.stopPropagation();
                })  

            })
                .css({'z-index': '1', 'display': 'block'});

        }
    })

[elbeato]

I dug and dug, and finally realized that the issue is with the different ways firefox and chrome render my div borders. To fix this, I added some Chrome and IE-specific Media queries to my CSS. Chrome and IE don't count outlines as width, so I set borders to 0 and outline to 1px. I had to do it this way because I'm using a box-shadow, and Firefox has a bug when adding outlines to box shadows.

For the curious, my media queries:

/*Chrome*/
@media screen and (-webkit-min-device-pixel-ratio:0){

    #bbox{
        border: none;
        outline: 1px solid #ccc;
    }

}

/* IE 8, 9 10 */
@media screen\0 {

    #bbox, #ubox, #gbox, #loginform{
        border: none;
        outline: 1px solid #ccc;
    }

}

[pixelsoul]

Thanks for updating the thread to update us that you had found the problem and what your solution was :)