IE Renders extra table rows

Question

Working on an ASP MVC web app. I have a dynamically populated table to display search results. The results look good in Chrome and FF, but in IE7 it adds rows above the header row. There is no added source code that I can see in the rendered 'page source'.

As you can see in the following image, there are a bunch of rows added (without content). The html as written (in MVC) is:

<div class="detailSection">

<h2>Search Results</h2>
<p style="font-size:1.2em; font-weight: bold;">Applicant: <%: Html.DisplayFor(m => m.NewPersonModel.FirstName) %>
        <%: Html.DisplayFor(m => m.NewPersonModel.LastName) %></p>

<p>Your search has returned the following results.  If the current applicant has an existing record, 
        select the record and click the 'Compare' button at the end of the list.</p>

    <% Html.BeginForm("Compare", "NewApplicant"); %>

        <table id="s_ResultsTable" class="grid-striped">
            <tr>
                <th>Select</th>
                <th>First Name</th>
                <th>Middle Name</th>
                <th>Last Name</th>
                <th>Date of Birth</th>
                <th>Alias?</th>
            </tr>
                <% if (Model.PersonSearchModel.Count == 0)
                { %>
                <tr>
                    <td colspan="6">There are no matching volunteer records.  <%: Html.ActionLink("Return to Detail page", "Detail", "NewApplicant", new { id = Model.NewPersonModel.ApplicantID }, null)%> to verify and save the application.</td>
                </tr>

                <%}%>

                <% var rowCount = 0;

                    foreach (var item in Model.PersonSearchModel)
                   { %>
                    <tr class="row<%: rowCount++%2 +1 %>">
                        <%: Html.HiddenFor(m => item.PersonID) %>
                        <%: Html.HiddenFor(m => m.NewPersonModel.ApplicantID) %>
                        <td class="resultsRadio"><%: Html.RadioButton("SelectedResult", item.PersonID) %></td>
                        <td><%: Html.DisplayFor(m => item.FirstName)%></td>                        
                        <td><%: Html.DisplayFor(m => item.MiddleName)%></td>                        
                        <td><%: Html.DisplayFor(m => item.LastName)%></td>                        
                        <td><%: Html.DisplayFor(m => item.DOB)%></td>                                                    
                        <td><%: Html.DisplayFor(m => item.IsAlias)%></td>                                                    
                    </tr>
                <%}%>
        </table>
        <div id="searchButtonDiv">
            <input type="hidden" id="SelectedPerson" name="SelectedPerson" value="" />
            <input type="submit" id="submit" class="SKButton" value="Compare" />
  <input type="button" class="SKButton" value="Back to Detail" title="Return to detail page" onclick="location.href='<%:@Url.Action("Detail", "NewApplicant", new { id = Model.NewPersonModel.ApplicantID }) %>'" />

        </div>
<% Html.EndForm(); %>
</div>

This renders in the browser as:

<p>Your search has returned the following results.  If the current applicant has an existing record, 
        select the record and click the 'Compare' button at the end of the list.</p>


    <form action="/webapps/Eligibility/NewApplicant/Compare" method="post">

        <table id="s_ResultsTable" class="grid-striped">
            <tr>
                <th>Select</th>
                <th>First Name</th>
                <th>Middle Name</th>
                <th>Last Name</th>
                <th>Date of Birth</th>
                <th>Alias?</th>
            </tr>
                    <tr class="row1">
                        <input id="item_PersonID" name="item.PersonID" type="hidden" value="41838" />
                        <input id="NewPersonModel_ApplicantID" name="NewPersonModel.ApplicantID" type="hidden" value="718" />
                        <td class="resultsRadio"><input id="SelectedResult" name="SelectedResult" type="radio" value="41838" /></td>
                        <td>Steven</td>                        
                        <td></td>                        
                        <td>Amos</td>                        
                        <td>11/22/1977</td>                                                    
                        <td>No</td>                                                    
                    </tr>

                    <tr class="row2">
                        <input id="item_PersonID" name="item.PersonID" type="hidden" value="54477" />
                        <input id="NewPersonModel_ApplicantID" name="NewPersonModel.ApplicantID" type="hidden" value="718" />
                        <td class="resultsRadio"><input id="SelectedResult" name="SelectedResult" type="radio" value="54477" /></td>
                        <td>Steven</td>                        
                        <td></td>                        
                        <td>Atkinson</td>                        
                        <td>09/23/1963</td>                                                    
                        <td>No</td>                                                    
                    </tr>
        </table>
        <div id="searchButtonDiv">
            <input type="hidden" id="SelectedPerson" name="SelectedPerson" value="" />
            <input type="submit" id="submit" class="SKButton" value="Compare" />
  <input type="button" class="SKButton" value="Back to Detail" title="Return to detail page" onclick="location.href='/webapps/Eligibility/NewApplicant/Detail/718'" />

        </div>
</form>
</div>

Here is how the same page renders in any other browser:

Any idea why it would do this?

EDITTED to add more code. One thing I noticed in the rendered source is the repeat use of ID, which should obviously be classes. Using MVC Html helpers sets the ID, so I am looking into how to stop it from doing that and changing to a class.

Answer 1

There's got to be some funked up HTML in there somewhere. Maybe an unclosed tag, or something like that, where most browsers forgive it.

I'd say strip out as much of the HTML on the page as you can, a little at a time, until it looks normal - that will find your culprit.

Answer 2

Found the problem, it did not like the 2 inputs that were inside tags, but not in any kind of , , etc. I put them inside the first and all is fine.

Offending part:

<tr class="row2">
                        <input id="item_PersonID" name="item.PersonID" type="hidden" value="163" />
                        <input id="NewPersonModel_ApplicantID" name="NewPersonModel.ApplicantID" type="hidden" value="718" />
                        <td class="resultsRadio"><input id="SelectedResult" name="SelectedResult" type="radio" value="163" /></td>
                        <td>steven</td>                        
                        <td></td>                        
                        <td>Terpin</td>                        
                        <td>04/14/1956</td>                                                    
                        <td>Yes</td>                                                    
                    </tr>

Now corrected to:

                      <tr class="row2">
                        <td class="resultsRadio"><input id="SelectedResult" name="SelectedResult" type="radio" value="54477" /><input id="item_PersonID" name="item.PersonID" type="hidden" value="54477" /><input id="NewPersonModel_ApplicantID" name="NewPersonModel.ApplicantID" type="hidden" value="718" /></td>
                        <td>Steven</td>                        
                        <td></td>                        
                        <td>Atkinson</td>                        
                        <td>09/23/1963</td>                                                    
                        <td>No</td>                                                    
                    </tr>

Thank you all for you suggestions.