tags:

views:

60

answers:

3

Hallo Friends,

I need a button with text on it in 2 lines. The length of the text is more than the space i have for it.:-) Image is not of my preference.

I have used the following code

    <tr>
        <td align="center">
             <button type="submit" name="add_invoice" id="buttonstyle">
                  Add to Ready for<br />
                  Invoicing
              </button>
        </td>  
     </tr>

   <tr>
    <td align="center" colspan="2">
         <input type="submit" name="delete" value="Delete">
     </td>
  </tr>

This is working pretty good in IE 7.0.

But in IE 6.0 eventhough i click the second button delete, in $_POST, it is returning the values of both the buttons. it has the value of [add_invoice] and [delete]. So i am not able to figure it out which one is clicked (in IE 6.0 Only).

Please help me to understand this behaviour. Let me know if you know any other alternative.

Thanks in advance!

+3  A: 

The <button> element is buggy in IE. Try using an <input type="submit"> ?

EDIT: Since you need it to span 2 lines, I suggest styling the input submit or creating an image, unfortunately.

EDIT #2: You can also probably use <!--[if IE 6]> conditionals to feed an input type='image' to IE6 and button to other browsers if it really matters.

meder
As they note, they need a button with two text lines which most likely would rule out `<input>`.
Joey
I say just use an `input type="image"` with alt attribute and be done with it. Nothing wrong with it. You can also probably alter the value of the `button` innerHTML on `submit` with JS but that's overkill.
meder
Thanks for the reply. My client has a very poor internet speed and the page i have created has already many images. So i thought of avoiding images.
lucky
You can use a sprite sheet and apply it to `input type="submit"` elements. You need to use `line-height` for IE and `text-indent` for non-IE to shift the text out after applying a background image.
meder
A: 

you've used one <button> tag and one <input type='submit'> tag. These two work differently; you probably want to use the same tag for both of them. (probably ).

The tag is generally used for forms which use Javascript actions rather than actually submitting the form.

[edit]

The need to have a multi-line submit button plus the need to support IE6 is a problematic combination. You may end up being forced to use an image (the horror!) (I'm in the fortunate position of not having to support IE6 any more, but I know others aren't so lucky)

Spudley
+1  A: 

I do not know if this would work or not, but you could probably use a javascript onClick event to trigger the submit.

<tr>
    <td align="center">
         <button type="submit" onClick="document.formname.submit();" name="add_invoice" id="buttonstyle">
              Add to Ready for<br />
              Invoicing
          </button>
    </td>  
 </tr>

Remember to replace formname with the actual formname if this is to work, which I do not know if it will, as I do not have IE6 setup, I cannot test it.

UPDATE

I am not sure if this would be worth it or not, but you can set it up like this (or in a function) to have the value be changed.

<tr>
    <td align="center">
         <button type="submit" onClick="document.formname.delete.value = ''; document.formname.submit();" name="add_invoice" id="buttonstyle">
              Add to Ready for<br />
              Invoicing
          </button>
    </td>

Which should set the delete value to be empty. It is hackish and not sure if I would do it this way, but it is a way to achieve it. I would probably store that in a function, however, and just call the function. For demonstration / testing reasons, I did not do that for this example.

Brad F Jacobs
Thanks for your reply. I have tried this as well, but in $_POST it is returning the values of both the buttons.
lucky