Using a Repeater control, I am displaying a list of elements with the following code snippet:
<td id="tdLeftBlock">
<ul id="leftList">
<asp:Repeater ID="rptLatestListingsLeft" runat="server"
OnItemDataBound="rptLatestListingsLeft_OnItemDataBound">
<ItemTemplate>
<div id="divMapPinLeft" runat="server">
<asp:Label runat="server" ID="lblMapPinIndexLeft"></asp:Label>
</div>
<li id='<%# String.Format("liBusiness{0}", Eval("BusinessID")) %>'
style="padding-bottom: 30px">
<asp:HyperLink ID="lnkBusiness" runat="server">
<%# Eval("BusinessName")%>
</asp:HyperLink>
<div class="divAddressLeft"><%# Eval("City")%>, <%#
Eval("ProvinceCode")%></div>
<div id="divStatusLeft"><%# GetStatus(Eval("BusinessID"))%> |
<span class="statusTag"><%# GetDay(Eval("UpdateDate"))%></span></div>
</li>
</ItemTemplate>
</asp:Repeater>
</ul>
</td>
In terms of rendering, browsers like Firefox properly display the div #divMapPinLeft at the same level as its li sibling. However, Internet Explorer places the div under the li in each Repeater item due to recognizing a different hierarchy. Any solutions or suggestions are welcome. Thank you.