HTML button moving on page refresh? - php

Question

So I noticed this bug the other day where the button for the log in will move to a different location when the page is refreshed. However, if page is loaded from link, then it stays in correct position. I am drawing a blank as to why this would do this, here is the link and the code to my site.
Website: http://www.clanrippgaming.net/
HTML:
<div class="login_box">
<li>
<?php
define('IN_PHPBB', true);
$phpbb_root_path = (defined('PHPBB_ROOT_PATH')) ? PHPBB_ROOT_PATH : './forums/';
$phpEx = substr(strrchr(__FILE__, '.'), 1);
include($phpbb_root_path . 'common.' . $phpEx);
$user->session_begin();
$auth->acl($user->data);
if (!$user->data["is_registered"]) {
?>
<div class="logged_out">
<form action="./forums/ucp.php?mode=login" method="post" enctype="multipart/form-data">
<input type="text" placeholder="username" style="height:20px;" maxlength="20" size="17px" name="username" />
<input type="password" placeholder="password" style="height:20px;" maxlength="50" size="16px" name="password" />
<div class="button">
<input type="image" name="login" value="Log in" src="images/login.png" width="28px" onmouseout="this.src='images/login.png'" onmouseover="this.src='images/loginhover.png'" onmouseout="t">
</div>
<div class="logged_out_txt">
<br>
<input type="checkbox" name="autologin" id="autologin" />
<font size="2" color="#BDBDBD">
Remember Me
<div class="forgot">
<font size="2">
Forgot Password?
</font>
</div>
<div class="New">
<br>
New Member? Register Now!
</div>
</div>
<input type="hidden" name="redirect" value="./../index.php" />
</form>
</div>
<?php
}
else {
echo "<div class='logged_in'>";
echo "<div class='welcome'>" . $user->data['username'];
"</div>";
echo "<br><div class='account'>Logout</div>";
echo "<div class='account'>Messages</div>";
echo "<div class='account'>My Account</div>";
echo "</div>";
}
?>
</li>
</div>
CSS:
.login_box {
float: right;
width: 330px;
height: 75px;
margin-top: 7px;
margin-right: -5px;
list-style: none;
}
.login_box li {
}
.login_box li a {
color: #BDBDBD;
text-decoration: none;
padding-left: 60px;
padding: 0px;
}
.logged_in {
background-image: url(images/bg_login2.png);
border: 3px solid#000000;
outline: 1px solid#BDBDBD;
width: 304px;
height: 55px;
margin-left: -2px;
padding-top: 5px;
}
.logged_out {
margin-right: 38px;
}
.logged_out_txt {
margin-top: -20px;
}

Answer 1

Update the following changes to your CSS classes and it will be alright.
CSS
.logged_out {
margin-right: 22px;
position: relative;
}
.button {
position: absolute;
top: 0;
right:0;
}
Remove display:inline; float:right; margin-top: 0; and margin-left: 4px from .button

Answer 2

Looking at your website I suggest making the following changes to your CSS:
.button {
display: inline-block;
float: right;
}
.logged_out {
margin-right: 22px;
}