PDA

Click to See Complete Forum and Search --> : Dimensions of password fields changing

d.hatch75
07-07-2009, 05:05 PM
I'm currently coding a registration page for a website and am having some difficulty with a function I've added in that reveals the text in a password field. Basically, I have a checkbox that is checked by default, and when unchecked will hide the password fields (two fields, one for confirmation), copy their values into currently hidden textboxes, then display the textboxes in their place. The function works absolutely fine. However, there is an issue with the margins of the textboxes which I can't explain.

I'm currently on a box with only IE 8.0 installed (yes, I know, but this is only for testing purposes), so this may be an issue only in IE. The easiest way to understand my problem is to try the code yourself. Please ignore the spacing of the files, it's because I've cut parts of them out for the purpose of posting the relevant code here. And don't worry about any redundancy in the CSS, I'm going to sort that out later.


index.html:
<html>
<head>
<link rel="stylesheet" href="form_styles.css" />
<script type="text/javascript" src="script.js"></script>
</head>



<body>




<!-- REGISTRATION FORM -->

<div id="stylized" class="myform">
<form id="form" name="form" method="post" action=null>


<div class="fieldContainer">
<label>
Username
</label>
<input type="text" />
</div>


<div class="fieldContainer">
<label>
Password
</label>
<span id="pass1"> <input type="password" name="password1" id="password1" /></span>
<span id="hidden1"> <input type="text" id="passwordTxt1" name="passwordTxt1" style="display:none" /></span>
<br /><span class="small">Minimum of 8 characters</span>



<br /><span style="text-align:right;width:160px">Hide password?</span> <input type="checkbox" id="hidePassword" name="hidePassword" value="1" checked="checked" onclick="togPwdMask();" style="border:none"/>



<div class="fieldContainer">
<label>
Confirm Password
</label>
<span id="pass2"> <input type="password" name="password2" id="password2" autocomplete="off" /></span>
<span id="hidden2"> <input type="text" id="passwordTxt2" name="passwordTxt2" autocomplete="off" class="hiddenPassword" style="display:none"/></span>
</div>







<button type="submit">Register</button>
<div class="spacer"></div>

</form>
</div>




</body>

</html>


form_styles.css
body
{
font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}

p, h1, form, button
{
border: 0;
margin: 0;
padding: 0;
}

.spacer
{
clear: both;
height: 1px;
}

.myform
{
margin: 0 auto;
width: 500px;
padding: 14px;
}

#stylized
{
border: solid 2px #b7ddf2;
background: #ebf4fb;
}

#stylized h1
{
font-size: 14px;
font-weight: bold;
margin-bottom: 8px;
}




#stylized label
{
display: inline;
font-weight: bold;
text-align: right;
width: 170px;
left: 20px;
margin-top: 10px;
}



#stylized .small
{
color: #666666;
display: inline;
font-size: 11px;
font-weight: normal;
text-align: right;
width: 170px;
}





#stylized input
{
display: inline;
position: relative;
font-size: 12px;
padding: 0px 2px;
border: solid 1px #AACFE4;
width: 160px;
margin: 0px 0 0px 10px;
}



#stylized button
{
clear: both;
margin-left: 180px;
width: 125px;
height: 25px;
background: #666666 url(img/button.png) no-repeat;
text-align: center;
line-height: 25px;
color: #FFFFFF;
font-size: 11px;
font-weight: bold;
}

#stylized .fieldContainer
{
margin-bottom: 15px;
}


.hiddenPassword
{
display: inline;
position: relative;
font-size: 12px;
padding: 4px 2px;
border: solid 1px #AACFE4;
width: 160px;
margin: 0px 0 0px 10px;
}


script.js
function togPwdMask() {
var oPwd1 = document.getElementById("password1");
var oPwd2 = document.getElementById("password2");
var oTxt1 = document.getElementById("passwordTxt1");
var oTxt2 = document.getElementById("passwordTxt2");
var oMask = document.getElementById("hidePassword");
if (oMask.checked) {
oPwd1.value = oTxt1.value;
oPwd2.value = oTxt2.value;
oPwd1.style.display = "inline";
oPwd2.style.display = "inline";
oTxt1.style.display = "none";
oTxt2.style.display = "none";
document.getElementById("pass1").style.display = "inline";
document.getElementById("pass2").style.display = "inline";
document.getElementById("hidden1").style.display = "none";
document.getElementById("hidden2").style.display = "none";
}
else {
oTxt1.value = oPwd1.value;
oTxt2.value = oPwd2.value;
oPwd1.style.display = "none";
oPwd2.style.display = "none";
oTxt1.style.display = "inline";
oTxt2.style.display = "inline";
document.getElementById("hidden1").style.display = "inline";
document.getElementById("hidden2").style.display = "inline";
document.getElementById("pass1").style.display = "none";
document.getElementById("pass2").style.display = "none";
}
}
d.hatch75
07-07-2009, 05:20 PM
Oh, and please ignore the 'null' action of the <form>, should've been '#'.
d.hatch75
07-07-2009, 05:25 PM
Sorry, I'm unable to edit posts apparently so I'll have to post again. The textboxes that are revealed are also 1px less in height than their equivalent password fields; this is in addition to the 4px indent they gain from somewhere that I don't want. Anyone have any idea how this is happening and how to sort it? I've tried negative margins but that didn't seem to work...