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;