Self-closing div tags break tabs

[xirzec]

If you have a self-closing div tag inside of tab content, all content in following divs will not render.

Example:

<div id="tabs"> <ul>

<li><a href="#tab1">Tab1</a></li> <li><a href="#tab2">Tab2</a></li>

</ul> <div id="tab1">

<p>tab1</p> <div/>

</div> <div id="tab2">

<p>tab2</p>

</div> </div>

The text "tab2" will not be shown.

However if this is changed so the div is not self closing:

<div id="tabs"> <ul>

<li><a href="#tab1">Tab1</a></li> <li><a href="#tab2">Tab2</a></li>

</ul> <div id="tab1">

<p>tab1</p> <div></div>

</div> <div id="tab2">

<p>tab2</p>

</div> </div>

The problem vanishes.

[xirzec]

Whoops, forgot to do the wikiformatting:

<div id="tabs">
<ul>
  <li><a href="#tab1">Tab1</a></li>
  <li><a href="#tab2">Tab2</a></li>
</ul>
<div id="tab1">
  <p>tab1</p>
  <div/>
</div>
<div id="tab2">
  <p>tab2</p>
</div>
</div>

and

<div id="tabs">
<ul>
  <li><a href="#tab1">Tab1</a></li>
  <li><a href="#tab2">Tab2</a></li>
</ul>
<div id="tab1">
  <p>tab1</p>
  <div></div>
</div>
<div id="tab2">
  <p>tab2</p>
</div>
</div>

[rdworth]

Self-closing DIV (<div/> instead of <div></div>) is invalid HTML. Valid self-closing HTML tags are AREA, BASE, BASEFONT, BR, HR, INPUT, IMG, LINK, and META. As such, what the browser does with <div/> is really out of our hands.