Check out this jsFiddle link using Internet Explorer and another major browser:
Within the jsFiddle, click on the "Add Question" button to see a new row appear below. This row contains two buttons - one labeled "Select All Answers" and the other labeled "Remove All Answers".
In the major browser, these buttons are centered within the table as expected. However, in Internet Explorer, they are not centered and remain aligned to the left. Is there a specific piece of code causing this issue in Internet Explorer, or do I need to add something to ensure proper centering?
I attempted to use float:center, but it had no effect. I am uncertain whether the align method would be a better solution.
Here is the CSS and jQuery/HTML code:
.allBtnsRow{
text-align:center;
cursor:pointer;
font-size:85%;
}
.allRemoveBtnsRow{
text-align:center;
cursor:pointer;
font-size:85%;
}
Below is the jQuery/HTML code snippet:
$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);' />");