473,230 Members | 1,435 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,230 software developers and data experts.

Table link cells work but text forced to top alignment


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="100%" 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;
}

Jul 21 '05 #1
5 4698
Don't forget to place "height: 100%" in the "td a" section!

Jul 21 '05 #2
DU
Harry wrote:
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
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 along the same row;
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.
the link text is forced to the top of the cell.
I guess you mean that there is a reflow somehow.
(only noticeable in the expanded cells, of course, but the text is
obviously positioned this way in all of them.)

Removing the "height="100%" from the "td a" style solves the vertical
alignment problem,
You css declaration was saying take exactly 100% of 1px to render that
block-level anchor.
however, it destroys the highlighting and clickability of the upper and
lower portions of these cells.
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.

So, the "height=100%" has to stay,
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 text to vertically align in the middle,
i.e. override being forced to the top.

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.
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%;
Useless, IMO, and typical of an over-constraining coding policy on table.
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;
}


DU
--
The site said to use Internet Explorer 5 or better... so I switched to
Mozilla 1.7.6 :)
Jul 21 '05 #3

DU wrote:

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

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

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.

Removing the "height="100%" from the "td a" style solves the vertical alignment problem,


You css declaration was saying take exactly 100% of 1px to render

that block-level anchor.
however, it destroys the highlighting and clickability of the upper and lower portions of these cells.
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.

So, the "height=100%" has to stay,
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.
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.)

<>you try to go
against normal flow of browser instead of using it. <>


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.

Jul 21 '05 #4
Here's the url:

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

Jul 21 '05 #5
Using IE 6
(Firefox renders completely differently.

Jul 21 '05 #6

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

31
by: Royal Denning | last post by:
I am designing a table with 2 columns and 20 rows. I want to insert small images (each with a link) and a text title in each cell of the table. On refresh of the page, I would like to have the...
1
by: cotton_gear | last post by:
Hello, Fiest of all let me thank this group for so quick in responding to any postings. I am using a javascript based utility from a site to sort the columns of the table. But, for some strange...
1
by: Thanks | last post by:
I have a routine that is called on Page_Init. It retrieves folder records from a database which I display as Link Buttons in a table cell. I set the table cell's bgcolor to a default color (say...
7
by: Shawn B. | last post by:
Greetings, I am trying to create a table that has a scrolling body. The problem I'm experiencing is that if the columns in the "body" part of the table exceed the width of the "header" then...
7
by: Jef Driesen | last post by:
How can I replace/override the table attributes align, border, cellpadding and cellspacing with css?
7
by: Kamal | last post by:
Hello all, I have a very simple html table with collapsible rows and sorting capabilities. The collapsible row is hidden with css rule (display:none). When one clicks in the left of the...
6
by: Romulo NF | last post by:
Greetings again to everyone, Im back to show this grid componenet i´ve developed. With this grid you can show the data like a normal table, remove the rows that you need, add rows, import data,...
3
dmjpro
by: dmjpro | last post by:
I think iText commonly used to create or manipulate PDF document in Java. So finally i decided to throw a question over here. For two days i am struggling. I encountered two types of table .....
5
by: jrod11 | last post by:
hi, I found a jquery html table sorting code i have implemented. I am trying to figure out how to edit how many colums there are, but every time i remove code that I think controls how many colums...
0
by: VivesProcSPL | last post by:
Obviously, one of the original purposes of SQL is to make data query processing easy. The language uses many English-like terms and syntax in an effort to make it easy to learn, particularly for...
0
by: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
1
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: Aftab Ahmad | last post by:
Hello Experts! I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...
0
by: Aftab Ahmad | last post by:
So, I have written a code for a cmd called "Send WhatsApp Message" to open and send WhatsApp messaage. The code is given below. Dim IE As Object Set IE =...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.