Form Formatting Individual li items Using CSS

HTML & CSS
1

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:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <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="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
				<script src="jquery.form.js" type="text/javascript"></script>
				<script src="form.js" type="text/javascript"></script> 
		</head>
    <body>
        <div id="contact_form"> <!--begin container -->
         <div class="message"><div id="alert"></div></div>
				 <form method="post" action="http://capnhud.host22.com/formmail.php" 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="http://capnhud.host22.com/sampleform3.html" type="hidden"> 
							<ul>
										<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>
								</ul>
						</form>
				</div> <!--end container-->
       
    </body>
</html>

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;
}
2

replace this in your css


#verify{
margin-left:125px;
}
#verify li {
width: 100px;
}
#verify input{
width:200px;
}
#sub{
margin-left:125px;
}
#sub input{
width:75px;
}
#myForm li p{
margin-left:125px;
}

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.

vineet

3

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

4

you are welcome

vineet