This is a migrated thread and some comments may be shown as answers.

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

1 Answer 40 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Randy
Top achievements
Rank 1
Randy asked on 03 Jan 2012, 12:41 AM
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


1 Answer, 1 is accepted

Sort by
0
Petyo
Telerik team
answered on 03 Jan 2012, 09:13 AM
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!
Tags
General Discussions
Asked by
Randy
Top achievements
Rank 1
Answers by
Petyo
Telerik team
Share this question
or