bayross
asked on
How do I ensure that the size of input boxes are equal in a form across all browsers?
I've created a registration form built using DIV's. It has in-iine styling. The form renders perfectly across Opera 9.X, Firefox 3.X, Chrome 1.X.
However in IE 8.X two input boxes (type="password" render with incorrect widths.
I've included the code spec below and a grab of the IE 8 screen.
Can anyone help me fix this please?
However in IE 8.X two input boxes (type="password" render with incorrect widths.
I've included the code spec below and a grab of the IE 8 screen.
Can anyone help me fix this please?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tableless Form Using DIVs</title>
<link rel="stylesheet" type="text/css" href="regform.css" />
<style type="text/css">
@charset "utf-8";
/* CSS Document */
/* Styling HTML Elements */
html, body
{
padding:0;
border:0;
font-family:Arial, Helvetica, sans-serif;
font-size:10pt;
font-weight:normal;
color: #000000;
}
legend{
border:1px solid #000000;
padding:5px;
margin-left:15px;
background-color:#FFFFCC;
}
/* Main DIV which wraps the Registration form */
.wrapper
{
width: 500px;
padding: 20px;
height: auto;
}
/* DIV holding the labels*/
.lbls
{
width: 230px;
margin: 0px;
padding: 0px;
float: left;
text-align: right;
}
/* DIV holding the de objects*/
.deObjs
{
width: 230px;
margin: 0px;
padding: 0px;
float: right;
text-align: left;
}
.clr
{
clear: both;
padding: 4px;
}
</style>
</head>
<body>
<center>
<div class="wrapper">
<form name="frmRegister" method="post" action="#">
<fieldset>
<legend> Member Registration </legend>
<div class="lbls">Your name <strong>:</strong></div>
<div class="deObjs"><input type="text" value="" title="Please enter your name" name="txtName" id="txtName" maxlength="250" size="30" /></div>
<div class="clr"></div>
<div class="lbls">E-Mail <strong>:</strong></div>
<div class="deObjs"><input type="text" value="" title="Please enter a EmailID" name="txtEmail" id="txtEmail" maxlength="250" size="30" /></div>
<div class="clr"></div>
<div class="lbls">Password <strong>:</strong></div>
<div class="deObjs"><input type="password" value="" title="Please enter a password" name="txtPassword" id="txtPassword" maxlength="250" size="30" /></div>
<div class="clr"></div>
<div class="lbls">Confirm password <strong>:</strong></div>
<div class="deObjs"><input type="password" value="" title="Please confirm your password" name="txtConfirmPassword" id="txtConfirmPassword" maxlength="250" size="30" /></div>
<div class="clr"></div>
<div class="lbls">Select a user type <strong>:</strong></div>
<div class="deObjs">
<select name="optRegUserType" id="optRegUserType" tabindex="6" title="Please select a user type" >
<option value="1" selected="selected" >Data Entry Operator</option>
<option value="2">Programmer</option>
<option value="3">Business Associate</option>
<option value="4">Network Partner</option>
<option value="5">Administrator</option>
</select>
</div>
<div class="clr"></div>
<div class="lbls"> </div>
<div class="deObjs"><input type="checkbox" name="i_agree" value="1" /> I agree to the terms & conditions</div>
<div class="clr"></div>
<div class="lbls"> </div>
<div class="deObjs"><input class="button" type="submit" name="btnSubmit" value="Send Information" /></div>
<div class="clr"></div>
<div class="clr"></div>
</fieldset>
</form>
</div>
</center>
</body>
</html>
ASKER
This is the code you suggested:
input[type=text][size=30],
input[type=password][size=
width: 200px;
}
I added this to my CSS file but made the following changes in the CSS code:
input[type=text], input[type=password]{
width: 200px;
}
i.e. I deleted the [size=30] from the CSS code spec as well as the the HTML code
<input type="text" value="" title="Please enter your name" name="txtName" id="txtName" maxlength="250" size="30" />
was changed to:
<input type="text" value="" title="Please enter your name" name="txtName" id="txtName" maxlength="250" />
I did this because I though that the in-line size specified in HTML would override the CSS width instructions.
Did I do right?? OR did I goof up??
By the way when I did this change another issue has arisen.
A larger gap between the Labels and Input boxes has arisen.
I've grabbed the screen and attached it to this comment.
Please give me your opinion.
regformwithgap.jpg
input[type=text][size=30],
input[type=password][size=
width: 200px;
}
I added this to my CSS file but made the following changes in the CSS code:
input[type=text], input[type=password]{
width: 200px;
}
i.e. I deleted the [size=30] from the CSS code spec as well as the the HTML code
<input type="text" value="" title="Please enter your name" name="txtName" id="txtName" maxlength="250" size="30" />
was changed to:
<input type="text" value="" title="Please enter your name" name="txtName" id="txtName" maxlength="250" />
I did this because I though that the in-line size specified in HTML would override the CSS width instructions.
Did I do right?? OR did I goof up??
By the way when I did this change another issue has arisen.
A larger gap between the Labels and Input boxes has arisen.
I've grabbed the screen and attached it to this comment.
Please give me your opinion.
regformwithgap.jpg
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks Kravimir. I've understood what you are saying. I'll build my skills on this. Very grateful for your help. Regards, Ivan Bayross
I suggest you use actual <label> elements. More info: http://www.456bereastreet.com/archive/200711/use_the_label_element_to_make_your_html_forms_accessible/
Open in new window