On 2/10/06, Michiel van der Blonk <[EMAIL PROTECTED]> 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. 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.
I think it is related to <label> being an inline element, and
therefore width not being valid for it. While floating it turns it
into a block element, some browsers develop bugs, particularly IE,
which are overcome when borders are defined (drawing borders forces
the rendering engine to calculate a width). It may be related to the
IE concept of "haslayout()"
Explicitly declaring display:block on label may be another fix.
--
Richard Grevers, New Plymouth, New Zealand
Hat 1: Development Engineer, Webfarm Ltd.
Hat 2: Dramatic Design www.dramatic.co.nz
______________________________________________________________________
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/
