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:

Code:
<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:

Code:
#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;

}