I'm running Firefox 2 on Kubuntu Edgy.

I've implemented a pretty simple "ajax lightbox".

For the positioning of the popup, I wanted to use:

var popup = $j("popup");

popup.css("left", Math.round($j("body").width() / 2 - popup.width() / 2));

popup.show();

However, the call to popup.width() is causing some of the page divs to loose their padding.

I've had to do the following

var popup = $j("#popup");

popup.css("left", Math.round($j("body").width() / 2 - parseInt(popup.css("width")) / 2));

popup.show();

The popup structure is

<div id="#popup">stuff</div>

It is a direct descendant of the body tag. I do not understand how calculating its width can mess with other page elements that are in a separate DOM hierarchy.