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;
} 5 4712
Don't forget to place "height: 100%" in the "td a" section!
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 :)
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.
Using IE 6
(Firefox renders completely differently. This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics |
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...
|
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...
|
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...
|
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...
|
by: Jef Driesen |
last post by:
How can I replace/override the table attributes align, border,
cellpadding and cellspacing with css?
| |
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...
|
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,...
|
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 .....
|
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...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
| |
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers,...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The...
| |
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence...
| |