Posted by Ben C on 06/12/07 22:08

On 2007-06-12, Ben C <spamspam@spam.eggs> wrote:
> On 2007-06-12, vunet.us@gmail.com <vunet.us@gmail.com> wrote:
[...]
>> 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:
>
> <style type="text/css">
> td
> {
> height: 200px;
> width: 200px;
> background-color: green;
> }
>
> a { display: block; }
>
> .button
> {
> display: block; /* it's a span, so it can be
> validly put inside an <a> */
> width: 150px;
> height: 100px;
> border: 8px outset gray;
> background-color: gray;
> color: white;
>
> margin: 0 auto; /* to centre it vertically */
>
> line-height: 100px; /* to centre its contents
> vertically */
> vertical-align: middle;
> white-space: nowrap; /* but its contents can't wrap */
>
> text-align: center; /* centre contents horizontally */
> }
> .button:hover { cursor: pointer; }
> </style>
>
> ...
>
> <table>
> <tr>
> <td>
> <a href="#">
> <span class="button">Press Me</span>
> </a>

Except now I come to think of it the span isn't necessary, just make the
anchor class=button and lose the span.

I confused myself because I had the <a> inside the button to start with.
But you want to follow the link wherever on the button you click, so
then I moved it outside, but now that it is outside there's no reason
for the span any more.

[Back to original message]