|
|||||||
New to SitePoint Forums? Register here for free!
|
 |
|
|
Thread Tools | Display Modes |
Jul 7, 2009, 18:18
|
#1 |
|
SitePoint Member
Join Date: Jul 2009
Posts: 5
|
Textbox position and size changing
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. There is a 4px indent that appears only for the textboxes and not the password boxes. 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. Anyone have any idea why this is happening and how to sort it? I've tried negative margins but that didn't seem to work...
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: HTML4Strict Code:
form_styles.css: CSS Code:
script.js JavaScript Code:
|
|
|
|
Jul 7, 2009, 18:24
|
#2 |
|
CSS Consultant/Ninja-I'm fast
  
Join Date: Oct 2008
Location: Whiteford, MD
Posts: 10,067
|
For one thing you don't have a doctype at the top of your file thus your pages are being rendered in quirks mode.
Adding this before your <html> should help the page along a bit. I'll take a better look if that doens't fix it  Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
|
|
|
|
Jul 7, 2009, 18:41
|
#3 |
|
SitePoint Member
Join Date: Jul 2009
Posts: 5
|
Aside from the general layout being generally screwed after the DOCTYPE addition (my fault obviously, I should have drafted up the code with the DOCTYPE in place), the textboxes are still shifting and shrinking when revealed.
Edit: Ok, I did a markup validation on validator.w3.org and solved all the errors it gave me, which has eliminated the indent that appeared before, but now the password fields are exactly 1px taller than the username field, and the textboxes when they are revealed are the same height as the username field (ie. they shrink by 1px when revealed). Could you also suggest how I might regain the layout I had prior to setting a DOCTYPE? It seems the CSS for my <label> tags is now being ignored. |
|
|
|
|
Jul 7, 2009, 18:57
|
#4 |
|
CSS Consultant/Ninja-I'm fast
Join Date: Oct 2008
Location: Whiteford, MD
Posts: 10,067
|
Hi, I took your code and used it in a variety of browsers. I don't see what 4px indent you are talking about..BTW top,right,bottom, and left all only apply when an element either has position:relative/absolute/fixed applied. Your left:20px; you set does nothing.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><style>
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;
}
</style>
<script type="text/javascript">
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";
}
}
</script>
</head>
<body>
<!-- REGISTRATION FORM -->
<div id="stylized" class="myform">
<form id="form" name="form" method="post" action=#>
<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>
|
|
|
|
|
Jul 7, 2009, 19:02
|
#5 |
|
SitePoint Member
Join Date: Jul 2009
Posts: 5
|
(Read edited post above)
|
|
|
|
|
Jul 7, 2009, 19:08
|
#6 |
|
CSS Consultant/Ninja-I'm fast
Join Date: Oct 2008
Location: Whiteford, MD
Posts: 10,067
|
1) I tried hte code I had and with teh JS I couldn't get any fields to show or anything to happen. I probably need the live version as it is dependant to your site.
2) With the validation I would need updated code. But better yet, I reallllyyyyyyy need a site to look at so I can use the JS and really see what you are talking about. The local crap I can make looks nothing like what you are seeing. |
|
|
|
|
Jul 7, 2009, 19:25
|
#7 |
|
SitePoint Member
Join Date: Jul 2009
Posts: 5
|
Updated and validated code, works fine in IE 8.0 (haven't checked other browsers yet), aside from my problem with the password fields being a pixel taller than the textboxes (note that I've had to remove the DOCTYPE in the following code along with the xmlns attribute of the <html> tag because the forum won't let me post a link). The DOCTYPE was for XHTML 1.1 and the code validated for XHTML 1.1:
Code:
<html>
<head>
<style type="text/css">
body
{
font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
}
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;
}
.fieldContainer label
{
display: inline;
font-weight: bold;
text-align: right;
width: 170px;
left: 20px;
float: left;
}
#stylized .small
{
color: #666666;
display: inline;
font-size: 11px;
font-weight: normal;
text-align: right;
width: 170px;
left: 20px;
float: left;
}
#stylized input
{
display: inline;
font-size: 14px;
padding: 0px 2px;
border: solid 1px #AACFE4;
width: 200px;
margin: 0px 0 0px 10px;
position: relative;
}
#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: 12px;
font-weight: bold;
}
#stylized .checkBox
{
margin: 0;
}
#stylized .fieldContainer
{
margin-bottom: 25px;
margin-top: 15px;
}
.hiddenPassword
{
display: inline;
position: relative;
font-size: 12px;
padding: 4px 2px;
border: solid 1px #AACFE4;
width: 160px;
margin: 0px 0 0px 10px;
}
</style>
<script type="text/javascript">
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";
}
}
</script>
<title>Password Field Test</title>
</head>
<body>
<!-- REGISTRATION FORM -->
<form id="form" method="post" action='#'>
<div id="stylized" class="myform">
<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:170px;float:left">Hide password?</span> <input type="checkbox" id="hidePassword" name="hidePassword" value="1" checked="checked" onclick="togPwdMask();" style="border:none; margin:0"/>
</div>
<div class="fieldContainer">
<label>
Confirm Password
</label>
<span id="pass2"> <input type="password" name="password2" id="password2" /></span>
<span id="hidden2"> <input type="text" id="passwordTxt2" name="passwordTxt2" class="hiddenPassword" style="display:none"/></span>
</div>
<button type="submit">Register</button>
<div class="spacer"></div>
</div>
</form>
</body>
</html>
Update: My issue doesn't seem to occur in FF 3.0, so perhaps it's isolated to IE 8.0. |
|
|
|
|
Jul 8, 2009, 10:57
|
#8 |
|
SitePoint Member
Join Date: Jul 2009
Posts: 5
|
No luck?
|
|
|
|
|
| Bookmarks |
«
Previous Thread
|
Next Thread
»
| Thread Tools | |
| Display Modes | |
Linear Mode
|
|
|
All times are GMT -7. The time now is 13:32.