Font-size in forms: textarea different from input?

HTML & CSS
1

I am creating forms dynamically using PHP and letting CSS do the formatting. (Much easier that way).

But I have encountered a puzzle.

I have an input text field with a size of 50, and a textarea with cols set to 50. They have different widths when rendered by the browser and the textarea font-size is less than input text font-size.

I can’t see why. Perhaps someone can spot the cause?

Here is the HTML:


<div id="content">
   <form action= "cp3.php" method="post" name="menu_form">
       <h2>Edit Photograph Data</h2>
      <input name="choice" type="hidden" value="editphotosform" />
         <fieldset>
      <br /><img src="thumbs/20040603-Lucy-0023-web.jpg" width="150" height="150" alt="Lucy" /><br />

      <label for="alt_text[1]">Alt Text</label>
      <input id="alt_text[1]" name="alt_text" type="text" size="50" maxlength="50" value=Lucy  /><br />
      <label for="caption[1]">Caption</label>
      <textarea id="caption[1]" name="caption" rows="5" cols="50"  ></textarea><br />
   </fieldset>
  <fieldset>
      <br /><img src="thumbs/20040603-Lucy_3376-done.jpg" width="150" height="150" alt="Lucy" /><br />
      <label for="alt_text[2]">Alt Text</label>
      <input id="alt_text[2]" name="alt_text" type="text" size="50" maxlength="50" value=Lucy  /><br />

      <label for="caption[2]">Caption</label>
      <textarea id="caption[2]" name="caption" rows="5" cols="50"  ></textarea><br />
   </fieldset>

    <fieldset>
      <input type="submit" name="submitmain" value="Proceed" />
   </fieldset>
  </form>
</div>

and the CSS affecting this:


#content{

	margin-left: 160px;

	margin-right: 10px;

	margin-bottom: 10px;

	font-size: 18px;

	font-weight: bold;

	width: 720px;

	color: #FFFFFF;

}

form{

	padding: 10px 20px 20px 20px;

	border-width: 5px;

	border-style: outset;

	border-color: #B87333;

	background: #000000;

	color: #FFFFFF;

	margin: 30px 40px 40px 50px;

}



form label{

	float: left;

	width: 50%;

	margin: 5px 5px 5px 5px;

}



form input{

	float: left;

	background-color: #B1EDD2;

	margin: 8px 5px 5px 5px;

}



form select{

	float: left;

	background-color: #B1EDD2;

	margin: 8px 5px 5px 5px;

}



form textarea{

	float: left;

	background-color: #B1EDD2;

	margin: 8px 5px 5px 5px;

}
2

The markup is malformed futhermore you cannot have an ID with the “[” character in the value plus you have duplicated ID values. Though I suspect both those ID anomalies were just for the test page prior to the PHP? Albeit I saw no difference in sizes regarding the text or the form’s boxes, etc.

3

Hi,

If you are talking abut some versions of IE then you need to explicitly set the font-size of each form control as some will not inherit from the parent (neither will the font-family).

For widths of inputs and textareas use css to supply width/height where needed and the results will be better than relying on html attributes (obviously for textareas just leave the rows and cols attributes in place as they are required but the css will over-ride it a sit takes precedence over attributes).

You will also need to control padding as well as they may have different defaults but avoid changing padding on selects.

In the end you will never get consistency between each browsers version as form controls are difficult to style at the best of times so don’t worry if one browsers is slightly bigger than another. To be honest its best not to play with heights (even line-height can have a detrimental effect in webkit depending on element) or vertical padding either but just leave form controls at their default. Widths in most cases are ok though.