By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,739 Members | 1,081 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,739 IT Pros & Developers. It's quick & easy.

CSS in tables - tricky vertical align problem

P: n/a
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.
Jul 20 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a
fg*****@sbcglobal.net (Felipe Gasper) wrote:
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
"- 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"
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?


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 <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #2

P: n/a
On Fri, 16 Jan 2004, Steve Pugh wrote:
https://fshn3152.foods.uiuc.edu/~fgasper/erf.html
"- 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"


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.
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).
That's it, yes. Thanks for the correction.
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.
But doesn't this apply directly to the td, then, not to the td's contents?
Failing that apply padding and margin to achieve the layout you want.
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.

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?
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

Steve

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

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


-----------------------
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.
Jul 20 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.