Cross browser (chrome/firefox) trying to get top-pos defined in percentage as pixels

Question

I have a problem whit cross browser output, I'm trying to get the top and left css attribute of a div, but firefox gives me the exact pixel position and Chrome give me the percentage.

Example: http://web.cinaird.se/pdf/test.htm

CSS

#mix{
    position:absolute;
    top: 10px;
    left: 45%;
    background-color:#f0f;
}

jQuery

css top: $("#mix").css("top") + " <br/>css left: " + $("#mix").css("left")

Output

Firefox (and IE8): css top: 10px css left: 267.3px

Chrome: css top: 10px css left: 45%

is there any way to get the same result for both (all) browsers? I would prefer to get a pixel value without any major calculation

Answer 1

Use the position or offset method, depending on whether you want the position relative to the offset parent or relative to the document.

Example:

var p = $("#mix").position();
alert('top: ' + p.top + 'px, left: ' + p.left + 'px');