I had a need to use multiple submit buttons on a form and style them using CSS as clickable answers in a quiz. It all works fine in all browsers other than IE.

 <li>
   <input class="answer_button_lozenge clear-float " name="answer_646" value="the answer" type="submit">                    
 </li>


.answer_button_lozenge
 {
    display:inline-block;
    font-size:105%;
    font-weight:bold;
    text-align:left;
    color:#FFFFFF;
    width:300px;
    background-color:#F6581E;
    border-style:none;
    cursor:pointer;
    padding:10px 10px 10px 10px;
    margin-top:10px;


 }

In IE(8), only the text 'the answer' and the border around the button is clickable. In Firefox et al, the whole area is clickable (desired behaviour).

Anyone know how to resolve this? Changing the input type is not an option at this stage. It needs to be a submit button.

  • I think I may have tracked this down to a js library called DDRoundies. Disabling JS solves the problem. codecowboy almost 6 years ago
  • Did you still need assistance? If so, I might try and reword things to what the new problem is. If not, you can delete the question :) Ktash almost 6 years ago
  • yes. codecowboy almost 6 years ago