CODEWITHSUNDEEP
jquerycss
Scottie
Scottie

Reputation: 11308

jQuery position() top is different in Chrome and Firefox

When I run the following fiddle in Chrome and Opera, the position().top is returned as 0, but Firefox is returning 1 and IE return 0.5.

How can I fix this?

http://jsfiddle.net/scottieslg/Loefza24/2/

Html:

<table id='testTable'>
    <thead>
        <tr><td>Test</td></tr>
    </thead>

    <tbody>
        <tr><td>Body</td></tr>
    </tbody>
</table>

<div id='topPos'></div>

css:

* { margin: 0; padding: 0 }
#testTable {
    table-layout: fixed;
    width: 100%;
    padding: 0;
    margin: 0;
    border-collapse: collapse;
}

#testTable thead tr td {
    border: 1px solid #ccc;
}

script:

$(document).ready(function() {
    var topPos = $("#testTable thead tr:nth-child(1)").position().top;
    console.log(topPos);
    $("#topPos").html("Top: " + topPos);
});

Upvotes: 1

Views: 1274

Answers (1)

Nadia Chibrikova
Nadia Chibrikova

Reputation: 5036

It seems like FF just doesn't consider the border to be a part of the element. As a possible solution you can use box-shadow instead:

$(document).ready(function() {
    var topPos = $("#testTable thead tr:nth-child(1)").position().top;
    console.log(topPos);
    $("#topPos").html("Top: " + topPos);
});
* { margin: 0; padding: 0 }
#testTable {
    table-layout: fixed;
    width: 100%;
    padding: 0;
    margin: 0;
    border-collapse: collapse;
}

#testTable thead tr td {
     box-shadow:0px 0px 0px 1px #ccc inset;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='testTable'>
    <thead>
        <tr><td>Test</td></tr>
    </thead>

    <tbody>
        <tr><td>Body</td></tr>
    </tbody>
</table>

<div id='topPos'></div>

Upvotes: 1

Related Questions