Button and Anchor Styling. They differ ...

[shapper]

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]

Scripsit shapper:

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

Fine.

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.

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]

On Jun 18, 4:43*pm, "Jukka K. Korpela" <[e-mail]:

Scripsit shapper:

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

Fine.

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.

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]

shapper schrieb:

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.