Sent by Michiel van der Blonk on 10 February 2006 19:07
For long I have been looking for the easiest way to create forms
without tables. I found several methods:
- floating
- position:absolute
- display:inline-block & display:-moz-inline-box
All come with their own caveats and problems. The floating is usually
considered the "best". However, it's not easy to align the input's under
each other.
The problem is usually that even if I give the label a width, it is not
used by the browser, since it is inline, so it has to be made floating.
Then when resizing the font the floating elements start shifting, and
everything messes up.
Recently I found out that if I give the label a little bit of padding,
or an invisible border (color same as background) that the inputs are
suddenly aligned correctly in both IE and FF.
look at the difference between:
form {width:20em}
label {float:left;width:10em;margin-bottom:1em;}
input {float:left;}
and
form {width:20em}
label {float:left;width:10em;margin-bottom:1em;padding:1px}
input {float:left;}
for this html
<form action="">
<label>Name</label><input>
<label>Address</label><input>
<label>Email</label><input>
</form>
I explained my methods here:
http://michiel.wordpress.com/2006/02/09/floating-forms/ with a link to a
sample page.
I know that it works. I just would like to know why this works. I am
also very much open to alternative ways to create tableless forms.
Michiel
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
