The problem is that your CSS is horrible. You are floating things when you
don't need to. You are using assigning some margins and paddings as
negative when you don't need too. And you are incorrectly using position
absolute.
*Change 'fieldset' and 'legend span' to match the rules below
*fieldset {main.css (line 22)
background-color:#F2EFE9;
border-style:solid none none;
border-top:1px solid #BFBAB0;
margin:0;
padding:0;
position:relative;
width:100%;
}
legend span {main.css (line 38)
font-size:135%;
margin-top:0.5em;
top:0;
}
After doing the above changes, you will notice that you can click on all the
boxes.
Your page, however, does not look the same as it did earlier. Which means
you need to think about it again and try something different.
Here is a link with some fieldsets' and legend's styled for you:
http://www.designmeltdown.com/chapters/Forms/Part2.aspx
If you look at Sample 6, it seems that if you want to position the text
inside of legend like that, you need to get rid of the legend tag and make
the tag an H1, H2, etc.
If you have specific problems, feel free to ask.
Good luck!
On Thu, Jan 8, 2009 at 9:10 PM, jimjawn <[email protected]> wrote:
>
> 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
>
> >
>
--
-Richard Aday
--~--~---------~--~----~------------~-------~--~----~
--
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]
-~----------~----~----~----~------~----~------~--~---
