My CSS-based HTML form layout looks awful in Internet Explorer?

Good idea. Putting everything in spans instead of styling the form elements directly allowed me to fix the overly large preview button in Internet Explorer. However, it didn't fix anything else, and it misaligned the textarea and made the form fields start slipping under the menu bar again for small browser widths, even in Mozilla. I tried divs instead of spans. No luck there either. :-(

Hmmm.... well, I would say that sometimes a table is a better choice than forcing everything into CSS (I think about "if you have a hammer, everything looks like a nail"). The forms on my Web sites are built around tables for layout... last I checked, the CSS standard didn't deprecate everything in the world of HTML, so I think it's still legal and legit to use tables for this sort of thing, Elliotte. :-)

The Web Accessibility Guidelines at http://www.w3.org/TR/WAI-WEBCONTENT/#gl-table-markup are quite clear that table markup should be reserved for genuine tables, not for layout. I know I could go back to tables; but, damn it, this should be possible.

Here's how I do mine, and it works pretty well. I came across this technique on someone elses site, so I can't take the credit. ( I think it was quirksmode.org?) Anyways, here's the code:

/* CSS */
.form label, .form input, .form textarea, .form select, .form .form_text {
display:block;
float:left;
margin-bottom:5px;
}
/* the .form_group class allows you to put multiple form items in a single div, as if it were a row. */
.form .form_group select, .form .form_group .form_text, .form .form_group input {
margin-right:5px;
}
.form label {
text-align:right;
width:100px;
margin-right:15px;
}
/* this little line of code here is essential, it makes everything work. */
.form br {
clear:both;
}

[!-- HTML --]
[!-- I've changed all tag brackets because the HTML markup wouldn't show up on the page --]
[div class="form"]
[label for="userName"]User Name:[/label]
[br /]
[input name="userName" id="userName" type="Text" required="Yes" message="User Name Is A Required Field" size="30" maxlength="20"]
[br /]
[br /]
[label for="password"]Password:[/label]
[br /]
[input name="password" id="password" type="Password" required="Yes" message="Password Is A Required Field" size="30" maxlength="20"]
[br /]
[label for="submit_btn"][/label]
[br /]
[div class="form_group"]
[input type="Submit" value="Continue" name="submit_btn" id="submit_btn"]
[input type="Button" value="Home" onclick="Javascript:window.location='index.html'"]
[/div]
[/div]

Basically what this does is floats all form labels on the left, but text aligns them right. Then, all of the form elements are floated left, so the scoot over to the edge of the labels. This works because all of the labels are given a predifined width, so everything is nicely aligned. Making the line breaks clear:both is essential in that, since floats don't automatically clear, the next form element is forced to position itself on the next available row of space.

Hope this helps.

That's a very interesting solution, Dan. Thanks for sharing it. Can you also share the URL of the actual Web page that includes this form? Thanks.

You can find a write up of this technique at http://www.quirksmode.org/css/forms.html

Three caveats:

1. it won't work in IE 5 (and presumably below) [fine, of course in Opera and Firefox/Mozilla]

2. you must remember *not* to wrap your labels around their associated inputs [which I, at least, was taught to do in HTML 101]

3. In a practical case, where you might have two columns, say a nav column floated to the left and then fluid a main content column, which contains your form elements, in the center of the rest of the page, you need to wrap the form elements inside their own float container (a fieldset would work). If you don't do that, all the rest of the form elements will drop down below the floated navigation bar after the first clearing line break.

I'm not much of a web designer and am horrible with code, but I am a traditional print designer. I'm working on my website in Dreamweaver MX 2004 for OSX. Everything seems to be okay when viewed on a Mac, however when viewed on IE for PC all the txt is alligned center instead of flush left. Any suggestions? Again I apolgoze, I am not much of a coder.

I'm not much of a web designer and am horrible with code, but I am a traditional print designer. I'm working on my website in Dreamweaver MX 2004 for OSX. Everything seems to be okay when viewed on a Mac, however when viewed on IE for PC all the txt is alligned center instead of flush left. Any suggestions? Again I apolgoze, I am not much of a coder.

i have a similiar problem and my layout that i created for work will work fine in all browsers but the IE.. i am not sure what to do or why it does this.. and I read above what you have commented but is that the coding only for making the forms?