<p>My latest redesign project at work was for <a href="http://www.grouplogic.com/">Group Logic</a>. 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.</p>
<p>The company who designed it used images for the form buttons, and I found some interesting things while implementing them.</p>

<h2>A Disclaimer</h2>
<p>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 <strong>his</strong> own (you like that <a href="http://monadology.net/">Nate</a>?). Ok, enough with the disclaimer, now on to the good stuff.</p>

<h2>Some Options</h2>
<p>Ok, so I decided that there were 3 options for implementing these buttons:</p>
<ol><li>Use <code>&lt;input type="submit" /&gt;</code> and use an image replacement technique (that I didn’t think would work in Safari).</li>
<li>Use <code>&lt;input type="image" /&gt;</code> and have the image source as an attribute.</li>
<li>Use <code>&lt;button type="submit"&gt;&lt;/button&gt;</code> and insert the image within the button element. </li>
</ol><h3>My Decision</h3>
<p>With ease of implementation in mind (since the time line was short), I decided to go with option 2: <code>&lt;input type="image" /&gt;</code>. 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.</p>

<h3>The Next Option</h3>
<p>Next, I went with option 3: <code>&lt;button type="submit"&gt;&lt;/button&gt;</code>. I really did not know much about the <code>button</code> element until I read <a href="http://particletree.com/features/rediscovering-the-button-element/">Rediscovering the Button Element</a> a year ago.</p>
<p>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.</p>

<p>Ok, maybe that was confusing. The <a href="//trevor-davis.com/play/input-vs-button/">example page</a> might clarify some. The first example is just <code>&lt;input type="submit" /&gt;</code>. The second example is <code>&lt;input type="image" /&gt;</code>. Finally, the third example is <code>&lt;button type="submit"&gt;&lt;/button&gt;</code>.</p>

<p>Be sure to try that in IE6 and IE7 to see the problems I explained.</p>

<h3>A Third Try?</h3>
<p>Ok, this sucks, obviously I went with option 1 this time: <code>&lt;input type="submit" /&gt;</code>. We know from the <a href="//trevor-davis.com/play/input-vs-button/">first example on the previous page</a> 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.</p>

<h2>Stying the Input Element</h2>
<p>Let’s assign a class to all of the buttons we are going to style, and just add some basic styles to the button:</p>

<div class="codeblock"><code>
input.buttons {<br /> background: none no-repeat top left;<br /> border: none;<br /> cursor: pointer;<br /> display: block;<br /> height: 25px;<br /> overflow: hidden;<br /> padding: 0;<br /> margin: 0 2px 0 0;<br /> text-indent: -9999px;<br /> width: auto;<br />} 

</code></div>

<p>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:</p>

<div class="codeblock"><code>
input.updateCart { background-image: url(update-cart.gif); width: 107px; }<br />input.continueShopping { background-image: url(continue-shopping.gif); width: 146px; }<br />input.proceedCheckout { background-image: url(proceed-to-checkout.gif); width: 156px; } 

</code></div>

<p>The images are actually CSS Sprites so let’s add in the hover effect:</p>
<div class="codeblock"><code>
input.buttons:hover { background-position: 0 -25px; } 

</code></div>

<p>Sweet, let’s <a href="//trevor-davis.com/play/input-vs-button/regular-input/">take a look at the page</a>. Nice, it even looks good in Safari. Of course, it’s broken in IE 6 and IE 7.</p>

<p><img src="//trevor-davis.com/images/content/2008/05/buttons-ie.gif" alt="Strange effect on buttons in IE" class="imageCenter" height="25" width="413" /><em>Check out the weird buttons in IE</em></p>

<h3>Fixing for IE</h3>
<p>Ok, so I had no idea how to even attack this problem. So I started playing around, and finally came up with this:</p>

<div class="codeblock"><code>
input.buttons { font-size: 0; line-height: 25px; } 

</code></div>

<p>So I just serve those properties to IE6 and IE7. Beautiful, <a href="//trevor-davis.com/play/input-vs-button/regular-input-fixed-for-ie/">it works now</a>.</p>

<h3>One Last Thing</h3>
<p>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 <a href="http://jquery.com/">jQuery</a> to fix that for IE6:</p>

<div class="codeblock"><code>
$(document).ready(function(){<br /> $('input.buttons').hover(function() {<br />   $(this).css('background-position','0 -25px');<br />  },<br />  function() {<br />   $(this).css('background-position','0 0');<br />  }<br /> );<br />}); 

</code></div>

<p>Nice, <a href="//trevor-davis.com/play/input-vs-button/regular-input-hover-fixed-for-ie/">it works in IE6</a>. 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?</p>