Button and Anchor Styling. They differ ...

Hello,

In a page I have:
1. An input (type="submit") button that submits a form.
2. An anchor that cancels the form submission and redirects the user
to a page.

I am trying to make both look the same having a padding a background
color.

I tested in Firefox and in IE but in both cases the two don't look the
same.
I am also using a Reset.css.

I posted an example with the HTML and CSS code here:
http://www.27lamps.com/Labs/Buttons/Buttons.html

Could someone help me out with this?

Thanks,
Miguel

Jukka K. Korpela

Guest

n/a Posts

June 27th, 2008
07:19 PM
#2

Re: Button and Anchor Styling. They differ ...

Scripsit shapper:

Quote:

Originally Posted by

1. An input (type="submit") button that submits a form.

Fine.

Quote:

Originally Posted by

2. An anchor that cancels the form submission and redirects the user
to a page.

Huh? There is nothing to be cancelled. You just have a link, and when a
user follows the link, he at least temporarily leaves the linking page.
Any link will do that.

Quote:

Originally Posted by

I am trying to make both look the same having a padding a background
color.

Why should they look similar when they do quite different jobs?

(Besides, making a link and a button look the same is a rather desperate
effort. Both of them may have all kinds of default rendering features.)

If you make the link look like a button, people will mistake it as a
Reset button (effectively, "destroy form data" button), and if they know
how such buttons almost always "work", they will avoid them like plague.
Once in a decade, they will click on it and expect it to reset all form
fields to their initial values.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

shapper

Guest

n/a Posts

June 27th, 2008
07:19 PM
#3

Re: Button and Anchor Styling. They differ ...

On Jun 18, 4:43*pm, "Jukka K. Korpela" <jkorp...@cs.tut.fiwrote:

Quote:

Originally Posted by

Scripsit shapper:
>

Quote:

Originally Posted by

1. An input (type="submit") button that submits a form.

>
Fine.
>

Quote:

Originally Posted by

2. An anchor that cancels the form submission and redirects the user
to a page.

>
Huh? There is nothing to be cancelled. You just have a link, and when a
user follows the link, he at least temporarily leaves the linking page.
Any link will do that.
>

Quote:

Originally Posted by

I am trying to make both look the same having a padding a background
color.

>
Why should they look similar when they do quite different jobs?
>
(Besides, making a link and a button look the same is a rather desperate
effort. Both of them may have all kinds of default rendering features.)
>
If you make the link look like a button, people will mistake it as a
Reset button (effectively, "destroy form data" button), and if they know
how such buttons almost always "work", they will avoid them like plague.
Once in a decade, they will click on it and expect it to reset all form
fields to their initial values.
>
--
Jukka K. Korpela ("Yucca")http://www.cs.tut.fi/~jkorpela/

Hi,

I realized now the anchor was redirecting to Google ... that was a
mistake.
I have a table which display various records ... When I click in a
record I redirect the user to a form in a new page with 2 buttons:

Save Save the data
Cancel Don't save the data and get back to list

I think it is intuitive or not?

I now change the Cancel from an anchor to a button ... there is only
one small problem:
In Firefox I get a space between each button when they should be
together ... in IE it shows ok. Any idea why?

The URL is:
http://www.27lamps.com/Labs/Buttons/Buttons.html

Thanks,
Miguel

Christian Kirsch

Guest

n/a Posts

June 27th, 2008
07:19 PM
#4

Re: Button and Anchor Styling. They differ ...

shapper schrieb:

Quote:

Originally Posted by

In Firefox I get a space between each button when they should be
together ... in IE it shows ok. Any idea why?
>

Default style sheet, I guess. Try setting all the relevant attributes
like padding and margin yourself.