Discrepancy between outputs from firefox and chrome for 'console.log'

Question

Why would firefox give me the correct output but Chrome doesn't ?

I am trying to find the height of a div that has not been specified in the stylesheet or anywhere else.

Chrome gives me the integer value of '20', but firefox gives me the correct value (using firebug) of 516.

This is the code I am using to generate the console.log:

var img_h = $("#pics").height();
    console.log(img_h);

<div id="pics" width="100%">
        <img src="image1.jpg" width="45%">
        <img src="image2.jpg" width="45%">
    </div>

Thoughts?

Answer 1

This is not the solution, but I'm leaving it up so no one else offers it either.

---

Not positive, by try wrapping the jquery in the doc ready wrapper:

$( document ).ready(function(){
    //your code
});

Just a theory, but it could be that the element isn't actually loaded yet when the console.log is firing.

Answer 2

If you want images to be loaded, instead of document.ready you should use window.onload, like this:

$(window).load(function() {
  var img_h = $("#pics").height();
  console.log(img_h);
});

The most notable difference is that images (not created dynamically!) are loaded and ready when this code runs.