Question

I dont what is going on but I have this menu set like this

<div class="indice_item activo">
<div class="indice_item">
<div class="indice_item">
<div class="indice_item">
<div class="indice_item">
<div id="puntero" style="width: 180px; height: 19px; top: 70px; left: 0px; background-color: rgb(10, 173, 247);">&nbsp;</div>

The thing is that the div.puntero is a div that follows the mouse when it hovers over the different indice_item. I do this with jquery and its functions animate.
When the page loads it creates this div.puntero, it looks for the first item of this menu and gets the width and the top and left coordinates, so it can set the div.puntero under the item that has the class activo.

This is the code that does that

/*
 * Seleccionado el primero activo 
 */
$(document).ready(function() {
    $('div.indice_item').last().after('<div id="puntero">&nbsp;</div>');
    //seteamos el puntero donde debe estar
    ancho=$('div.indice_item').first().width()
    alert(ancho);
    $('#puntero').width($('div.indice_item').first().width());
    $('#puntero').height(($('div.indice_item').first().height()+3));
    $('#puntero').css({
        "top"  : $('div.indice_item').position().top,
        "left" : $('div.indice_item').position().left
    });
    $('.indice_item').each(function (){
        //$(this).
    });
});

This works perfectly in firefox, but in chrome I have several problems, it seemed to work correct. But then I pressed reload or F5 and the width of the div.puntero goes crazy.
I added the alert(ancho); for the width and when I go to the page it gives me the correct width 180, and when I press reload 1665 or 1649, of the charts.
Why it is working like that?

Answer 1

Try to set the height and width after everything is loaded, i.e, use $(window).load(function() {//set height and width here});.

I believe it appears to work fine in firefox because of caching. Maybe I’m wrong, just set-up jsFiddle. It’ll be lot easier to pin-point the issue.