Bug with <div></div> vs <div />?

2 posts, 0 answers
  1. Randy
    Randy avatar
    73 posts
    Member since:
    Jan 2009

    Posted 02 Jan 2012 Link to this post

    I think I found a bug in either KendoUI or jQuery, I am not good enough in either to be sure which. I tend to like short code so I have taken to removing the closing tag in most of my HTML have have no direct content, so I would do: <div /> rather than <div></div>. With both the Kendo Grid and Template they generate different html depending on which syntax I use.

    <div id="manGrid" class="col4" style="width: 800px; height: 500px; background-color: Green !important; "></div>
    <p>Hello World</p>
    <br /><br />
    <div id="radGrid" class="col4" style="width: 800px; height: 500px; background-color: Yellow !important; " ></div>
                                               
    Yields:
    <div id="manGrid" class="col4" style="width: 800px; height: 500px; background-color: Green !important; "></div>
    <p>Hello World</p>
    <br>
    <br>
    <div id="radGrid" class="col4 k-grid k-widget" style="width: 800px; height: 500px; background-color: Yellow !important; " tabindex="0">

    This would be the expected behavior, but the syntax I prefer give me.

    Where as:
    <div id="manGrid" class="col4" style="width: 800px; height: 500px; background-color: Green !important; " />
    <p>Hello World</p>
    <br /><br />
    <div id="radGrid" class="col4" style="width: 800px; height: 500px; background-color: Yellow !important; " />
                                               
    Yields:

    <div id="manGrid" class="col4" style="width: 800px; height: 500px; background-color: Green !important; ">
    <p>Hello World</p>
    <br>
    <br>
    <div id="radGrid" class="col4 k-grid k-widget" style="width: 800px; height: 500px; background-color: Yellow !important; " tabindex="0">
    </div>


    Both have the same javascript code. The first div is replaced with a template while the second is replaced with a grid. The problem being is the second becomes a child of the first with the <div /> sentax, while they are peers with the <div></div> sentax.

    Thanks
    Randy


  2. Petyo
    Admin
    Petyo avatar
    2444 posts

    Posted 03 Jan 2012 Link to this post

    Hi,

    The DIV elements are non-void, so self-closing syntax is not applicable for them (it is not even considered valid HTML 5). You can read more about ti in this stackoverflow thread (some more info in W3.org). 

    Greetings,
    Petyo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top