May 21, 2008

Input vs. Button

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:

  1. Use <input type="submit" /> and use an image replacement technique (that I didn’t think would work in Safari).
  2. Use <input type="image" /> and have the image source as an attribute.
  3. 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.

Strange effect on buttons in IECheck 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?

Categories