Invalid nesting of empty tags

[simonellistonball]

Firstly, apologies - I've only tested this in FF2.

I have the following as a tab.

<div id="location" class="tab-content">
<div>
<div id="inner1" class="panel">
<h4>Something</h4>
<div id="location-grid"/>
</div>
<div id="inner2" class="panel">
<h4>Something else</h4>
<div id="another-grid"/>
</div>
</div>
</div>


Once Ext has had its way with the tab, and rendered the grids, the html looks like this:

tab
|--inner1
|--<h4>Somthing</h4>
|--location grid stuff
|--inner2
|--<h4>Somthing else</h4>
|--another grid


However, if the divs are closed as follows: <div id="another"></div> then all works fine.

[tryanDLS]

I just tested this with 1.0 and the HTML is rendered correctly. Is this what you're doing?

var tabs = new Ext.TabPanel('tab1');
tabs.addTab('inner1', "One");
tabs.addTab('inner2', "Two");
tabs.activate('inner1');

<div id="tab1" style="width:300px;height:200px">
<div>
<div id="inner1">
<h4>Something</h4>
<div id="location-grid"/>
</div>
<div id="inner2">
<h4>Something else</h4>
<div id="another-grid"/>
</div>
</div>
</div>

[jack.slocum]

This has nothing to do with Ext. My guess is the browser is moving them during render because it doesn't like <div/>

[simonellistonball]

Thanks Jack, wasn't sure if it was some fancy regex optimisation in Ext's Dom stuff, or if it was a firefox bug. I'll try and track down exactly where it's going wrong and report it to them instead.

[simonellistonball]

Actually, the code I sniped was just the content of one tab, so it was more like:
tab.add('location'); which caused the problem.