width not correct before positioning

width not correct before positioning


If I try to determine the width of a paragraph, the value is equal to
the body. Only after I have positioned it, the value becomes correct.
A simple example is below:
<html>

<head>
<script src="http://jquery.com/src/jquery-latest.js"></
script>
<script type="text/javascript">
var $jq = jQuery.noConflict();
$jq(document).ready(function()
{
var $jqBody = $jq("body");
var $jqFooter = $jq("#footer");
alert($jqFooter.width());
$jqFooter.css(
{'position':'absolute'
, 'left': '0px'
, 'top': '0px'
} );
alert($jqFooter.width());
$jqFooter.css(
{'position':'absolute'
, 'left': (($jqBody.width() - $jqFooter.width()) / 2)
+ 'px'
, 'top': ($jqBody.height() - $jqFooter.height()-10) +
'px'
} );
alert($jqFooter.width());
});
</
script>
</
head>
<body>
<p id="footer">x<br/>y
</
body>
</html>
The first alert shows the body width (in my case 1428), then I apply a
dummy positioning and the second alert shows the actual width (in my
case 8). The last positioning can correctly determine the width.
- Images do not have this problem.
- Placing it in a div does not make a difference.
- Reselecting the node every time does not make a difference.
Why is the width not determined correctly? This happens in both IE8,
Chrome 2, Safari 4, and Firefox 3.