Solved

How do I ensure that the size of input boxes are equal in a form across all browsers?

Posted on 2009-05-02
4
199 Views
Last Modified: 2013-12-08
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?
<!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">&nbsp;</div> 

                <div class="deObjs"><input type="checkbox" name="i_agree" value="1" /> I agree to the terms &amp; conditions</div>

           		<div class="clr"></div>

            

           

            	<div class="lbls">&nbsp;</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>

Open in new window

regform.jpg
0
Comment
Question by:bayross
  • 2
  • 2
4 Comments
 
LVL 42

Expert Comment

by:David S.
ID: 24288858
You can use attribute selectors to set the width with CSS.

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/
input[type=text][size=30],

input[type=password][size=30] {

  width: 200px;

}

Open in new window

0
 

Author Comment

by:bayross
ID: 24288932
This is the code you suggested:  

input[type=text][size=30],
input[type=password][size=30] {
  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
0
 
LVL 42

Accepted Solution

by:
David S. earned 300 total points
ID: 24288946
No, CSS generally overrides HTML styles. (And styles set with the style attribute are CSS and override other CSS styles.)

I suggested the use of the attribute selector for both the type and size so that it would only affect those 4 fields.

The gap between the labels and form controls looks smaller in this second screen shot?
0
 

Author Closing Comment

by:bayross
ID: 31577286
Thanks Kravimir.  I've understood what you are saying.  I'll build my skills on this.  Very grateful for your help.  Regards, Ivan Bayross
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Button Css BootStrap 2 35
.php tree directory? 5 56
Apply tab index in forms 6 33
how to avoid redundand ajax calls 5 6
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

910 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now