CSS in tables - tricky vertical align problem

I'm trying to make some "sub-cells" in an HTML table and to control
their positioning and content presentation via CSS. In the table at
the following URL:

https://fshn3152.foods.uiuc.edu/~fgasper/erf.html

what I'm immediately trying to do is vertically position the text and
checkboxes in all four "Statement Date" sub-cells (created with <span>
elements).

I've tried "vertical-align", but that only has to do with block-level
stuff positioned in inline-level stuff; this is pretty well the other
way around. Any ideas?

Don't reply to the e-mail address; I never check it.

re: CSS in tables - tricky vertical align problem

fgasper@sbcglobal.net (Felipe Gasper) wrote:
[color=blue]
>I'm trying to make some "sub-cells" in an HTML table and to control
>their positioning and content presentation via CSS. In the table at
>the following URL:
>
>https://fshn3152.foods.uiuc.edu/~fgasper/erf.html[/color]

"- The server's name "fshn3152.foods.uiuc.edu" does not match the
certificate's name "". Somebody may be trying to eavesdrop on you.
- The certificate for "IT, Urbana" is signed by the unknown
Certificate Authority "IT, Urbana". It is not possible to verify
that this is a valid certificate"
[color=blue]
>what I'm immediately trying to do is vertically position the text and
>checkboxes in all four "Statement Date" sub-cells (created with <span>
>elements).
>
>I've tried "vertical-align", but that only has to do with block-level
>stuff positioned in inline-level stuff; this is pretty well the other
>way around. Any ideas?[/color]

vertical-align applis to two cases:
1. aligning relative to the text baseline within an inline element (I
think this is what you were trying to describe above, but as block
level elements don't go inside inline elements your description really
doesn't make sense).
2. aligning relative to the table row baseline within table cells.

The second use may be of some help to you: apply the vertical-align
property to the td not to the contained spans.
Failing that apply padding and margin to achieve the layout you want.

Or, considering that you've decided that this form is sufficiently
table-like to be a table, why not use a nested table for the nested
options?

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve@pugh.net> <http://steve.pugh.net/>

re: CSS in tables - tricky vertical align problem

On Fri, 16 Jan 2004, Steve Pugh wrote:
[color=blue][color=green]
> >https://fshn3152.foods.uiuc.edu/~fgasper/erf.html[/color]
>
> "- The server's name "fshn3152.foods.uiuc.edu" does not match the
> certificate's name "". Somebody may be trying to eavesdrop on you.
> - The certificate for "IT, Urbana" is signed by the unknown
> Certificate Authority "IT, Urbana". It is not possible to verify
> that this is a valid certificate"[/color]

This is a testing server, and we haven't gotten an actual SSL cert yet. My
apologies; I should have sent out the link as a regular http URL.
[color=blue]
> vertical-align applis to two cases:
> 1. aligning relative to the text baseline within an inline element (I
> think this is what you were trying to describe above, but as block
> level elements don't go inside inline elements your description really
> doesn't make sense).[/color]

That's it, yes. Thanks for the correction.
[color=blue]
> 2. aligning relative to the table row baseline within table cells.
>
> The second use may be of some help to you: apply the vertical-align
> property to the td not to the contained spans.[/color]

But doesn't this apply directly to the td, then, not to the td's contents?
[color=blue]
> Failing that apply padding and margin to achieve the layout you want.[/color]

Hmm - I tried adding "padding-top: auto; padding-bottom: auto" as a style
element to one of the spans, but this did nothing. I suppose I could see
if there's a DOM property to return the height of an element and use that
to position things, but that's pretty ugly.
[color=blue]
>
> Or, considering that you've decided that this form is sufficiently
> table-like to be a table, why not use a nested table for the nested
> options?[/color]

I'm trying that now, actually, since <th> does the valign automagically.
Unforunately I can't seem to access the width of the nested table cells
from JavaScript....am I missing something?

-Felipe Gasper
[color=blue]
>
> Steve
>
> --
> "My theories appal you, my heresies outrage you,
> I never answer letters and you don't like my tie." - The Doctor
>
> Steve Pugh <steve@pugh.net> <http://steve.pugh.net/>
>[/color]

-----------------------
Felipe M. L. M. Gasper
http://fgmusic.org

Judge ideas, not people.
Love people, not ideas.

Freedom from Micro$oft: http://openoffice.org
Join the revolution.