CSS for a Link to Occupy the Whole Cell

Hello,

I have a link (A tag) inside of a cell. I want this link to occupy the
whole area of the cell, such as width:100%, height:100%.

I cannot seem to come up with a cross-browser example. How would you
do it? Thanks.

Re: CSS for a Link to Occupy the Whole Cell

and text of a link is in the middle centered... thannks

Re: CSS for a Link to Occupy the Whole Cell

On 2007-06-12, vunet.us@gmail.com wrote:
> Hello,
>
> I have a link (A tag) inside of a cell. I want this link to occupy the
> whole area of the cell, such as width:100%, height:100%.
>
> I cannot seem to come up with a cross-browser example. How would you
> do it? Thanks.
>
>

On 2007-06-12, vunet.us@gmail.com wrote:
> On Jun 12, 4:50 pm, Ben C wrote:
>> On 2007-06-12, vunet...@gmail.com wrote:
>>
>>
>>
>> > and text of a link is in the middle centered... thannks
>>
>> Set vertical-align: middle on the td.
>
> what if I set display:block; for A?

Yes you can do that but then it's going to be harder to get the text of
the link vertically centered.

If the text can be guaranteed to be all on one line you can set a
line-height on the equal to the height you've set as well as setting
vertical-align: middle on it.

If you want text that breaks across lines but to have those lines
centered vertically in their container, you need a table-cell with
vertical-align: middle. Nothing else has quite the same behaviour. For
this reason it's desirable to keep your inline and directly inside a
table cell.

You said you wanted your width:100% and height:100% so it may well
be there's no point in making it display: block when it completely fills
the table cell anyway. Just decorate the table cell instead and leave
the as inline.

On Jun 12, 5:33 pm, Ben C wrote:
> On 2007-06-12, vunet...@gmail.com wrote:
>
> > On Jun 12, 4:50 pm, Ben C wrote:
> >> On 2007-06-12, vunet...@gmail.com wrote:
>
> >> > and text of a link is in the middle centered... thannks
>
> >> Set vertical-align: middle on the td.
>
> > what if I set display:block; for A?
>
> Yes you can do that but then it's going to be harder to get the text of
> the link vertically centered.
>
> If the text can be guaranteed to be all on one line you can set a
> line-height on the equal to the height you've set as well as setting
> vertical-align: middle on it.
>
> If you want text that breaks across lines but to have those lines
> centered vertically in their container, you need a table-cell with
> vertical-align: middle. Nothing else has quite the same behaviour. For
> this reason it's desirable to keep your inline and directly inside a
> table cell.
>
> You said you wanted your width:100% and height:100% so it may well
> be there's no point in making it display: block when it completely fills
> the table cell anyway. Just decorate the table cell instead and leave
> the as inline.

I am trying to create a button with a cursor:hand which actually is a
cell with a link. That's why I wanted to expand the A. How would you
suggest to go about this idea of mine? I hate using images for that
reason. Thanks

On 2007-06-12, vunet.us@gmail.com wrote:
> On Jun 12, 5:33 pm, Ben C wrote:
>> On 2007-06-12, vunet...@gmail.com wrote:
>>
>> > On Jun 12, 4:50 pm, Ben C wrote:
>> >> On 2007-06-12, vunet...@gmail.com wrote:
>>
>> >> > and text of a link is in the middle centered... thannks
>>
>> >> Set vertical-align: middle on the td.
>>
>> > what if I set display:block; for A?
>>
>> Yes you can do that but then it's going to be harder to get the text of
>> the link vertically centered.
>>
>> If the text can be guaranteed to be all on one line you can set a
>> line-height on the equal to the height you've set as well as setting
>> vertical-align: middle on it.
>>
>> If you want text that breaks across lines but to have those lines
>> centered vertically in their container, you need a table-cell with
>> vertical-align: middle. Nothing else has quite the same behaviour. For
>> this reason it's desirable to keep your inline and directly inside a
>> table cell.
>>
>> You said you wanted your width:100% and height:100% so it may well
>> be there's no point in making it display: block when it completely fills
>> the table cell anyway. Just decorate the table cell instead and leave
>> the as inline.
>
> I am trying to create a button with a cursor:hand which actually is a
> cell with a link. That's why I wanted to expand the A. How would you
> suggest to go about this idea of mine? I hate using images for that
> reason. Thanks

I'm not sure where you got cursor:hand from. I can find cursor:pointer
in the CSS 2.1 spec and various other values for cursor, but not hand.

How about this:



...