how to get IE 7 to work with an image set as submit button in an html form?

Question

I have an html form with action on a php script. And I've set the submit button to have a custom image, and not to show up as the default grey thing. I've tested the code in chrome, and the php script works fine (meaning, the submit button successfully calls and executes the php script, upon clicking it). This same code however does not work in IE 7.

Could you please let me know how to get it to work with IE 7 as well (I need support for IE 7)-

Code:

<form action="some_php_script.php" method="post">
<input type="image" src="submit-button.png" name="submit-plus" id="submit-plus" value="submit" />
</form>

On a related note, I have one more question - the above form currently references the "some_php_script.php". Can i have a php snippet be written in this html section so that it can pass some values in the script url, like below -

<form action="some_php_script.php?page=12" method="post">

(Basically, I want the ?page=12 to be passed dynamically based on someother value in the current page.)

Thanks!

Answer 1

try with

<button type="submit" name="submit-plus" id="submit-plus" value="submit">
  <img src="submit-button.png" alt="submit" title="submit"/>
</button>

Reference

Answer 2

http://www.w3.org/TR/html4/interact/forms.html#h-17.4.1

image Creates a graphical submit button. The value of the src attribute specifies the URI of the image that will decorate the button. For accessibility reasons, authors should provide alternate text for the image via the alt attribute.

When a pointing device is used to click on the image, the form is submitted and the click coordinates passed to the server. The x value is measured in pixels from the left of the image, and the y value in pixels from the top of the image. The submitted data includes name.x=x-value and name.y=y-value where "name" is the value of the name attribute, and x-value and y-value are the x and y coordinate values, respectively.

If the server takes different actions depending on the location clicked, users of non-graphical browsers will be disadvantaged. For this reason, authors should consider alternate approaches:

Use multiple submit buttons (each with its own image) in place of a single graphical submit button. Authors may use style sheets to control the positioning of these buttons. Use a client-side image map together with scripting.

Answer 3

Im not sure if you figured out a solid solution for this or not but I was having the same issue in IE 7. The button image looks great in IE 8+ and of course in Firefox & Chrome.

You can keep the button tags in there as shown in the example from diEcho, or you can go back to your original code with the input tags. What you want to do is add a "background-color" style and set it to "transparent". I see you dont have a class associated with the button so you can just create an inline-style in the input tag.

    <form action="some_php_script.php" method="post">
    <input type="image" src="submit-button.png" name="submit-plus" id="submit-plus" value="submit" style="background-color: transparent;" />
    </form>  

Give it a shot! If you get a funny looking border around the button you can add an additional style of border: none; to your inline style.