Log-In size shifts upon screen re-size

When I resize the screen the user-name box/field and password box/field stay proportionate, but the log-in box/field no longer looks lined up horizontally (see attached). When it’s 100% screen, the boxes are the same height and are lined up horizontally, but log-in changes upon 90% or 80% etc… Do you have any ideas why log-in changes?

Here’s the code:

<form action="../login.php" method="post" accept-charset="UTF-8" class="middletext"
<p>
<input type="text" name="u_name_login" id="u_name_login" value="USERNAME" onfocus="if (this.value=='USERNAME') {this.value=''; this.style.color='#696969';}" >
<input type="text" name="p_login" id="p_login" value="PASSWORD" onfocus="if (this.value=='PASSWORD') {this.value=''; this.style.color='#696969';}" >
<input type="submit" name="login2" id="login2" value="LOG IN" />
<input type="hidden" name="submitted" value="yes" />
</p>
</form>

and

#p_login {
width: 164px;
height: 20px;
margin: 0px 0px 0px 1px;
padding: 0px 0px 0px 5px;
color:#474747;
line-height: 17px;
border-style:solid;
border-width: 1px 0px 1px 0px;
border-color:#474747;
background-color:#000000;
}


#login2 {
width: 85px;
height: 22px;
margin:0px 0px 0px 1px;
padding: 0px 0px 0px 0px;
color:#474747;
line-height: 17px;
border-style:solid;
border-width: 1px 0px 1px 0px;
border-color:#474747;
background-color:#000000;
}

There might be something else that is affecting your submit button’s width. Could you please post the source code and CSS for the entire page? Having just this snippet isn’t very helpful. For example, do you have any widths set to the containers that hold this form and its parts?

Thanks for your reply. Here’s more:

<div class="HeaderLogin">
<form action="../login.php" method="post" accept-charset="UTF-8" class="middletext"
<p>
<input type="text" name="u_name_login" id="u_name_login" value="USERNAME" onfocus="if (this.value=='USERNAME') {this.value=''; this.style.color='#696969';}" >
<input type="text" name="p_login" id="p_login" value="PASSWORD" onfocus="if (this.value=='PASSWORD') {this.value=''; this.style.color='#696969';}" >
<input type="submit" name="login2" id="login2" value="LOG IN" />
<input type="hidden" name="submitted" value="yes" />
</p>
</form>
<!--[onload;block=div;when [var.show_login_box]=1;comm]-->
</div>
.HeaderLogin {
width:451px;
height:22px;
font-size: 13px;
font-family: Arial;
padding: 0px 0px 0px 0px;
margin: 55px 120px 10px 0px;
float:right;
}

Any further help will be appreciated

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.