CSS/Border/NS bug!

I do a simple login page, which looks like this:
<div id="lr1" style="visibility:hidden; position:absolute; display:block; background-color:#804000; border:thick ridge #802000; padding:20px; left:1px; top:1px;">
...a form for login...
</div>
<div id="lr2" style="visibility:show; position:absolute; display:block; background-color:#804000; padding:10px; left:1px; top:500px;">
...a hlink for requesting new user...
</div>

and some js code to arrange those in page onLoad:
calcw = (window.innerWidth - width) / 2;
eval("document.lr1.left = " + calcw + ";");
eval("document.lr1.visibility = 'show';");
...

It totally messes up when I add "border" styles to the first div (tried them one by one to find this). Problem is, I cannot access document.lr1 and lr2 objects any more after it messes them.
I added alert popups every other line, and the layer object simply dissapears.
The first one moves ok, but the second layer moves _realtively_ to the first one!

Page works fine in IE with or without borders.