 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 its 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 didnt 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 lets 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 lets 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 lets add in the hover effect input buttons hover background position 0 25px sweet lets take a look at the page nice it even looks good in safari of course its 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 