ASP.NET Image Control Renders in wrong DOM location

I have an ASP.NET Image Control that refuses to render inside of an HTML table.

You will see in the ASPX page that the ASP.NET image control is inside of the HTML table, towards the bottom of the table, below the biography textarea.

When the page populates with data, the image is moved from inside the HTML table, to above the HTML table.

Here’s the ASPX page source:

<asp:Panel ID="pnlMembers" runat="server" ClientIDMode="Static">

    <table>
        <tr>
            <td>
                Members: 
            </td>
            <td>
                <asp:DropDownList ID="ddlMembers" runat="server" ClientIDMode="Static" AutoPostBack="true" AppendDataBoundItems="true" OnSelectedIndexChanged="ddlMembers_SelectedIndexChanged">            
                </asp:DropDownList>                
                or <asp:Button ID="btnNew" runat="server" ClientIDMode="Static" Text="New Member" OnClick="btnNew_Click" />
            </td>
        </tr>
        <tr>
            <td>Name:</td> 
            <td><asp:TextBox ID="txtName" runat="server" ClientIDMode="Static"></asp:TextBox></td>
        </tr>
        <tr>
            <td>Email:</td>
            <td><asp:TextBox ID="txtEmail" runat="server" ClientIDMode="Static"></asp:TextBox></td>
        </tr>
        <tr>
            <td>Password:</td>
            <td><asp:TextBox ID="txtPassword" runat="server" ClientIDMode="Static" TextMode="Password"></asp:TextBox></td>
        </tr>
        <tr>
            <td>
                Repeat Password:
            </td>
            <td>
                <asp:TextBox ID="txtPassword2" runat="server" ClientIDMode="Static" TextMode="Password"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td>Bio:</td>
            <td>                            
                <textarea name="txtBioEditor" id="txtblogEditor" rows="10" cols="80" runat="server"></textarea>
            </td>
        </tr>
        <tr>
            <asp:Image ID="imgMember" runat="server" ClientIDMode="Static" />
        </tr>

        <tr>
            <td></td>
            <td>
                <asp:Button ID="btnSave" runat="server" ClientIDMode="Static" Text="Save" OnClick="btnSave_Click" />
                <asp:Button ID="btnCancel" runat="server" ClientIDMode="Static" Text="Cancel" OnClick="btnCancel_Click" />
            </td>
        </tr>
    </table>
    <script>
        CKEDITOR.replace("txtBioEditor");
    </script>
</asp:Panel>

In the code-behind, I am simply populating the page controls with member data from the DB when the dropdown list selected index is changed.

    protected void ddlMembers_SelectedIndexChanged(object sender, EventArgs e)
    {
        int selectedId = Convert.ToInt32(ddlMembers.SelectedValue);
        if (selectedId > 0)
        {
            Member m = new Member();
            m.GetMemberById(selectedId);
            if (m.MemberCount > 0)
            {
                txtName.Text = m.Name;
                txtEmail.Text = m.Email;
                txtblogEditor.InnerHtml = m.Biography;
                imgMember.ImageUrl = m.Image;
            }
        }
        else
        {
            ClearFields();
        }
    }

And here is how it renders:

<div id="pnlMembers">   
<img id="imgMember" src="/images/member3.jpg"><table>
    <tbody><tr>
        <td>
            Members: 
        </td>
        <td>
            <select name="ctl00$ctl00$ContentPlaceHolder1$ContentAdminMain$ddlMembers" onchange="javascript:setTimeout('__doPostBack('ctl00$ctl00$ContentPlaceHolder1$ContentAdminMain$ddlMembers','')', 0)" id="ddlMembers">
                <option value="0">Select Member</option>
                <option value="1">Member 1</option>
                <option value="2">Member 2</option>
                <option selected="selected" value="3">Member 3</option>
                <option value="4">Member 4</option>
            </select>                
            or <input type="submit" name="ctl00$ctl00$ContentPlaceHolder1$ContentAdminMain$btnNew" value="New Member" id="btnNew">
        </td>
    </tr>
    <tr>
        <td>Name:</td> 
        <td><input name="ctl00$ctl00$ContentPlaceHolder1$ContentAdminMain$txtName" type="text" value="Member 3 Name" id="txtName"></td>
    </tr>
    <tr>
        <td>Email:</td>
        <td><input name="ctl00$ctl00$ContentPlaceHolder1$ContentAdminMain$txtEmail" type="text" value="<a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="abc6cec6c9ced998ebccc6cac2c785c8c4c6">[email protected]</a>" id="txtEmail"></td>
    </tr>
    <tr>
        <td>Password:</td>
        <td><input name="ctl00$ctl00$ContentPlaceHolder1$ContentAdminMain$txtPassword" type="password" id="txtPassword"></td>
    </tr>
    <tr>
        <td>
            Repeat Password:
        </td>
        <td>
            <input name="ctl00$ctl00$ContentPlaceHolder1$ContentAdminMain$txtPassword2" type="password" id="txtPassword2">
        </td>
    </tr>
    <tr>
        <td>Bio:</td>
        <td>                            
            <textarea name="ctl00$ctl00$ContentPlaceHolder1$ContentAdminMain$txtblogEditor" id="txtblogEditor" rows="10" cols="80">Member 3 Bio</textarea>
        </td>
    </tr>
    <tr>
        
    </tr>

    <tr>
        <td></td>
        <td>
            <input type="submit" name="ctl00$ctl00$ContentPlaceHolder1$ContentAdminMain$btnSave" value="Save" id="btnSave">
            <input type="submit" name="ctl00$ctl00$ContentPlaceHolder1$ContentAdminMain$btnCancel" value="Cancel" id="btnCancel">
        </td>
    </tr>
</tbody></table>
<script>
    CKEDITOR.replace("txtBioEditor");
</script>

As you can see in the rendered HTML, the image element has been taken out of the table element, and inserted above the table, in the parent div. What is going on here? I appreciate your help.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

<tr>
<td>
        <asp:Image ID="imgMember" runat="server" ClientIDMode="Static" />
</td>
</tr>

As per my comment re rendering/positioning

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0