CODEWITHSUNDEEP
jquerycsshtml
srakl
srakl

Reputation: 2619

Jquery .width() giving different values on chrome and firefox

I'm using this JQuery code for my table.

    $(document).ready(function () {

    var tableBottom = $(window).height() - $('#compare-table').height();

    $(window).scroll(function (event) {
        var y = $(this).scrollTop();
        var tableTop = $('#compare-table').offset().top;

        if (y >= tableTop && y <= tableBottom) {
            $('#compare-table-controller').addClass('fixed');
            $('#compare-table-controller').css('margin-top', '-' + tableTop + 'px');
        } else {
            $('#compare-table-controller').removeClass('fixed');
            $('#compare-table-controller').css('margin-top', '0px');
        }
    });


    var compareTableHeight = $('#compare-table > table').height() + 1;
    var compareTableTotalColumn = $('#compare-table > table').width() / 195;
    $('#compare-table').css('height', compareTableHeight);

    alert($('#compare-table > table').width());
});

for some reason the alert() gives me different values on chrome and firefox. I'm using chrome 28.0.1500.71 and firefox 22.0. The correct value should be 1170px.

As a result, ALL 6 columns are shown on firefox. it should only show 4 and hide the other 2.

my CSS for the displayed div's are.

#compare-table-h {
        width: 780px;
        overflow: hidden;
        position:fixed;
        height: 213px;
        z-index: 999;
    }
    #compare-table {
        width: 780px;
        overflow: hidden;
        position:relative;
        margin-top: 213px;
    }

and the table's inside the div's are

<table id="compare-table-head" class="table font-size-12 compare-table table-striped" style="position:absolute; border-bottom:1px solid #ddd; width: 1170px;">

the 1st table works fine, the second doesn't

Upvotes: 2

Views: 3944

Answers (1)

Alvaro
Alvaro

Reputation: 41595

It seems that your problem is caused because of a confusion between the inline style assigned to the table and the CSS properties. (http://jsfiddle.net/XV3Vz/19/)

The inline style is:

 style="position:absolute; border-bottom:1px solid #ddd; width: 1170px"

And the CSS style for the parent element is:

#compare-table {
    width: 780px;
    overflow: hidden;
    position:relative;
    margin-top: 213px;
}

Update:

After looking at it a bit more i saw the problem was in using a table inside a div, you can see how it works properly otherwise.

I don't really know why you are using the position:absolute in the wrapping div, but your problem could be fixed getting rid of it and adding the display:table style to the wrapping element:

.compare-table-in-div {
    border-bottom:1px solid #ddd;
    width: 1170px !important;
    background: #ccffee;
   /*deleted position absolute */
}
#compare-table {
    width: 780px;
    position:relative;
    background: #ccddff;
    height: 50px;
    display:table;  /*ADDED */
}

Living example: http://jsfiddle.net/XV3Vz/25/

Upvotes: 2

Related Questions