Input vs. Button
Posted on May 21, 2008 in Tutorial | 28 Comments »
My latest redesign project at work was for Group Logic. Another company did the design and created static HTML templates. My role was to create a single header and footer to make maintaining the site easier, and to wrap the store and other dynamic applications in the new design.
The company who designed it used images for the form buttons, and I found some interesting things while implementing them.
A Disclaimer
I think before you design form buttons to be images, you should seriously consider just styling the buttons with CSS. Just think about all of the images you will have to maintain. Is the value of the image button style really that great that you will deal with all of that hassle? In my opinion, it’s not. But whatever, to each his own (you like that Nate?). Ok, enough with the disclaimer, now on to the good stuff.
Some Options
Ok, so I decided that there were 3 options for implementing these buttons:
- Use
<input type="submit" />and use an image replacement technique (that I didn’t think would work in Safari). - Use
<input type="image" />and have the image source as an attribute. - Use
<button type="submit"></button>and insert the image within the button element.
My Decision
With ease of implementation in mind (since the time line was short), I decided to go with option 2: <input type="image" />. Everything went fine until we decided to test in IE (6 and 7). Apparently, the value from the button does not get passed onto the server. After some Googling around, I found out that this is a well known problem, and the only way to get this to work is by using JavaScript. Whenever I code something with JavaScript, I want to make sure that it works without JavaScript. So that solution would not work.
The Next Option
Next, I went with option 3: <button type="submit"></button>. I really did not know much about the button element until I read Rediscovering the Button Element a year ago.
Again, that option worked fine in everything, except IE6 this time (in IE7, it passed in the entire source of the image as the value, but we could find a way to make that work). Apparently, if you have multiple button elements with the same name attributes, the value that comes out from the server in IE6 is the value from the last element on the form.
Ok, maybe that was confusing. The example page might clarify some. The first example is just <input type="submit" />. The second example is <input type="image" />. Finally, the third example is <button type="submit"></button>.
Be sure to try that in IE6 and IE7 to see the problems I explained.
A Third Try?
Ok, this sucks, obviously I went with option 1 this time: <input type="submit" />. We know from the first example on the previous page that the value is at least passed through to the server properly in all browsers. Now the fun part is just trying to style the buttons in all browsers.
Stying the Input Element
Let’s assign a class to all of the buttons we are going to style, and just add some basic styles to the button:
input.buttons {
background: none no-repeat top left;
border: none;
cursor: pointer;
display: block;
height: 25px;
overflow: hidden;
padding: 0;
margin: 0 2px 0 0;
text-indent: -9999px;
width: auto;
}Most of that should be pretty self explanatory. So let’s now add in the background images for the 3 buttons and give them a width:
input.updateCart { background-image: url(update-cart.gif); width: 107px; }
input.continueShopping { background-image: url(continue-shopping.gif); width: 146px; }
input.proceedCheckout { background-image: url(proceed-to-checkout.gif); width: 156px; }The images are actually CSS Sprites so let’s add in the hover effect:
input.buttons:hover { background-position: 0 -25px; }Sweet, let’s take a look at the page. Nice, it even looks good in Safari. Of course, it’s broken in IE 6 and IE 7.
Check out the weird buttons in IE
Fixing for IE
Ok, so I had no idea how to even attack this problem. So I started playing around, and finally came up with this:
input.buttons { font-size: 0; line-height: 25px; }So I just serve those properties to IE6 and IE7. Beautiful, it works now.
One Last Thing
So we were able to get these buttons working in all browsers. There is just one minor thing that bugged me. The hover effect does not work on the buttons in IE6. How about we use jQuery to fix that for IE6:
$(document).ready(function(){
$('input.buttons').hover(function() {
$(this).css('background-position','0 -25px');
},
function() {
$(this).css('background-position','0 0');
}
);
});Nice, it works in IE6. So yeah, that was really long. But form buttons are always a fun topic to get working across all browsers. Anyone have anything they would do differently?
JamieOMay 22, 2008 at 7:42 am
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.
acidic68May 22, 2008 at 8:06 am
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!
NachoMay 22, 2008 at 8:39 am
Doesn’t work in Opera dude : p
Scott ReynenMay 22, 2008 at 9:02 am
“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.
FrakMay 22, 2008 at 9:03 am
Awesome post. Used your idea this morning on a project — it’s been bugging me and this was the perfect solution. Thanks!
FrakMay 22, 2008 at 9:10 am
@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].
TrevorMay 22, 2008 at 9:11 am
@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!
Sasa BogdanovicMay 22, 2008 at 10:49 am
Yes, both issues are know for quite some time and I have exeprienced them myself. Since then, I am using <input type=”submit” /> 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.
YailiMay 22, 2008 at 1:13 pm
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!
TomMay 22, 2008 at 6:09 pm
Have you tried giving the elements different names? The name/value pair only gets passed if that button is clicked.
Submit
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.
TrevorMay 22, 2008 at 9:53 pm
@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.
DnKrozzMay 23, 2008 at 1:52 am
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.
JermaynMay 23, 2008 at 3:13 am
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…
lumegaMay 23, 2008 at 3:35 am
Problem with text in Opera 9.27
Wilfred NasMay 23, 2008 at 7:07 am
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…
AndreyMay 23, 2008 at 9:02 am
hm.. in ie6 doesn’t work hover effect.
TrevorMay 23, 2008 at 9:21 am
@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?
AndreyMay 23, 2008 at 9:24 am
sorry, used wrong link probably. Works for now.
steveMay 23, 2008 at 10:09 am
“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
TrevorMay 23, 2008 at 11:33 am
@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.
Mike SchinkelMay 23, 2008 at 6:35 pm
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.
DivyaMay 23, 2008 at 10:40 pm
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.
Ivan NikolicMay 25, 2008 at 5:44 pm
Thank you for this, bullet-proof solution for nasty IE problem. Will surely use it in my projects!
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ığıMay 26, 2008 at 8:35 am
[…] input ve button arasında farklılıklar. Bağlantı […]
TrevorMay 29, 2008 at 5:16 pm
@Mike-
I agree. Let there be text!
@Divya-
Nice, I’ll have to check that out.
@ Ivan-
Excellent, glad I could help!
zigiMay 31, 2008 at 7:02 pm
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
DemmJune 3, 2008 at 7:56 am
Good idea
JayJuly 8, 2008 at 7:18 pm
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.