Centering via offset math doesn't work in non-webkit browsers

The code: http://jsfiddle.net/LPF85/6/

In FF, IE7, and IE9 (the only browsers I've tested that don't run WebKit), it seems that the left attribute is either always set to 0, or, in IE's case, negative.

My positioning code is all based off the dimensions of the document.

function open_img_in_face_box(id, width){
    max_width = $j(document).width();
    max_height = $j(document).height();
    padding = 150;

    passed_width = width || (max_width - (2 * padding));

    var img = $j('#' + id); 
    dom_img = document.getElementById(id); 

    $j(document).bind('reveal.facebox', function() { 
        $j("#facebox .image img").width(passed_width);
    })
    // display 
    jQuery.facebox({ 
        image: img.attr('src')
    });

    // center and adjust size
    var aspect_ratio = img.width() / img.height();
    var img_width = passed_width;
    var img_height = passed_width / aspect_ratio;开发者_StackOverflow

    window_center_y = max_height / 2;
    window_center_x = max_width / 2;

    offset_y = window_center_y - (img_height / 2);
    offset_x = window_center_x - (img_width / 2);

    var fbx = $j('#facebox');
    fbx.css('position', 'absolute');
    fbx.css('left', offset_x + 'px !important');
    fbx.css('top', offset_y + 'px !important');
    fbx.css('margin-left', 'auto');
    fbx.css('margin-right', 'auto');

}

margin-left and margin-right don't appear to do anything here, which I'm fine with, because the left math should work across all browsers, right? (It is just math)

The goal of the facebox / lightbox, is to be centered both horizontally and vertically.

---

Why would you even programatically calculate the position in the first place? What if the user resizes the page? This can easily be done in pure CSS.

I don't really understand your jsFiddle (or am I not seeing the same thing?) so I'll just give you this script: http://jsfiddle.net/minitech/8U4Ke/ that can be modified however you like. It's commented. ;)

Now it's easy to hide and show - to hide, fade out .overlay. To show, fade it in. To change the contents, replace the HTML in .popup. Add close boxes and whatnot liberally.