Problems With CSS Form Layout

[DDubya]

Good evening,

Site:

http://www.dryleague.com/newsite/register.aspx

CSS:

http://www.dryleague.com/newsite/css/main.css

I'm trying to layout my form completely with CSS and I've hit a snag. I would like all the labels in a single column and the controls in another, side-by-side. My drop-downs aren't displaying as I'd like and I'm sure it has to do with their widths relative to the width of the container but I can't figure out how to make this all work. I would like to keep the widths as they are now.

This problem occurs in both IE7 & FF3.

Any suggestions as to how I could get this to look the way I'd like it to?

[drhowarddrfine]

You need to be more specific because I see everything lined up and I don't see any drop downs at all.

[DDubya]

That's odd... the link above works fine for me.

Here's a screenshot:

[TheServant]

Do you mean the dropdown for gender or the reason label and dropdown are not working? Or both?

[DDubya]

I'd need the gender/sex dropdown to appear beside the 'Sex' label. It's currently appearing to the left of the Age dropdown.

Then I need the 'Reason' label to appear below the 'Sex' label with the Reason dropdown to the left the 'Reason' label.

[Dormilich]

Opera 9.63 / WinXP is totally screwed up....

[David Laakso]

Opera 9.63 / WinXP is totally screwed up....

Is there an operating system/browser on the face of the earth that is rendering this as intended?

Time to re-think the construct me thi/m/k.

[DDubya]

I added a few more fields which made things even worse. I'll probably just do the layout with tables... as blasphemous as it may be to say..

It is tabular data... the data's just entered by users.
(that's how I'll sleep at night)

[TheServant]

That's fine, but come back to it in a month or so and try again. Trust me, it can be difficult but you can get rid of tables. I tried and tried and gave up, but after coming back and doing a re-vamp of my site I am table-less and using Strict HTML which was not possible about 3 months ago.

[DDubya]

I began this site with an "absolutely no tables" mindset. I was bound and determined to do everything with CSS and I think I've succeeded for the most-part.

However, my feelings have changed slightly as CSS seems to be more pain than gain when trying to produce tabular form layouts, in the following ways:

1) Form layouts are not easily maintained
If I decide to add a new row (label & field) and my label happens to be too wide, the entire layout goes out of whack. Then I'm into the .css file making minute adjustments to get it right, while table cells will automatically expand or wrap without changing everything around it. Vertical positioning is also must easier using tables and CSS even accounts for this (vertical-align).

2) Code is 'less' reusable
Pretty much for the same reason above. It may still be reusable but the over-head required to set everything up is much greater.

Keep in mind, I've used CSS for everything else in my form:

/* BOF: CONTACT FORM */
table.form-contact {
    margin: 40px auto 0px auto;
    width: 480px;
}

table.form-contact label {
    margin-right: 10px;
    text-align: right;
    font-weight: bold;
    color: #069;
}

table.form-contact label.notRequired {
    font-style: italic;
    font-weight: normal;
}

table.form-contact td {
    text-align: right;
    vertical-align: top;
}

table.form-contact td+td {
    text-align: left;
}

table.form-contact input, textarea, select {
    margin: 0px 0px 10px 0px;
    border: solid 1px #ABB;
}

table.form-contact input, textarea {
    width: 250px;
    padding: 2px;
    font-family: inherit;
    font-size: 90%;
}

table.form-contact textarea {
    width: 357px;
    height: 90px;
}

table.form-contact input:focus, select:focus, textarea:focus {
    border: solid 1px #069;
}

table.form-contact input.btnSubmit {
    margin-right: 6px;
    width: 80px;
    padding: 0px;
    float: right;
    border-width: 2px;
    background-color: #FFF;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 85%;
    color: #069;
}

table.form-contact div.errorSummary {
    margin: 10px 0px 10px 100px;
    text-align: left;
}
/* EOF: CONTACT FORM */

In my personal opinion, I can use the CSS above with any 2-column input form in any site/application. The only things I'll ever need to change are the colours... possibly the margins.

I don't know if I'll try this again... unless you can convince me.. ;)

Just because something's more difficult doesn't always make it better.

That said, thanks to all for their input... and sorry for ranting..

[TheServant]

If all you want is a 2-column layout, I have used this website to have much better forms. Honestly, tables slow down the page load slightly, but it's really about coding properly. It is hard to break old habits, but it is quicker and more robust if done properly. Check out the resource and let me know if it helps.

[Stomme poes]

Here are a few more-- you'll want to look for the more complex CSS form examples out there because it's easy to style a form when none of the labels are long enough to wrap : )

http://imaginekitty.com/formXHTML.html

http://gtwebdev.com/workshop/forms/form.php (both use same technique of floated span inside the label)

One problem with labels that wrap is the inputs will want to stay as much near the top as possible. So far I've been manually setting them back down to the end of the question, but this is not acceptable in a truly dynamic form. But I haven't stopped looking.

[shawnhenry]

There are several different ways in which you can lay out a form. The method you choose depends upon how long the form is, its purpose, how often it will be used by each person who has to fill it out, and, of course, the general aesthetics of the web page.

It's generally considered most efficient to have one form element per line, with the lines stacked sequentially one on top of the other, as most Western-language web pages are designed to scroll vertically rather than horizontally. This allows users to follow the path to completion easily and focus their attention on entering one piece of data at a time.

For each form element in a left-to-right reading system, it's logical to position the corresponding label in one of three ways:

* directly above the form element
* in a separate left column, left-aligned
* in a separate left column, right-aligned

Each of these approaches has its own advantages and its own look, so consider these options when you're deciding how to lay out a form for a particular page.

Labels that are positioned directly above a form element have been shown to be processed most quickly by users. The compact grouping between label and element reduces eye movement by allowing the user to observe both simultaneously -- here's an excellent article published by UXmatters. However, this type of positioning is rather utilitarian, and isn't the most aesthetically pleasing layout. It also has the disadvantage of occupying the most vertical space of the three layouts, which will make a long form even longer. Generally, top-positioned labels work well for short forms that are familiar to the user -- see the comment form in Figure 3, which is from a previous incarnation of the Dress For Dialogue web site.
--------------------------------------------------------------------------------
corporate recognition awards
Murphy for congress