So I'm developing an employment form and for some reason I cannot click certain text boxes on my form, not matter how bad I want to. For days now, I've been tabbing through the fields. Only tonight when I went to send the form did I realize the issue.
The Form is at: http://propersky.net/waverly/application.php Basic Problem: Scroll Down to Work Qualifications and try to click any of the text boxes in that section. They're all locked! If you scroll down to the bottom of the screen and check the educaton section, you can't click in 'high school diploma' but you can click in 'course of study'. If you examine the markup, they markup is similar for both: <li> <label for="high_school_diploma">High School Diploma:<em><img src="assets/images/required_star.gif" alt="required" /></em></label> <input type="text" name="high_school_diploma" id="high_school_diploma" class="text" value="" /> </li> <li> <label for="high_school_course_of_study">Course of Study:<em><img src="assets/images/required_star.gif" alt="required" /></em></label> <input type="text" name="high_school_course_of_study" id="high_school_course_of_study" class="text" value="" /> </li> My CSS is sparse at best and based off of this site point tutorial: http://www.sitepoint.com/article/fancy-form-design-css/ @charset "utf-8"; /* CSS Document */ .text, .textarea { width: 20em; } div { background: #fff; display: inline-block; padding: 1em; margin-bottom: .5em; border: 1px solid #bfbab0; } div.alt { background: #FAF5E7; display: inline-block; padding: 1em; } div h3 { margin: -.4em 0 0 6em; padding-bottom: 1em; } fieldset { position: relative; float: left; clear: both; width: 100%; margin: 0 0 -1em 0; padding: 0 0 1em 0; border-style: none; border-top: 1px solid #BFBAB0; background-color: #F2EFE9; } legend { padding: 0; color: #000; font-weight: bold; } legend span { position: absolute; left: 0.74em; top: 0; margin-top: 0.5em; font-size: 135%; } fieldset ol { margin: 2.5em 1em 0 1em; list-style: none; } fieldset li { float: left; clear: left; width: 100%; padding-bottom: .5em; } fieldset.submit { float: none; width: auto; padding-top: 1.5em; padding-left: 12em; background-color: #fff; } fieldset.alt { background-color: #E6E3DD; } label { float: left; width: 12em; margin-right: 1em; text-align: right; } label em { position: relative; left: .7em; top: 0; } fieldset fieldset { margin-bottom: -2.5em; border-style: none; background-color: transparent; background-image: none; } fieldset fieldset legend { width: 667px; margin-left: 0; font-weight: normal; top: 0; text-decoration: none; } fieldset fieldset legend em{ margin-left: .5em; } fieldset fieldset ol { position: relative; top: -1.5em; margin: 2em 0 0 13em; padding: 0; } fieldset fieldset label { float: none; width: auto; margin-right: auto; } strong { clear: left; padding-left: .2em; color: #C00; font-size: 85%; font-weight: normal; } Everything in this form is just about ready to go except I can't click the boxes? Does anyone have any idea what might be causing this? I've been googling all night to no avail. Muchos Gracias! Jim --~--~---------~--~----~------------~-------~--~----~ -- You received this because you are subscribed to the "Design the Web with CSS" at Google groups. To post: [email protected] To unsubscribe: [email protected] -~----------~----~----~----~------~----~------~--~---
