Table link cells work but text forced to top alignment

[Harry]

CSS

Description:
Table contains a column of td cells with links.

Achieved:
1. Entire link cells highlight when hovered.
2. The entire area of these cells are clickable.

Problem:
As these cells expand heightwise to accomodate text in other cells
along the same row;
the link text is forced to the top of the cell.
(only noticeable in the expanded cells, of course, but the text is
obviously positioned this way in all of them.)

Removing the "height="10 0%" from the "td a" style solves the vertical
alignment problem,
however, it destroys the highlighting and clickability of the upper and
lower portions of these cells.

So, the "height=100 %" has to stay, but I wonder, how do I get the link
text to vertically align in the middle,
i.e. override being forced to the top.

Current stylesheet - (you will only see the problem if you make a table
with a non-link td cell on the same row, and fill it with a lot of text
until it expands heightwise):

td {
height: 1px;
}

td a {
border-left: 1px solid #FFFFFF;
color: #0000ff;
background-color: #ffffff;
display:block;
width: 100%;
text-decoration: none;
}

td a:visited {
border-left: 1px solid #FFFFFF;
color: #ff00ff;
background-color: #ffffff;
}

td a:hover {
border-left: 1px solid #FFFFFF;
color: #ffffff;
background-color: #0000ff;
}

[Harry]

Re: Table link cells work but text forced to top alignment

Don't forget to place "height: 100%" in the "td a" section!

[DU]

Re: Table link cells work but text forced to top alignment

Harry wrote:
[color=blue]
> CSS
>
> Description:
> Table contains a column of td cells with links.
>
> Achieved:
> 1. Entire link cells highlight when hovered.
> 2. The entire area of these cells are clickable.
>
> Problem:
> As these cells expand heightwise[/color]

Your CSS code has specifically and explicitly given a total height: 1px;
constraint on such cell. Aren't you creating yourself the problem?

to accomodate text in other cells[color=blue]
> along the same row;[/color]

A table row will always take the height necessary to render the highest
cell; if it was not the case, then tables would not make content accessible.
[color=blue]
> the link text is forced to the top of the cell.[/color]

I guess you mean that there is a reflow somehow.
[color=blue]
> (only noticeable in the expanded cells, of course, but the text is
> obviously positioned this way in all of them.)
>
> Removing the "height="10 0%" from the "td a" style solves the vertical
> alignment problem,[/color]

You css declaration was saying take exactly 100% of 1px to render that
block-level anchor.
[color=blue]
> however, it destroys the highlighting and clickability of the upper and
> lower portions of these cells.[/color]

Whenever you have a layout problem, alignment, position, reflow, redraw
issues, then best is to post an url and identify the browsers and
browser versions having such problem.
[color=blue]
>
> So, the "height=100 %" has to stay,[/color]

You describe the consequences of your css code (without understand it
IMO), then you experiment with it and then you conclude your code has to
be kept.

but I wonder, how do I get the link[color=blue]
> text to vertically align in the middle,
> i.e. override being forced to the top.
>[/color]

Personally, I do not remember ever resorting to height: 100%; or height:
any value; for any table component or for a table itself because 99% of
the time, you end up constraining the layout of a table, you try to go
against normal flow of browser instead of using it. It's like risking or
asking an elephant to get into the driver seat of a car and askign the
elephant not to modify the car's height or roof.
[color=blue]
> Current stylesheet - (you will only see the problem if you make a table
> with a non-link td cell on the same row, and fill it with a lot of text
> until it expands heightwise):
>
> td {
> height: 1px;
> }
>
> td a {
> border-left: 1px solid #FFFFFF;
> color: #0000ff;
> background-color: #ffffff;
> display:block;
> width: 100%;[/color]

Useless, IMO, and typical of an over-constraining coding policy on table.
[color=blue]
> text-decoration: none;
> }
>
> td a:visited {
> border-left: 1px solid #FFFFFF;
> color: #ff00ff;
> background-color: #ffffff;
> }
>
> td a:hover {
> border-left: 1px solid #FFFFFF;
> color: #ffffff;
> background-color: #0000ff;
> }
>[/color]

DU
--
The site said to use Internet Explorer 5 or better... so I switched to
Mozilla 1.7.6 :)

[Harry]

Re: Table link cells work but text forced to top alignment


DU wrote:[color=blue]
>
> Your CSS code has specifically and explicitly given a total height:[/color]
1px;[color=blue]
> constraint on such cell. Aren't you creating yourself the problem?
>[/color]

I know what you mean, but it was the only way I could devise to expand
the hover change to effect the entire height of the cell.
[color=blue]
> A table row will always take the height necessary to render the[/color]
highest[color=blue]
> cell; if it was not the case, then tables would not make content[/color]
accessible.

That, I do know, but I don't know what is forcing to link text up
against the top of the cell. I can't get it to vertically align in the
middle.

[color=blue][color=green]
> > Removing the "height="10 0%" from the "td a" style solves the[/color][/color]
vertical[color=blue][color=green]
> > alignment problem,[/color]
>
> You css declaration was saying take exactly 100% of 1px to render[/color]
that[color=blue]
> block-level anchor.
>[color=green]
> > however, it destroys the highlighting and clickability of the upper[/color][/color]
and[color=blue][color=green]
> > lower portions of these cells.[/color]
>
> Whenever you have a layout problem, alignment, position, reflow,[/color]
redraw[color=blue]
> issues, then best is to post an url and identify the browsers and
> browser versions having such problem.
>[color=green]
> >
> > So, the "height=100 %" has to stay,[/color]
>
> You describe the consequences of your css code (without understand it[/color]
[color=blue]
> IMO), then you experiment with it and then you conclude your code has[/color]
to[color=blue]
> be kept.[/color]

You're right that I have a limited understanding of css. I am certainly
struggling with it (and the variety of browser compatibility is also
adding to the confusion!)

As far as saying that I have to keep that snippet of code, what I am
saying specifically here is that, if I remove it, the same thing
happens as above - I lose covering the entire td cell with the link.
(Somehow, and I'm sure you will tell me I am showing my ignorance, I
have only been successful so far by having both the "td height: 1px"
and "td a height:100%" in the stylesheet.

(My thinking with the first one was that I had to define a cell height.
Then, I thought I can't make it more than the 1px or it would expand
the height of all the td link cells - and thereby the rows, and the
table as a whole.)

[color=blue]
> <>you try to go
> against normal flow of browser instead of using it. <>[/color]

I gotcha. But then how do you explain that to someone who tells you
they don't want their table any taller than it already is?

Thanks for your feedback.
Harry.

[Harry]

Re: Table link cells work but text forced to top alignment

Here's the url:

http://rs485.ca/css/table.html

[Harry]

Re: Table link cells work but text forced to top alignment

Using IE 6
(Firefox renders completely differently.