HTML Input (type=image) not working on Firefox 4

Question

<input  type="image"value="Delete" title="Delete" name="cmd_delete" src="bin/images/common/delete.png"/>

The above HTML code is for a Delete button in my application. The problem is that this button does not work in Firefox 4 but works in other browsers. Please how can I fix this.

Answer 1

Suppose:

<input type="image" name="submit" src="signout.png" />

If you are using php, change your code from

if(isset($_POST['submit']))

to

if(isset($_POST['submit_x']))`

Answer 2

Just check for $_REQUEST['submit_x'] if its set or not empty. Older browsers don't set $_REQUEST['submit'] when using input type image. Don't really know why...

Then there's no need to apply CSS to the tag.

Answer 3

The problem with using <button name="cmd_delete" value=""><img src=".."/></button> is that you still see the button behind the image. It looks horrible. Why is this negative voted...it is true, I tried it!

Answer 4

You're basically abusing the <input type="image"> to have a button with a background image. The <input type="image"> represents an image map. The mouse position on the button is been sent as cmd_delete.x and cmd_delete.y parameters. But you are not interested in the mouse position. Replace it by a normal <input type="submit"> and use CSS to specify a background image. E.g.

<input type="submit" name="cmd_delete" class="delete" value="" />

with

input.delete {
    background-image: url('bin/images/common/delete.png');
    width: 20px;
    height: 20px;
    border: 0;
    cursor: pointer;
}

and check it as follows

if (isset($_GET['cmd_delete'])) {
    // Delete button pressed.
}

Answer 5

Try:

<input type="button" class=”button” value="Delete" title="Delete" name="cmd_delete" />

.button{
      background: url('bin/images/common/delete.png') no-repeat top;
}

Answer 6

You could use <button name="cmd_delete" value=""><img src=".."/></button> instead of input.