Labels and label styles not working on my form.

Question

I am trying to style my form with labels and the label styles don't seem to work correctly.

Here is what my html looks like for the form:

 <h1 class="allpages">Questions or Concerns about Compliance Issues?</h1>
 <h3>We welcome all compliments and constructive criticism!</h3>

    <form class="webform" action="http://hsc.unm.edu/scripts/cfmailform/cfmailer.cfm" method="post">
    <!--Required hidden operators--> 
    <input name="recipient" type="hidden" value="bfloran@salud.unm.edu" />
    <input name="subject" type="hidden" value="HSC Compliance Office Email Form" />
    <input type="hidden" name="cc" value="mgwilson@salud.unm.edu" />

    <input name="redirect" type="hidden" value="http://hsc.unm.edu/admin/compliance/ThankYOU.html" /> <!-- Field validation for the user -->

 <!-- Our form in HTML -->

 <label for "name">Your Name (optional):</label>


 <br />
 <input name="name" type="text" id="name" value="" /><br />
 Your E-mail (Optional):<br />
 <input name="mail" type="text" value="" />
 <br /> comment:<br /> <textarea name="comment" value="" ></textarea><br /> <br />     <input type="submit" value="Send" /> <br /> <input type="reset" value="Reset" /></div>

My css for this part looks like this:

 .allpages {text-align:center;color:#007a86;}
 h3{text-align:center;}
 .webform {background-color: #eeeeee; 
 width: 655px;  border: solid;
  border-color: #e9e9e9;margin-left: auto; margin-right: auto; padding: 15px 0px 15px   17px;}
.webform .label {display:inline-block; width:200px; vertical-align:top; text-align:right;}

Answer 1

label is not a class... it is a tag.

Working CSS for that piece:

.webform label { } /* see .label changed to label */

Also: Your elements were not laid out properly in HTML, some were not even labels.

---

Fixed fiddle: http://jsfiddle.net/digitalextremist/mt4jK/2/

---

Excerpt:

.webform label {
    width:200px;
   vertical-align:top;
    text-align:right;
    float: left
}

<label for="name">Your Name (optional):</label>
<input name="name" type="text" id="name" value="" />

Answer 2

You created a class selector to reference some tag with class=label