My JSP outputs the following code to the browser:

Code:
<?xml version="1.0"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head><link rel="stylesheet" href="/aspicio/Aspicio.css"><script type="text/javascript" src="/aspicio/js/yahoo.js" ></script><script type="text/javascript" src="/aspicio/js/event.js"></script><script type="text/javascript" src="/aspicio/js/dom.js"></script><script type="text/javascript" src="/aspicio/js/logger.js"></script><script type="text/javascript" src="/aspicio/js/connection.js"></script><script type="text/javascript" src="/aspicio/js/animation.js"></script><script type="text/javascript" src="/aspicio/js/dragdrop.js"></script><script type="text/javascript" src="/aspicio/js/treeview.js"></script><script type="text/javascript" src="/aspicio/js/container.js"></script><script type="text/javascript" src="/aspicio/js/menu.js"></script><script type="text/javascript" src="/aspicio/js/YahooExtensions.js"></script><script type="text/javascript" src="/aspicio/js/fcl.js"></script><title>Area Maintenance</title></head><body ><body><div id="message">

</div><div id="menu">

<script type="text/javascript" src="/aspicio/js/fclmenu.js"></script><div class="MenuBar " ><span class="MenuButton" onmouseover="buttonMouseover(this, 'Menu24676841');" onclick="return buttonClick(this, 'Menu24676841');">Static Data</span><span class="MenuButton" onmouseover="buttonMouseover(this, 'Menu1375978');" onclick="return buttonClick(this, 'Menu1375978');">Application Data</span></div><div  id="Menu24676841"  class="Menu " >Area/Postal/Zip CodesClass ControlCompaniesHouse ComponentsContactsContactTypesCountriesCountry sub-entitiesCurrencies<span  class="MenuItem "  onclick="clearActiveButton();0"  >DateInfo</span>Economic GroupsLanguagesMarketsMain Menu GroupingsSupply-Chain PlayersPlayer TypesTimeZonesUsersUser Groups</div><div  id="Menu1375978"  class="Menu " >Tax No ValidationsApplication ClassesApplication Components</div></div><div id="titleBar">Area Maintenance</div><div id="content">

<script type='text/javascript' src='/aspicio/dwr/engine.js'></script>
<script type='text/javascript' src='/aspicio/dwr/util.js'></script>
<script type="text/javascript" src="/aspicio/dwr/interface/RemoteEntityLister.js"></script>
<script type="text/javascript" src="/aspicio/js/dom.js"></script>
<script type="text/javascript" src="/aspicio/js/YahooExtensions.js"></script>
<script type="text/javascript" src="/aspicio/js/yui-ext.js"></script>
<script type="text/javascript" src="/aspicio/js/AspicioGridDataModel.js"></script>
<script type="text/javascript" src="/aspicio/dwr/util.js"></script>
<script type="text/javascript">
DWREngine.setTextHtmlHandler(function()
{
	alert("DWR call rejected by server.\nSession timed out. Reloading page");
	top.location.href.reload(true);
});

var AreaTabset = null;
var AreaListTab = null;
var AreaFormTab = null;
var AreaListerId = null;
var AreaDataModel = null;
var AreaGrid = null;

function bodyOnLoad()
{
	AreaTabset = new YAHOO.ext.TabPanel("MaintenanceTabset");
	AreaFormTab = AreaTabset.addTab("AreaFormTab", "Area");
	AreaListTab = AreaTabset.addTab("AreaListTab", "Area List");
	editArea(0);
}

function editArea(row)
{
	AreaFormTab.getUpdateManager().update("/aspicio/editUser.do?type=Area&id=" + row);
	AreaFormTab.activate();
}

function loadAreaListTab(form)
{
//	Use YAHOO's Connection to collect all form values (Except uuid and version) into a string.
	form.uuid.disabled = true;
	form.uuid.version = true;
	YAHOO.util.Connect.setForm(form);
	form.uuid.disabled = false;
	form.uuid.version = false;

//	Switch to the list tab
	AreaListTab.activate();

	var paramString = YAHOO.util.Connect._sFormData;
	YAHOO.widget.Logger.log("Submitting criteria: '" + paramString + "'");
	RemoteEntityLister.createEntityLister(paramString, createAreaGrid);
}

function createAreaGrid(id)
{
	AreaListTab.bodyEl.setStyle("width", AreaListTab.bodyEl.getWidth() + "px");
	AreaListerId = id;
	AreaDataModel = new YAHOO.ext.grid.AspicioDataModel(AreaListerId);
	AreaGrid = new YAHOO.ext.grid.Grid("AreaListTab", AreaDataModel, AreaDataModel);
	AreaGrid.autoSizeColumns = true;
	AreaGrid.minColumnWidth = 50;
	AreaGrid.render();
}

</script>
<body onload="bodyOnLoad()">
	<div id="MaintenanceTabset" style="height:550px">
		<div id="AreaFormTab" class="tab-content"></div>
		<div id="AreaListTab" class="tab-content" style="height:500px">
		</div>
	</div>
</body>
</div></body></html>
This displays:



There are no header boundaries.

The columns are autosized too wide.

Double clicking on the header when the cursor changes to resize (It does think there are column header boundaries) shrinks column size to about 5px.

Resizing a column header does not resize the data columns.

The header does not scroll left/right when the data table is scrolled left/right.

I know this stuff works in the examples, so it must be something I'm doing wrong, hence posting in "Help".

Also, the tabs are not displaying right. There's a line under the tab labels seperatring them from the body - the active tabpanel doesn't "flow" into the label.