Question

I have a jsFiddle here, please open in Internet Explorer and in one other major browser:

http://jsfiddle.net/6bv7j/1/

Now in the jsFiddle, just click on the “Add Question” button, and it will append a row underneath. In the row it shows two buttons, one known as “Select All Answers” and other known as “Remove All Answers”.

Now in the major browser, the buttons are centered in the table which is fine. But in Internet Explorer it is not centered, it is still aligned to the left. Is there a piece of code which is causing it to not center in Internet Explorer or do I need to add something in order to be able to center it in Internet Explorer?

I tried float:center, but this did not work. I’m not sure if it’s best to use the align method.

Below is the CSS and jQuery/HTML of the code:

.allBtnsRow{
    text-align:center;
    cursor:pointer;
    font-size:85%;
}

.allRemoveBtnsRow{
    text-align:center;
    cursor:pointer;
    font-size:85%;
}

Below is jQuery/HTML code:

$BtnsClass = $("<input class='allBtnsRow btnsAll' type='button' value='Select All Answers' onClick='selectAll(this);' /><br/><input class='allRemoveBtnsRow btnsRemove' type='button' value='Remove All Answers' onClick='removeAll(this);' />");

Answer 1

You don’t need tr and td inside a div. Remove $row and $cell and append $BtnClass to $answer:

// $row = $("<tr/>").appendTo($answer);
// $cell = $("<td/>").appendTo($row);

$BtnsClass = $("<input class='allBtnsRow btnsAll' type='button' value='Select All Answers' onClick='selectAll(this);' /><br/><input class='allRemoveBtnsRow btnsRemove' type='button' value='Remove All Answers' onClick='removeAll(this);' />");

$BtnsClass.appendTo($answer);