i have a problem with IE8 + jQuery.css(‘top’) function.
1) I have a DIV with 100px height and 600px width. I have another DIV inside the first one with style=”top:50%” so it should be placed in top=50px.
2) All browsers display it correctly. BUT, later, i need to use jQuery to find the position of the element and here comes the problem with IE8:
$(‘#txt’).css(‘top’) returns me NOT 50px BUT 300px !!!!! which is not correct. Also i noticed that it returns always the value of 0.5*WIDTH of the parent DIV !! It makes me crazy! how could it be?
here is the code example:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
function onLoadTest(){
alert("document.getElementById('txt').style.top="+document.getElementById('txt').style.top+"\n$(#txt).css('top')="+$('#txt').css('top'));
}
</script>
</head>
<body onload="onLoadTest()" style="padding: 0px; margin: 0px; width:100%; height:100%">
<div id="box" style="width:600px; height:100px; position:absolute; padding:0px; margin:0px; border: solid 1px">
<div id="txt" style="top:50%; position:relative; padding:0px; margin:0px;border: solid 1px">
im in the position top=50% (which is 50px), plz compare to alert box data
</div>
</div>
</body>
</html>
Here is my fiddle. Try using offset(). IE gets weird sometimes with absolute.
Using offset is with the boarder on your parent will get you 51 so I took the boarder off the parent