Sent by Michiel van der Blonk on 13 February 2006 15:03
Excellent post! Thanks. I updated the article and linked to your site.
Michiel
Ingo Chao wrote:
> Michiel van der Blonk wrote:
>
>> 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.
>>
>
> I'll try to discuss your test page
> http://test5.caribmedia.com/CSS/michiel/floating-forms.html
>
> (The following ascii art should align with fixed font size.)
>
>
>> look at the difference between:
>> form {width:20em}
>> label {float:left;width:10em;margin-bottom:1em;}
>> input {float:left;}
>>
>
> Because of the margin-bottom of 1em, the label is taller than the input.
> Apply a background color to see.
>
> |label| [input]
> | |
>
> Floats do hook, they float /up/ as high as possible (e.g. not higher
> than any preceding float [1]) . The subsequent label/input shows this:
>
>
> |label| [input]
> | | |label|
> | |
> [input]
>
>
> There is enough room for both the labels side by side:
> 2 x 10em = 20em = width of the form
>
> There is no room left for the second input; therefore, this float /drops/ .
>
>
>
>
>> 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>
>>
>>
>
>
> The box model adds the padding to the width: the overall width of label is
> 1px + 10em + 1px
>
> But the form still has a width of 20em only. There is not enough room
> for floating up of the subsequent label, the label itself drops.
>
> |label| [input]
> | |
>
> |label| [input]
> | |
>
>
> A similar effect can be achieved with the property "clear" on label [2].
>
> Ingo
>
> [1] some older browser will float up as high as possible regardless of
> preceding floats.
> [2] IE/Win has problems with float+clear on the same element.
>
>
______________________________________________________________________
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/
