I am trying to find away to style submit buttons so that I can have rounded corners and fades that work cross-browser. Had problems with img tag in input on IE 6 before.
I use this code to style my links : http://www.jankoatwarpspeed.com/post/2008/04/30/make-fancy-buttons-using-css-sliding-doors-technique.aspx
Just trying to find something for submit buttons.
I am not sure how good your CSS skills are, but here is an interesting article about the attempt Google made at re-styling buttons. http://stopdesign.com/archive/2009/02/04/recreating-the-button.html . If you are looking to add some type of "sliding doors" background graphics to your buttons, try wrapping the button in 2 span's and then applying the "sliding doors" technique to those. Set the button to "border:0;background-color:transparent;". That should help get you started a bit.
There are ways. Use JS to serialize inputs, then make an AJAX call to the server.
For a decent fallback for if JS is disabled, start with a normal submit button (you'll have to accept that the few people with JS disabled will see a plain button), then replace the button with the link/span combo.
thanks for the advice but I thought there may be a cleaner way to do this.
The best method i found is from the filament group, (based on the sliding doors method) - i have some minor issues on ie7 with it but im sure its the best method around http://www.filamentgroup.com/lab/update_styling_the_button_element_with_css_sliding_doors_now_with_image_spr/
I always use links as submit buttons, they are much more flexible. Use something like:
<a href="#" class="submit-link"><span>Submit!</span></a>
Then, you can have a long image with left rounded corners on the a tag, and right rounded corners on the span, but the button will still be flexible and resize to fit its text content :D
CSS for this setup is a little complex for cross-browser issues, but issues generally fixed by setting
display:inline-block on the
<a> tag. Use padding on the
<span> to space things out a bit, postion the link relatively and the span absolutely so that the end with the rounded corner sits outside of the
<a> and Rob is your father's brother...
If you use that method then you can't POST data with a value to a script though.