can't get true height/width of object in chrome

Question

I have a question, if i set a image height in css and try to get height/width i get different results in different browsers. Is there a way to get the same dimension in all browsers?

You can find a live example here<-Removed

and the concept is like this:

CSS:
img{
  height:100px;
  }

Script:
$(document).ready(function(){
    $("#text").append($("#img_0").attr("height"));
    $("#text").append($("#img_0").attr("width"));
});

Output Firefox: img height: 100 img width: 150

Output Chrome: img height: 100 img width: 0

Output Chrome: img height: 100 img width: 93?

i have tried this from StackOverflow: stackoverflow.com/questions/1873419/jquery-get-height-width

but still get the same result

Any one know a good solution?

Answer 1

The images aren't loaded in document.ready, you need to use the window.load event to make sure they're present, like this:

$(window).load(function(){
    $("#text").append($("#img_0").height());
    $("#text").append($("#img_0").width());
});

Here's a quick read on the difference, the important part is that pictures are loaded.