title: Label Error in css
body: <p>I have a form of textboxes with validation.</p>
  
  <p>It is working fine if we click the save button first time it showing correctly. But once if we fill the text boxes and then remove the text from text boxes it is error message is getting displayed on text boxes. please see this fiddle:</p>
  
  <p><a href="http://jsfiddle.net/9fYxb/2/" rel="nofollow">http://jsfiddle.net/9fYxb/2/</a></p>
  
  <p>CSS:</p>
  
  <pre><code>#field
  {
    margin-left: .5em;
    float: right;
  }
  #field, label
  {
    float:left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
  }
  br
  {
    clear: both;
  }
  input
  {
    border: 1px solid black;
    margin-bottom: .5em;
    width: 72px;
  }
  input.error
  {
    border: 1px solid red;
  }
  label.error
  {
    position:fixed;
    Background-image:url("../images/unchecked.jpg");
    background-repeat:no-repeat;
    padding-left: 20px; 
    margin-left: .3em;
    vertical-align:middle;
    background-color: #FFEBE8;  
    border: solid 1px red;
    width:210px;
    height:15px;
  }
  label.valid
  {
    position:absolute;
    Background-image:url("../images/checked.gif") ;
    background-repeat:no-repeat;
    padding-left: 20px; 
    margin-left: .3em;
    vertical-align:top;
    background-color:White;
    border:none;
    width:1px;
    height: 16px;
  }
  </code></pre>