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/