Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Sep 2008
    Posts
    205
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question IE display problem

    I have a form that is validated upon submission and if there are any errors a label error is shown.

    The problem only occurs when there is an error in the nested fieldset. The label errors are supposed to show next to the input field. However, when, and only when, there is an error in the nested fieldset, the subsequent label errors, when shown, are displayed under the input field label rather then next to the input field itself.

    The above error only occurs in IE. In firefox, regardless of where/when the errors occur - in the nested fieldset or not - the labels are correctly displayed.

    Below are my css and html code, if some can tell me how to fix the problem so that IE shows the label errors correctly in all situation, it would be appreciated. Thanks.

    Code:
    form.registration {
    margin-bottom: 10px;
    }
    
    form.registration legend {
    padding: 0 2px;
    font-weight: bold;
    color:#FF6600;
    }
    
    form.registration label {
      display: inline-block;
      line-height: 1.8;
      vertical-align: top;
    }
    form.registration fieldset ol {
      margin: 0;
      padding: 0;
    }
    form.registration fieldset li {
      list-style: none;
      padding: 5px;
      margin: 0;
    }
    form.registration fieldset fieldset {
      border: none;
      margin: 3px 0 0;
    }
    form.registration fieldset fieldset legend {
      margin-left: -10px;
      padding: 0 0 5px;
      font-weight: normal;
      color:#000000;
    }
    form.registration fieldset fieldset label {
      display: block;
      width: auto;
    }
    form.registration em {
      font-weight: bold;
      font-style: normal;
      color: #f00;
    }
    form.registration label {
      width: 160px; /* Width of labels */
    }
    form.registration fieldset fieldset label {
      margin-left: 150px; 
    }
    
    label.error{ 
    background: transparent url(images/cancel.png) no-repeat scroll left; 
    font-weight:normal;
    color:red;
    text-align:left;
    width:140px; 
    padding-left:25px;
    display:inline; 
    }
    Code:
    <fieldset>
    <legend>Registration</legend>
    <ol>
    	<li>
        	<label for="firstName">First Name<em>*</em></label><input type="text" name="firstName" id="firstName"/>
            <label class="error" for="firstName" id="firstNameError"></label>
        </li>
        <li>
        	<label for="lastName">Last Name<em>*</em></label><input type="text" name="lastName" id="lastName" />
            <label class="error" for="lastName" id="lastNameError"></label>
        </li>
    	<fieldset>
        	<legend>Domestic or International?<em>*</em></legend>
            <label class="error" for="memberType" id="memberTypeError">This field is required.</label>
            <label><input type="radio" name="memberType" id="domestic" value="domestic"/>Domestic</label>
            <label><input type="radio" name="memberType" id="international" value="international" />International     </label>
    	</fieldset>
        <li>
        	<label for="email">Email<em>*</em></label><input type="text" name="email" id="email" />
            <label class="error" for="email" id="emailError"></label>
        </li>
        <li>
        	<label for="password">Password<em>*</em></label><input type="password" name="password" id="password" />
            <label class="error" for="password" id="passwordError"></label>
        </li>
        <li>
        	<label for="confirmPassword">Confirm Password<em>*</em></label><input type="password" name="confirmPassword" id="confirmPassword" />
            <label class="error" for="confirmPassword" id="confirmPasswordError"></label>
        </li>
    <center><p><input type="submit" name="signUp" value="Sign-Up"/></p></center>
    </ol>
    </fieldset>

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,849
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Can we have a link to your page ot the complete markup, including DOCTYPE.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder
    Join Date
    Sep 2008
    Posts
    205
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Attached is the complete page. Note: I did use jQuery for some of the code.
    Attached Files Attached Files


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •