Element 'div' cannot be nested within element 'ul'

Question

 <ul>
           <div style="float:left">
                   <asp:LinkButton ID="lbtnFirst" runat="server" CausesValidation="false" OnClick="lbtnFirst_Click">İlk</asp:LinkButton></div> 
           <div style="float:left"><asp:LinkButton ID="lbtnPrevious" runat="server" CausesValidation="false" OnClick="lbtnPrevious_Click"> << </asp:LinkButton></div>
</ul>

In my Asp.net project I get this Warning :

Validation (XHTML 1.0 Transitional): Element 'div' cannot be nested within element 'ul'.

But when I click F5 everthing woks great. Now I am working on localhost in Visual Studio 2013 (Code side is C#) I want to ask can this make problem for my site in future ?

Answer 1

The warning is, well, a warning. Your page is displayed correctly only because the browser is not too strict on the HTML rules, but that may change in the future. For that reason, you should try to keep your HTML compliant and take the warnings seriously. In this case, I would suggest to replace the <div> with <li> tags and style them to prevent the margins and bullets (I assume that's why you're using <div> instead of <li> in the first place).

To achieve what you want, apply this CSS style to your list:

.your-ul {
    list-style: none;
}

.your-ul li {
    position:relative;
    margin-left: 0;
    display: inline-block;
}

Your HTML/ASPX code would look like this:

<ul class="your-ul">
    <li><asp:LinkButton ID="lbtnFirst" runat="server" CausesValidation="false" OnClick="lbtnFirst_Click">Ilk</asp:LinkButton></li> 
    <li><asp:LinkButton ID="lbtnPrevious" runat="server" CausesValidation="false" OnClick="lbtnPrevious_Click"> << </asp:LinkButton></li>
</ul>

Answer 2

You can still use your div tag, it just needs to be wrapped in a li element.

<ul>
<li>
    <div style="float:left">
        <asp:LinkButton ID="lbtnFirst" runat="server" CausesValidation="false" onClick="lbtnFirst_Click">İlk</asp:LinkButton>
    </div>
    <div style="float:left">
        <asp:LinkButton ID="lbtnPrevious" runat="server" CausesValidation="false" OnClick="lbtnPrevious_Click"> << </asp:LinkButton>
    </div>
</li>

Although, as others have said, you can also just apply the styles directly to li element.

Answer 3

Normally one would expect a ul element to contain li elements. It may make sense for the li elements to contain divs but it doesn't make a lot of sense to have divs (or anything else) as immediate children of a ul. You could change your divs to lis, perhaps that's what you're looking for?