Question

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

http://jsfiddle.net/7sARw/47/

Now in the jsFiddle, just click on the “Add Question” button and it will append a row underneath. In the row it shows 2 rows of letter buttons (each row containing 7 letter buttons) and 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. Now the reason I believe it is doing this is because of the way the HTML is being formatted when appending the row: which seems to be going like this:

<tr><td><div><tr><td></td></tr></div></td></tr>

My question is that how can I change the format of the HTML so that it is valid but also be able to center everything in the appended rows in Internet Explorer?

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

.answer { 
    min-width:100%;
    max-width:100%;
    padding-top:5%;
    padding-bottom:5%;
     }

.answerBtnsRow{
    background-color: #ffffff;
    border: #666666 1px solid;
    color: black;
    font-weight:bold;
    display:none;
    cursor:pointer;
    font-size:85%;    
    }    


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

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

Below is Jquery/HTML code:

function insertQuestion(form) {

    var context = $('#optionAndAnswer');
    var currenttotal = context.find('.answerBtnsOn').length;

    var $tbody = $('#qandatbl > tbody');
    var $tr = $("<tr class='optionAndAnswer' align='center'>");
    var $td = $("<td class='extratd'>");
    var $answer = $("<div class='answer'>3. Answer:<br/></div>");
    var $questionType = '';

    gQuestionIndex++;



    var $this, i = 0,
        $row, $cell;
    $('#optionAndAnswer .answers').each(function() {
        $this = $(this);
        if (i % 7 == 0) {
            $row = $("<tr/>").appendTo($answer);
            $cell = $("<td/>").appendTo($row);
        }
        var $newBtn = $(("<input class='answerBtnsRow answers' type='button' style='display:%s;' onclick='btnclick(this, " + gQuestionIndex + ");' />").replace('%s', $this.is(':visible') ? 'inline-block' : 'none')).attr('name', "value[" + gQuestionIndex + "][]").attr('value', $this.val()).attr('class', $this.attr('class')).attr('id', $this.attr('id') + 'Row');
        $newBtn.appendTo($cell);

        i++;
    });    var $this = $(this);
    var $BtnsClass = '';

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

    if ($questionType == 'True or False' || $questionType == 'Yes or No') {
        $BtnsClass = $("<input class='allBtnsRow btnsAll' type='button' style='display: none;' value='Select All Answers' onClick='selectAll(this);' /><input class='allRemoveBtnsRow btnsRemove' type='button' style='display: none;' value='Remove All Answers' onClick='removeAll(this);' />");
    } else {
        $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($cell);





    $tr.append($td);
    $td.append($answer);
    $tbody.append($tr);

    count++;
    $('#optionAndAnswer .answerBtns').hide();

    updateAnswer($answer, gQuestionIndex);



}

Answer 1

var $td = $("<td class='extratd'>");
var $answer = $("<div class='answer'>3. Answer:<br/></div>");

should likely be

var $td = $("<td class='extratd' />3. Answer:<br/></td>");
var $answer = $("<table class='answer'><tbody></tbody></table>");

or

$cell = $("<td>3. Answer<br/></td>").appendTo($row);