Form Formatting Individual li items Using CSS

I have pretty much gotten this form to look as I would like, but the bottom verify image textarea and submit button which are li items do not seem to be affected by the styles that I am trying to apply. Is it not possible to target a particular list item with CSS?

Here is the html:

        <title>Sample Form Using Tectite Formmail and Jquery</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <meta name="Description" content="description">
        <meta name="Keywords" content="tags">
        <meta name="Copyright" content="2009">
        <meta name="Robots" content="index,follow">
        <link href="form.css" rel="stylesheet" type="text/css">
       	<script src="" type="text/javascript"></script>
				<script src="jquery.form.js" type="text/javascript"></script>
				<script src="form.js" type="text/javascript"></script> 
        <div id="contact_form"> <!--begin container -->
         <div class="message"><div id="alert"></div></div>
				 <form method="post" action="" name="SampleForm" id="myForm">
        		<input name="env_report" value="REMOTE_HOST,REMOTE_ADDR,HTTP_USER_AGENT,AUTH_TYPE,REMOTE_USER" type="hidden">
						<input name="recipients" value="prtaddress" type="hidden">
						<input name="conditions" value="something" type="hidden">
						<input name="derive_fields" value="realname=FirstName + LastName, email=EmailAddr1" type="hidden">
						<input name="subject" value="more demands" type="hidden"/>
						<input name="good_template" value="samplegoodtemplate.php" type="hidden">
						<input name="bad_template" value="sampleerrortemplate.php" type="hidden">
        		<input name="bad_url" value="fmbadhandler.php" type="hidden">
						<input name="this_form" value="" type="hidden"> 
										<li><label for="firstname">First Name:</label>
												<input name="FirstName" type="text"></li>
										<li><label for="lastname">Last Name:</label>
												<input name="LastName" type="text"></li>
										<li><label for="Email">Email:</label>
												<input name="EmailAddr1" type="text"></li>
										<li><label for="verifyemail">Verify Email:</label>
												<input name="EmailAddr2" type="text"></li>
										<li><label for="message">Message:</label>
												<textarea id="mesg" name="Message" rows="10" cols="73"></textarea></li>
										<li id="verify"><img src="verifyimg.php" alt="Image verification" name="vimg" id="vimg">
												<input type="text" size="12" name="imgverify"></li>
										<li><p>If you cannot read the above image, click for a new one&nbsp;<br>
            						<button onclick="NewVerifyImage(); return false;">New image</button></p></li>
									  <li id="sub"><input value="Submit" type="submit"></li>
				</div> <!--end container-->

and CSS:

/*contact_form layout  */
#contact_form {
background: transparent url() repeat scroll 0 0;
margin:45px 0 0 -55px;
position: absolute; /*was inherit  */ 
width: 600px;
left: 275px; /* is not original property */ 
#contacthd {
font-family: "Lucida Grande", "Lucida Sans", Arial, Helvetica, sans-serif;
position: relative;
left: -55px;
#contact_form label, #contact_form input {
font: normal 12px / 1.2em Verdana, Geneva, Corbel, sans-serif;
float: left;
width: 400px;
margin: 0 0 1em;
#mesg textarea {
width: 150px;
height: 100px;
float: left;
margin: 0 0 1em;
overflow: auto;
#contact_form li {
list-style: none;
padding: 10px;
font: normal 12px / 1.2em Verdana, Geneva, Corbel, sans-serif;
#contact_form label {
text-align: left;
width: 105px;
padding: 0 20px 0 0;
.message {
background: #f5f5f5;
font: normal 12px / 1.2em Verdana, Geneva, Corbel, sans-serif;
left: 50px; /* was 135 */ 
padding: 10px 0 0 5px;
position: relative;
width: 525px;
height: auto;
.message li {
color: #ff0000;
margin:-15px; /* add to decrease spacing btwn li items in message */ 
.message ul {
line-height: 0;
margin: 0;

#verify li {
position: right;
width: 100px;
#sub li {
width: 75px;

replace this in your css

#verify li {
width: 100px;
#verify input{
#sub input{
#myForm li p{

and this in your textarea code. your textarea cols count was more than the width.

<textarea id="mesg" name="Message" rows="10" cols="47"></textarea>

they all will get align.


I see I was not correctly specify those elements in the css. Thx for pointing out my errors.

you are welcome