CSS problem: multi-column data form won't vertically align

[javaguy@sbcglobal.net]

I have a data entry web application that is formatted heavily
with tables. Having learned a bit of CSS, I'm hoping to rewrite
this using <div> tags. But I have run into a formatting problem
that keeps me from a solution. I'm hoping for some trick.

Assume that "label_a" is a <label> tag and "INPUT_A" is
an <input> tag. A sample of my current web page is:

<table>
<tr><td>label_a </td><td>INPUT_A</td>
<td>label_x</td><td></td></tr>
<tr><td>label_b </td><td>INPUT_B</td>
<td>label_y</td><td></td></tr>
<tr><td>label_c </td><td>INPUT_C</td>
<td>label_e</td><td>INPUT_E</td></tr>
<tr><td>label_d </td><td>INPUT_D</td>
<td>label_f</td><td>INPUT_F</td></tr>
</table>

rendered like this:

label_a INPUT_A label_x
label_b INPUT_B label_y
label_c INPUT_C label_e INPUT_E
label_d INPUT_D label_f INPUT_F

I use tabindex attributes to make the focus traverse A-B-C-D-E-F.

I want to rewrite this using <div> tags, as so:

<div>
<div style="float:le ft;">
<div>label_a INPUT_A</div>
<div>label_b INPUT_B</div>
<div>label_c INPUT_C</div>
<div>label_d INPUT_D</div>
</div>
<div style="float:ri ght;">
<div>label_x</div>
<div>label_y</div>
<div>label_e INPUT_E</div>
<div>label_f INPUT_F</div>
</div>
</div>

If I write things this way I don't have to use tabindex at all!

But this doesn't quite give me the visual effect I want. It
turns out that the height of the <label> elements is less than
that of <input> or <select> elements, and so the right column
doesn't line up with the left column. The controls in the right
column are all about a third of a line higher up on the page.

label_a INPUT_A label_x & _y
label_b INPUT_B label_e INPUT_E
label_c INPUT_C label_f INPUT_F
label_d INPUT_D

("label_x & _y" is not the actual result, but is part of a
crude approximation to show that my initial <div> design yields
a display that doesn't look aligned *or* professional)

It turns out this is a general problem. If I structure things
with nested tables instead of nested divs:

<table>
<tr>
<td><table id="left">. A, B, C, D..</table></td>
<td><table id="right"> x, y, E, F..</table></td>
</tr>
</table>

then I get the same sort of problem. The height of table "left"
is different than that of table "right" and so the lines in the
"left" table don't line up with those of the "right" table.

I know I could bottom align both tables / divs, That would work
if the two columns were meant to align at the bottom and had
identical elements from the bottom. But I'm trying to solve the
more general problem.

So.....is there a nice solution that I haven't yet considered?


Thanks for help,
Jerome.

[Jan Roland Eriksson]

Re: CSS problem: multi-column data form won't vertically align

On 3 Feb 2005 19:04:24 -0800, javaguy@sbcglob al.net wrote:
[color=blue]
>I have a data entry web application that is formatted heavily
>with tables. Having learned a bit of CSS, I'm hoping to rewrite
>this using <div> tags.[/color]

[...]

http://www.css.nu/articles/table-in-css.html

--
Rex

[javaguy@sbcglobal.net]

Re: CSS problem: multi-column data form won't vertically align

Jan Roland Eriksson wrote:[color=blue]
> On 3 Feb 2005 19:04:24 -0800, javaguy@sbcglob al.net wrote:
>[color=green]
> >I have a data entry web application that is formatted heavily
> >with tables. Having learned a bit of CSS, I'm hoping to rewrite
> >this using <div> tags.[/color]
>
> [...]
>
> http://www.css.nu/articles/table-in-css.html
>
> --
> Rex[/color]

Thanks for your reply. This site has examples of tables generated by
repeated use of div tags. The table is a div, each row is a div and
each cell (td) is a div. The cells also include paragraphs (<p>), but
perhaps that is overkill.

Anyways, because each row is included within a div the rows will always
line up. That is a straightforward replacement of <table>, <tr> and
<td> with <div>. But what it doesn't give me is freedom from tabindex.
Each embedded <input> will have to have a tabindex to control flow.
If I could generate the divs column first (the whole left column, then
the whole right column) and still have row alignment then I can get
what I was looking for in replacing a table with CSS.

I suppose another answer is to give each cell a too-large cell height
so that the rows line up. But I couldn't adapt to a user choosing a
very large font, for my too-large cell height might still be smaller
than the result of user font selection.

[Ali Babba]

Re: CSS problem: multi-column data form won't vertically align

javaguy@sbcglob al.net wrote:
[color=blue]
> Jan Roland Eriksson wrote:
>[color=green]
>>On 3 Feb 2005 19:04:24 -0800, javaguy@sbcglob al.net wrote:
>>
>>[color=darkred]
>>>I have a data entry web application that is formatted heavily
>>>with tables. Having learned a bit of CSS, I'm hoping to rewrite
>>>this using <div> tags.[/color]
>>
>>[...]
>>
>> http://www.css.nu/articles/table-in-css.html
>>
>>--
>>Rex[/color]
>
>
> Thanks for your reply. This site has examples of tables generated by
> repeated use of div tags. The table is a div, each row is a div and
> each cell (td) is a div. The cells also include paragraphs (<p>), but
> perhaps that is overkill.
>
> Anyways, because each row is included within a div the rows will always
> line up. That is a straightforward replacement of <table>, <tr> and
> <td> with <div>. But what it doesn't give me is freedom from tabindex.
> Each embedded <input> will have to have a tabindex to control flow.
> If I could generate the divs column first (the whole left column, then
> the whole right column) and still have row alignment then I can get
> what I was looking for in replacing a table with CSS.
>
> I suppose another answer is to give each cell a too-large cell height
> so that the rows line up. But I couldn't adapt to a user choosing a
> very large font, for my too-large cell height might still be smaller
> than the result of user font selection.
>[/color]


just made a collection of css tables, maybe you find something that fits
your needs.

http://homepage.hispeed.ch/zuzaniuk/test/csstable.html

[Christoph Paeper]

Re: CSS problem: multi-column data form won't vertically align

<javaguy@sbcglo bal.net>:[color=blue]
>[/color]
| label_a INPUT_A label_x
| label_b INPUT_B label_y
| label_c INPUT_C label_e INPUT_E
| label_d INPUT_D label_f INPUT_F[color=blue]
>
> Anyways, because each row is included within a div the rows will always
> line up. That is a straightforward replacement of <table>, <tr> and
> <td> with <div>.[/color]

And a reason not to do it.
[color=blue]
> But what it doesn't give me is freedom from tabindex.
> If I could generate the divs column first (the whole left column, then
> the whole right column)[/color]

Sadly, CSS follows HTML's row-centric table model very closely.
[color=blue]
> and still have row alignment then I can get
> what I was looking for in replacing a table with CSS.[/color]

In your case, doesn't setting 'line-height' (and perhaps 'height' and
'width') for 'label' and/or 'input' to a reasonable 'em' value help? At
least until there's a line break inside.

fieldset div {float: left; /*(max-)width: 50%;*/}
div label {display: block; width: 15em; line-height: 1.5em;}
label a {display: inline-block; width: 5em;}
/*for non-IE:*/
fieldset>div {display: table;} /*two floated CSS tables*/
div>label {display: table-row;}
label>a {display: table-cell;}
/*label>input{di splay: table-cell;} breaks Gecko: no input possible,
so let there be anonymous table-cells. */
/*MacIE + Safari?*/

<fieldset>
<div>
<label><a>a</a> <input type="text" name="A"></label>
<label><a>b</a> <input type="text" name="B"></label>
<label><a>c</a> <input type="text" name="C"></label>
<label><a>d</a> <input type="text" name="D"></label>
</div>
<div>
<label>x</label>
<label>y</label>
<label><a>e</a> <input type="text" name="E"></label>
<label><a>f</a> <input type="text" name="F"></label>
</div>
</fieldset>

Yes, the additional 'a' (or 'span' if you want) are very unfortunate.

--
The Hitchhiker's Guide to the Galaxy:
"The Universe, as has been observed before, is an unsettlingly big place,
a fact which for the sake of a quiet life most people tend to ignore."

[javaguy@sbcglobal.net]

Re: CSS problem: multi-column data form won't vertically align

Christoph Paeper wrote:[color=blue]
> <javaguy@sbcglo bal.net>:[color=green]
> >[/color]
> | label_a INPUT_A label_x
> | label_b INPUT_B label_y
> | label_c INPUT_C label_e INPUT_E
> | label_d INPUT_D label_f INPUT_F[color=green]
> >
> > Anyways, because each row is included within a div the rows will[/color][/color]
always[color=blue][color=green]
> > line up. That is a straightforward replacement of <table>, <tr>[/color][/color]
and[color=blue][color=green]
> > <td> with <div>.[/color]
>
> And a reason not to do it.
>[color=green]
> > But what it doesn't give me is freedom from tabindex.
> > If I could generate the divs column first (the whole left column,[/color][/color]
then[color=blue][color=green]
> > the whole right column)[/color]
>
> Sadly, CSS follows HTML's row-centric table model very closely.
>[color=green]
> > and still have row alignment then I can get
> > what I was looking for in replacing a table with CSS.[/color]
>
> In your case, doesn't setting 'line-height' (and perhaps 'height' and[/color]
[color=blue]
> 'width') for 'label' and/or 'input' to a reasonable 'em' value help?[/color]
At[color=blue]
> least until there's a line break inside.
>
> fieldset div {float: left; /*(max-)width: 50%;*/}
> div label {display: block; width: 15em; line-height: 1.5em;}
> label a {display: inline-block; width: 5em;}
> /*for non-IE:*/
> fieldset>div {display: table;} /*two floated CSS tables*/
> div>label {display: table-row;}
> label>a {display: table-cell;}
> /*label>input{di splay: table-cell;} breaks Gecko: no input[/color]
possible,[color=blue]
> so let there be anonymous table-cells. */
> /*MacIE + Safari?*/
>
> <fieldset>
> <div>
> <label><a>a</a> <input type="text" name="A"></label>
> <label><a>b</a> <input type="text" name="B"></label>
> <label><a>c</a> <input type="text" name="C"></label>
> <label><a>d</a> <input type="text" name="D"></label>
> </div>
> <div>
> <label>x</label>
> <label>y</label>
> <label><a>e</a> <input type="text" name="E"></label>
> <label><a>f</a> <input type="text" name="F"></label>
> </div>
> </fieldset>
>
> Yes, the additional 'a' (or 'span' if you want) are very unfortunate.
>
> --
> The Hitchhiker's Guide to the Galaxy:
> "The Universe, as has been observed before, is an unsettlingly big[/color]
place,[color=blue]
> a fact which for the sake of a quiet life most people tend to[/color]
ignore."


What? You've placed the entire content of a "cell" into a <label>?
I'll have to learn more about that technique. In my case the "e" and
"f", etc., are just identifiers for the <input> field, so they won't
have any links in them. Is there a reason this couldn't be <label> e
<input /></label> ?

I *could* use a "reasonably large" line height, which works for
"reasonable " font selections. Not ideal, but...

Aside from that, I'm beginning to think that the structure of the data
input form is part of the document. That is, the data field are
important, but so is their spatial relationship (going down this
column, then the other column). If that philosophy is followed using a
<table> to enable/enforce the relationship isn't that bad an idea.
Comments?

(another way of saying it is redefining "victory" and then quitting)


Jerome.