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. 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/
I know that it works. I just would like to know why this works.
Michiel
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
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/
