rocknbil - 6:56 pm on Jun 26, 2008 (gmt 0)

This is a good question. :-) I've wondered if I'm doing this "the best way."

Before CSS, all we had was the values for size and columns (in textarea) to set our form widths. This indeed answers the question - being fixed-width system default fonts, these always insured the width was appropriate for the input:

<input type="text" name="email" size="65" maxlength="65" value="">

Unfortunately, this renders differently in different browsers, so the end result looks like some climbing step on Devil's Peak. Additionally it's affected by the end user's font settings.

------
-------
----
---------
---

with CSS, we can do neat(er) and better formatted forms by controlling the size, independent of the size attribute:

<input type="text" class="wide_field" name="email" size="65" maxlength="65" value="">

<style type="text/css">
.wide_field { width: 500px; }
</style>

So with a little nudging and tweaking, our forms now at least align properly and look (almost) the same in all browsers:

---------
---------
---------
---------

Tweaked a little more, using floats, semantic HTML elements, and "row divs," we can also eliminate tables as a method to control the layout of the forms.

The largest problem with my solution: there's a great deal of argument by CSS purists against pixel or other absolute sizing for any elements at all. The preferred method is to use em's or percentages and allow the end user's settings to take over. At a target resolution and text size setting this works equally as well, but when resized, things reflow or overlap, bringing us back to Picasso-like abstract constructs!

------
--------
------
--- ----

Although pixel sizing is not respected uniformly by all browsers, it seems to be the less of all evils.

What do you all think?