Month: February 2006

floating forms

Posted on by michiel

demo page and complete report

I learned several advanced and quick methods of styling layout without tables, mainly used for forms, where fields should always be aligned:

inline block

label {display:-moz-inline-box; _display: inline-block}

This effectively pushes the fields to a fixed position on the right of the label, and works in almost all browsers

absolute positioning

Absolute positioning of the forms gives you the possibility to shift the fields to the right using relative positioning, as follows

form {position:relative}
input {position:absolute;left:10em}

float

Last but not least there is floating. This is usually complex because

  1. the height of labels and fields needs to be equal for correct floating/alignment, and
  2. the width of label+height should (almost) equal the form width. There should be room for margin/padding/rounding errors/font-size setting (in case of pixel widths)

    3. form {width: 20em}
label {float:left; line-height:1.5em; margin-bottom:.2em; width: 9.5em}
input {float:left; line-height:1.5em; width: 9.5em}

    This can however be fixed by adding a little border or padding to the label, assuming both have the same font size, like this:

    form {width: 20em}
label {float:left; margin-bottom:1em; width: 10em; padding-right:1px}
input {float:left}

    In this solution you can play around with margins as much as you like without messing up the display. If anybody can explain to me why this works please let me know.

    update: Ingo Chao explained why it works. The width of the label is exactly half of the form’s width. By adding that 1 pixel, two labels cannot go side by side and thus the next label in row will drop. In the original scenario (no widths, or no extra pixel) the first label moves up, but leaves space on the left, where the next label doesn’t fit, and so it moves down. That doesn’t sound very clear, but I’ll see if I can put an image here soon.

    update2: using label {clear:left} fixes the problems too.

FireFox and the endless growing select (impossible resize)

Posted on by michiel

August last year I found a bug in FireFox 1.07 which I reported to the CSS-d list.

I promised Big John a long time ago I would write an article about a rare FireFox bug I found. In the meantime (several months, I know) the bug is probably fixed in FF 1.5. Hang on while I check it. Yes, it is fixed.

The FF growth hormone

Here’s how to reproduce it in FF: create a file with the following contents.


<form action="">
<select name="category" style="height: 1.75em">
<option>Testing Select Box Resize so make it really really long</option>
</select>
</form>

That’s simple, huh? After this open the file in FireFox and resize your browser window until it covers the select. Then resize it again, making the window bigger. As you resize, the select element resizes with the window, making the select wider (but not higher).

Then try making the window smaller. You’ll notice by looking at the scrollbar below that the select is becoming even bigger as you make the window smaller. There is no stopping it!

I am just mentioning it here for completeness sake, this bug has long been squashed by the excellent FireFox team.