Comments on: Input vs. Button

By: Trevor

Trevor — Mon, 29 Sep 2008 14:26:15 +0000

@Triggesy-
Yeah, if you take a look at the demo page in IE6, you can see this problem in action.

By: triggesy

triggesy — Mon, 29 Sep 2008 10:41:18 +0000

oops, where did the markup go?

trying again…

By: triggesy

triggesy — Mon, 29 Sep 2008 10:39:00 +0000

Note that in IE6, if you put a button (type submit) in a form, its contents wlil be submitted even if it is not the one that is clicked. Ie

…
v

…

will always send the value of button “n” back…

By: Juan Pablo

Juan Pablo — Fri, 12 Sep 2008 15:02:42 +0000

Works nice!
Thanks

By: Jay

Jay — Tue, 08 Jul 2008 23:18:29 +0000

I’ve been using where selector button will have the correct dimensions and image reference which gets applied to the submit button. This technique works well in all the browsers.

By: Demm

Demm — Tue, 03 Jun 2008 11:56:47 +0000

Good idea

By: zigi

zigi — Sat, 31 May 2008 23:02:28 +0000

Hi,

I have a “submit” button done with CSS sprite.
The action for it is done with AJAX, it gives me trouble.
Anyone knows if AJAX has any problems with CSS sprite?

Thx in advance !
Zigi

By: Trevor

Trevor — Thu, 29 May 2008 21:16:52 +0000

@Mike-
I agree. Let there be text!

@Divya-
Nice, I’ll have to check that out.

@ Ivan-
Excellent, glad I could help!

By: Fatih Hayrioğlu'nun not defteri » 26 Mayıs 2008 web’den seçme haberler » düzenlenmiş, Bağlantı, arasında, farklılıklar, kutuları, hazırlamak, jQuery, yapılmış, güzel, aralığı

Mon, 26 May 2008 12:35:44 +0000

[…] input ve button arasında farklılıklar. Bağlantı […]

By: Ivan Nikolic

Ivan Nikolic — Sun, 25 May 2008 21:44:52 +0000

Thank you for this, bullet-proof solution for nasty IE problem. Will surely use it in my projects!

By: Divya

Divya — Sat, 24 May 2008 02:40:50 +0000

For Opera, I have found a work around of padding the text entirely out of the box element. e.g. if the width of the input button is assigned as 100px, then put padding-left of the input button to be 101px and overflow:hidden.

By: Mike Schinkel

Mike Schinkel — Fri, 23 May 2008 22:35:35 +0000

Nice! I for one am particularly frustrated by designers who want to turn everything into a graphic and destroy the interoperability (and lightweight) of text. You continue to impress me with your insights, and you are one of very few bloggers who do.

By: Trevor

Trevor — Fri, 23 May 2008 15:33:55 +0000

@Steve-
You are right, Opera is used on mobile devices and the Wii. But I highly doubt that people are going to the Group Logic site using their Wii. If they are, I am going to go out on a limb and assume its a very, very small number of people.

And using their mobile phones? People use their mobile phones to Google something, find a movie time or sports score. Until all mobile browsers have iPhone like capability, I think people over-estimate what users are using their phones for.

I agree totally about hating the idea about using graphical text on buttons, but sometimes you are stuck doing what the client/design calls for. I guess you could use the sliding doors technique, but it seems like extra markup for not much reward. Plus, the text is a “non-websafe” font with a shadow on it.

By: steve

steve — Fri, 23 May 2008 14:09:46 +0000

“Nacho-
Hmm yeah you are right. Opera really does not have much of a market share, but it would be nice to figure out how to get it to work in it.”

yeah, but Opera is the standard for many mobile devices (which use OperaMini) and the Nintendo WII

I hate the idea of embedding graphic text on buttons, and, as for the resizing issue, why not use the sliding doors technique?

if you HAVE to use graphical buttons, use an icon which is non-language biased - I think we all know what “download” looks like and NO/Cancel

By: Andrey

Andrey — Fri, 23 May 2008 13:24:02 +0000

sorry, used wrong link probably. Works for now.

By: Trevor

Trevor — Fri, 23 May 2008 13:21:41 +0000

@Jermayn-
Haha…unfortunately that was not an option.

@lumega-
Yeah, as Nacho stated earlier in the comments, it does not work in Opera. I think I can live with it at the moment since Opera has such a small market share, and it is not like the form becomes unusable. Although, I am interested in trying to find a solution.

@Wilfred Nas-
Nice, glad it removed the reliance on JS.

@Andrey-
The hover effect in the last example doesn’t work in IE6? Do you have JavaScript turned off?

By: Andrey

Andrey — Fri, 23 May 2008 13:02:41 +0000

hm.. in ie6 doesn’t work hover effect.

By: Wilfred Nas

Wilfred Nas — Fri, 23 May 2008 11:07:06 +0000

trevor, thanks for the lineheight trick for ie. I resolved to js to remove the value and have now reversed that and solve it with css. great going…

By: lumega

lumega — Fri, 23 May 2008 07:35:03 +0000

Problem with text in Opera 9.27

By: Jermayn

Jermayn — Fri, 23 May 2008 07:13:13 +0000

Would I do anything different?? yeah told the company who design individual button images that you were going to just stylise the buttons using CSS…

By: DnKrozz

DnKrozz — Fri, 23 May 2008 05:52:05 +0000

i have good result in IE 6,7 Opera, Safari, FF with:
input.button { border: 0px;


    display: block;
    height: 22px;
    padding-top: 22px; /* for Opera 30px for Safari 19px*/
    background: none;
    overflow: hidden;

}
input.submit

{

    background-image: url(submit.gif);

    width: 71px;

}

My image has 71x22 size.

By: Trevor

Trevor — Fri, 23 May 2008 01:53:32 +0000

@Sasa-
Yes, Roger has some great references.

@Yaili-
It is a shame; Opera is a very solid browser. I still think Firefox is the best non-IE browser with the abundance of plugins available.

@Tom-
I would be careful with the way you are doing that. I setup a test page where all of the buttons have a different name attribute.

Everything works fine in Firefox and Safari. In IE7, it submits the entire source of the image of the button that you clicked (which you could make work). In IE6 though, it still acts as though all buttons are clicked. I wish we didn’t have to worry about IE6 anymore, but unfortunately it is still the most popular browser.

By: Tom

Tom — Thu, 22 May 2008 22:09:00 +0000

Have you tried giving the elements different names? The name/value pair only gets passed if that button is clicked.

Submit

Then, in your server-side code do a check:

if (button1.value == “button1”) then
…perform some action…

if (button2.value==”button2”) then
…perform some other action…

I’m using this technique in a web app at work and it works great! Plus, it’s a snap to make this image buttons by nesting an in the tags.

By: Yaili

Yaili — Thu, 22 May 2008 17:13:36 +0000

It’s a pity that these things (errors…) always happen on Opera, because, from my experience, it ends up being the most stable and light browser around. I use it all the time when Firefox starts getting heavy :)
Anyway, I enjoyed this article, thanks!

By: Sasa Bogdanovic

Sasa Bogdanovic — Thu, 22 May 2008 14:49:56 +0000

Yes, both issues are know for quite some time and I have exeprienced them myself. Since then, I am using for submit buttons.

When it comes to styling the form elements, including buttons and inputs, I guess there is no better reference than Roger Johansson and his articles Styling form controls with CSS, revisited and previous ones referenced there.

By: Trevor

Trevor — Thu, 22 May 2008 13:11:06 +0000

@Nacho-
Hmm yeah you are right. Opera really does not have much of a market share, but it would be nice to figure out how to get it to work in it.

@Scot-
It matters for the example of the Group Logic store (once you’ve added something to your cart and are viewing the cart). There are 3 different submit button on the form for the cart, and depending upon what you click, you will be redirected accordingly. I don’t see any reason why you would question the usability on that.

@Frak-
Nice, glad it helped!

By: Frak

Frak — Thu, 22 May 2008 13:10:29 +0000

@Nacho: Verified, it doesn’t work in Opera.

[cough] Who cares? [/cough]

Seriously, Opera is ignoring the text-indent bit and using !important doesn’t force it either. You could use jQuery or similar to detect Opera and remove the value=”“. Granted, that’s a kludgy solution, but I haven’t spent time trying to figure out a more proper CSS way of doing it [cough] because it’s Opera [/cough].

By: Frak

Frak — Thu, 22 May 2008 13:03:03 +0000

Awesome post. Used your idea this morning on a project — it’s been bugging me and this was the perfect solution. Thanks!

By: Scott Reynen

Scott Reynen — Thu, 22 May 2008 13:02:31 +0000

“Apparently, the value from the button does not get passed onto the server.”

Why does this matter? Unless the form has multiple submit buttons, any value passed with the button could just as easily be passed with a hidden input (or not passed at all and just assumed). And if the form does have multiple submit buttons, I’d question the usability.

By: Nacho

Nacho — Thu, 22 May 2008 12:39:06 +0000

Doesn’t work in Opera dude : p

By: acidic68

acidic68 — Thu, 22 May 2008 12:06:47 +0000

I like your solution very much. I would use it in my project if I could, but I can’t. We have a multilanguage interface, so we cannot imbed text into the image. If I used only the background images and left the text alone, without indenting it, resizing font in the browser would make the buttons look ugly. Thanks for sharing nevertheless!

By: JamieO

JamieO — Thu, 22 May 2008 11:42:23 +0000

The good thing about using the submit is that should someone have css turned off or unavailable (???) your button still looks like a button. You can do that with the other methods, but as you pointed out it may require additional dependencies (JS) to achieve.