Divs flash every time the page loads.

I have a small div box that opens with a couple input fields for a user to log into the site.
It works correctly, open & close - processing the form ...
Looks good, and i'm happy with it so far ...

EXCEPT

every time you request a page, the 'hidden' div tags flashes verify briefly.
It should be completely hidden until someone clicks on sign in.

Here's the html:
 

<!-- SignIn Hidden Window // Begin Code -->
<div id="sign_in_cover">
	<div id="sign_in_1">
		<table width="380" height="325">
			<tr height="50"><td></td></tr>
			<tr height="200"><td valign="middle"><center>
		<div id="sign_in_main">
			<form name="sign_in_form" method="POST" action="index.php">
				<table width="350" cellpadding="0" cellspacing="0">
					<tr>
						<td colspan="3"><center><img src="<?php echo DOMAIN.DS; ?>images/sign_in_title.png" width="306" height="39" alt="Sign In Title" style='margin-top:20px;'></td>
					</tr>
					<tr height="43">
						<td width="140" align="right">Cell Phone:</td>
						<td width="10" background="<?php echo DOMAIN.DS; ?>images/newuser_dots.png"></td>
						<td width="200" align="left"><input name="cell_phone" onkeyup="javascript:this.value=this.value.replace(/[^0-9\-]/g, '');"  class="sign_in_input" value="" maxlength="14"></td>
					</tr>
					<tr height="43">
						<td align="right">Password:</td>
						<td width="10" background="<?php echo DOMAIN.DS; ?>images/newuser_dots.png"></td>
						<td align="left"><input type="password" name="password" class="sign_in_input" onkeyup="if(event.keyCode==13){document.forms['sign_in_form'].submit();}" value=""></td>
					</tr>
					<tr>
						<td colspan="3" align="center" valign="middle">
							<a href="javascript: document.forms['sign_in_form'].submit(); ">
								<img src="<?php echo DOMAIN.DS; ?>images/sign_in_button.png" width="70" height="28" alt="Sign In To TextRooms" style="margin-top:10px;">
							</a>
						</td>
					</tr>
				</table>
			</form>
				<hr style="color:#666;width:300px;height:1px;">
			<table width="80%">
				<tr>
					<td style="font-size:11px;">
						<a href="<?php echo DOMAIN.DS; ?>signup-family-account">New User, Register Here !</a><br>
						Invited to a room, Log In Here !
					</td>
					<td valign="middle">
						<div id="sign_in_1_handle">
								<a href="#" id="sign_in_close"><img src="<?php echo DOMAIN.DS;?>images/sign_in_close.png" width="45" height="30" alt="Sign In Close"></a>&nbsp;
						</div>
					</td>
				</tr>
			</table>
		</div>
		</td></tr><tr height="25"><td align="right">
		</td></tr><tr height="50"><td></td></tr></table>
	</div>
</div>
<!-- SignIn Hidden Window // End Code -->

Select allOpen in new window

Here's the css:
 

/* SignIn Div Tag */
#sign_in_main{
	height:270px;
	width:390px;
	background:url('../images/sign_in_bk.png') no-repeat center;
}
#sign_in_main_sm{
	height:270px;
	width:390px;
	background:url('../images/sign_in_bk_sm.png') no-repeat center;
}
.sign_in_input{height:34px;width:200px;border:0px;padding-left:5px;background:url('../images/sign_in_feild_bk.png') no-repeat;color:#666;font-family:'lucida sans';}

/* SignIn Transparency */
#sign_in_cover{
	position:absolute;
	background-color:rgba(0,0,0,0.7);
	height:100%;
	width:100%;
	min-height:1000px;
	overflow:hidden;
}
#sign_in_1{
	position: absolute;
	left:50%;
	margin-left:-175px;
	top:90px;
	width:380px;
	z-index: 50;
	height:325px;
}
#sign_in_1_handle {
	padding:2px;
	text-align:center;
	font-weight:bold;
	color: #FFFFFF;
	vertical-align:middle;
}
#sign_in_1_content {
	padding:5px;
}
#sign_in_close{
	float:right;
	text-decoration:none;
	color:#FFFFFF;
}

Select allOpen in new window

Here's the jQuery:
 

<script type="text/javascript">
		$(document).ready(function()
		{
			
				
			$('#sign_in_1_form').ajaxForm({
				target: '#content',
				success: function() 
				{
					$("#sign_in_cover").hide();
				}				
			});			
			$("#sign_in_cover").hide();
						
			$('#sign_in_button').click(function()
			{
				$("#sign_in_cover").show();
			});
			
			$('#sign_in_close').click(function()
			{
				$("#sign_in_cover").hide();
			});
		});
	</script>

Select allOpen in new window

The jQuery is located IMMEDIATELY after the body tag, the html follows immediately after the jQuery.

Thanks Experts.
Let me know if I've missed anything ...