Question

I’ve added a div overlay to my repeater control using absolute positioning. Predicably, this simply renders all of the divs in the same place. Is there any way that I can put this overlay over each row of my repeater?

<table style="border-style:None;width:350px;border-collapse:collapse;">
<tr>
    <td>
        <b>ID</b>
    </td>
    <td>
        <b>User Name</b>
    </td>
    <td>
        <b>Role</b>
    </td>
    <td>
        <b>Last Logged On</b>
    </td>
</tr>

<asp:Repeater ID="rptUsers" runat="server" 
    onitemdatabound="rptUsers_ItemDataBound">
    <ItemTemplate>
    <div style="position:absolute; top:57px; width:350px; height:16px;" />
    <tr>
       <td>
            <asp:Label id="lblUserID" runat="server" Text='<% # Eval("ID") %>'></asp:Label>
        </td>   
        <td>
            <asp:Label id="lblUserName" runat="server" Text='<% # Eval("UserName") %>' ></asp:Label>
        </td>   
        <td>
            <asp:Label ID="lblUserRole" runat="server" Text='<% # Eval("UserRole") %>' ></asp:Label>
        </td>
        <td>
            <asp:Label ID="lblUserLastLoggedOn" runat="server" Text='<% # ((DateTime)Eval("LastLogin") != DateTime.MinValue) ? Eval("LastLogin") : "Never" %>' ></asp:Label>
        </td>   

    </tr>    
    </ItemTemplate>
 </asp:Repeater>
 </table>

Answer 1

You should not have a <div> as a child of a <table>. You could try moving the <div> into the first <td> and then setting position: relative on the <tr>. Adding position relative will tell the absolutely positioned <div> to position itself relative to the <tr>. You’ll likely need to adjust the top and left CSS properties of the <div>.