Getting image to center in IE when it does in Chrome and FF

Question

I have an image that displays when an icon is clicked. The image SHOULD center vertically and horizontally, and does so fine in Chrome and FF, but for some reason it fails to get the correct margin sizes in IE. The on click javascript function I have formats the CSS for the image, it will modify the marginLeft to half the height, and the marginTop to half the width. Below is the code:

$('.preview').click(function(){
    var img = $("#<%=imgFull.ClientID%>");
    img.attr("src", $(this).attr('fullImg'));
    img.attr("Visible", "true");

    img.load(function(){
        img.css({
            top: "50%",
            left: "50%",
            marginTop: "-" + (img.width()/2) + "px",
            marginLeft: "-" + (img.height()/2) + "px"
    }, false);
});
    $("#overlay").show();
    $("#overlayContent").show();
});

Is there something that I'm missing as far as IE goes? I'm not used to having to cross browser support for it. My former client base was strictly Chrome and FF. The images being tested with are 320x240, so the margins should be

margin-top: -160px;
margin-left: -120px;

Instead they are

margin-top: -14px;
margin-left: -15px;

Answer 1

http://www.w3.org/TR/html-markup/img.html#img-display

Images typically will display as inline-block by default, which adds line-height into the mix of an elements padding/margin height. Declaring an image to display:block in css removes the line-height from the elements computed height.