Today ive entered the realm of form design and ive hit a snag…
On this page -
http://www.pauserefreshment.co.uk/coffee-machine-brochure-request.html
I encountered a problem trying to align the input boxes shown in the screen shot above.
This bit of css is the best i could muster:
#contact_details input {
margin-left:40px;
}
But its shunting everthing including the text along. Is this because I need to float the input boxes to get them out of line with the label tags?
Any insights welcome…
You want them at the LAST word/line and not the first?!? I’m trying to visualize that and all I can think is WHY?
No I didn’t mean to use it - I was just explaining the mechanism 
(However zoom is still safer that using the height:1% hack as mentioned by Suzy in the comments here. But like you I dislike using it because it makes me feel dirty :))
I understand it, but I don’t use zoom in my code.
: )
For IE you could just do this:
p {
[B]display:inline;
zoom:1.0;[/B]
background:red;
height:100px;
width:100px;
margin:10px;
}
However that won’t work in other browsers and when you add display:inline-block for other browsers that kills IE because the element’s display is no longer inline and fails.
For IE to work the element must be display:inline and have haslayout (a valid haslayout trigger for an inline element).
Display-inline-block sets haslayout in IE and once set it stays set. Therefore in another rule you set display:inline otherwise if you did it in the same rule or before the display:inline-block would be over-written.
Clear as mud
I’ve only gotten IE to work by later setting the element to display: inline.
#div {
display: -moz-inline-box;
display: inline-block;
}
*+html #div {display: inline;}
*edit ah n/m you explain that in your article as well.
I’ve tended to float my labels, but I wonder if this inline-block way will mean less (HTML) code? And, do we still have the issue with long, wrapping labels and their inputs riding up, or can we use vertical-align: bottom to hold the inputs down?
<label for=“foo”><span>Foo Foo Really Long label is longer than the set width, causing it to wrap to two or more lines</span> <input type=“text” id=“foo” name=“foo”></label>
label span {
display: inline-block;
width: 10em;
}
label input {
vertica-align: bottom;
}
?
But if you try to use it on block elements like <div> or <li>, you can expect it to go pear shaped
You can actually make it work in IE6/7 for block elements by first setting the element to display:inline and then applying a haslayout trigger that works for inline elements (such as zoom). Documented here in my article.
inline-block is your friend!
The best article I’ve read on form design is http://www.alistapart.com/articles/prettyaccessibleforms/ - in a nutshell, key things are:
You can set label {display: inline-block; width:10em;} and it will work in IE6+, Firefox 3+ and all other major browsers. Obviously, 10em is just pulled out of the air and might not be right for your design 
If you want it to work in Fx2, you’ll need to add “display: -moz-inline-box;” before “display: inline-block;”, and that way Fx2 will get the proprietary instruction and all well behaved browsers will get the right one.
(Note that IE6/7 only support display:inline-block on elements that are usually inline, which happily <label> is. But if you try to use it on block elements like <div> or <li>, you can expect it to go pear shaped)
Use tables it would help. Each name is in one line and each box is in one line.
Brilliant thanks your solution fixed it
Because that’s where my eyes are when I’m done reading the label text. And because that’s how they do it in print (for that very reason).
My question still remains:
if your label gets long enough to wrap (try Dutch or Swedish words), does inline-block somehow allow us to use vertical-align (or something else) in some way to keep the input down at the last word of the label?
Who? Wha’d I miss? Only people I see using p’s in forms is the w3c in their form examples… and I chalk that one up to, the standards were new and 1998 was a heady year for teh innerwebz.
Ooph that markup is painful to look at… Though I have to laugh at the placement of inline-block by others here on div or suggesting other block-level tags.
I’d lose ALL of those internal div for a simple line-break after each input, and then make the LABEL inline-block (as stevie D said)… which will work in IE just fine since it will fallback to the default inline state which it incorrectly lets you set width on anyways.
<form action="brochure.php" method="post">
<h1>"Order a brochure"</h1>
<fieldset class="contactDetails">
<legend><span>Please enter your contact details</span></legend>
<label for="name">First Name</label>
<input type="text" name="name" id="name" />
<br />
<label for="secondname">Second Name</label>
<input type="text" name="secondname" id="secondname" />
<br />
<label for="email">e Mail</label>
<input type="text" name="email" id="email" />
<br />
<label for="company">Company name</label>
<input type="text" name="company" id="company"/>
<br />
<label for="address">Address Line 1</label>
<input type="text" name="address" id="address"/>
<br />
<label for="address2">Address Line 2</label>
<input type="text" name="address2" id="address2"/>
<br />
<label for="postcode">Postcode</label>
<input type="text" name="postcode" id="postcode"/>
</fieldset>
<div class="brochures">
<h2>Select the brochure(s) you want posted</h2>
<fieldset>
<legend><span>
Traditional & bean to cup<br/>
"Ideal for restaurants and cafes"
</span></legend>
<label for="laspaziale">La Spaziale</label>
<input type="checkbox" name="laspaziale" id="laspaziale" />
<label for="lacimbali">La Cimabli M1</label>
<input type="checkbox" name="lacimbali" id="lacimbali" />
<label for="Koro">Koro</label>
<input type="checkbox" name="koro" id="koro" />
<label for="franke">Franke Flair</label>
<input type="checkbox" name="franke" id="franke" />
</fieldset>
<fieldset>
<legend><span>
Instant<br/>
"Ideal for offices"
</span></legend>
<label for="vision400">Vision 400</label>
<input type="checkbox" name="vision400" id="vision400" />
<label for="darenth">Darenth</label>
<input type="checkbox" name="darenth" id="darenth" />
</fieldset>
<fieldset>
<legend><span>
Filter<br/>
"Ideal for most set ups"
</span></legend>
<label for="mondo">Mondo</label>
<input type="checkbox" name="mondo" id="mondo" />
<label for="marco">Marco qwikbrew</label>
<input type="checkbox" name="marco" id="marco" />
</fieldset>
<!-- .brochures --></div>
<div class="submitsAndHiddens">
<input type="submit" value="Order Brochure">
</div>
</form>
and for CSS:
.contactDetails label {
display:inline-block;
width:10em; /* or whatever you are setting for width */
}
Should work just fine all the way back to IE 5.0. There is ZERO reason for the DIV’s with ID’s, you have multiple obvious fieldsets, and for your actual question just apply the inline-block to the LABEL! Wasting time on DIV or P or any other extra container for no reason is exactly that, a waste of time.
Especially those of you talking about putting P in there – semantic markup does not mean slapping P tags around non-paragraph elements that already have semantic tags like LABEL on them.
Everybody seems to always have to try to do things the hard way… Well, could be worse, we could have had some dipshit chiming in to say put all that in a table or worse, abuse a definition list for it.