Nested BorderLayout results in border over tabs

[js_coder]

I have a BorderLayout within a TabPanel item (which is itself within a BorderLayout) that has a 1px blue border at the bottom where the other tabs do not. Here is my code and a screenshot (Firefox 3.5 on Linux).

http://dev.703designs.com/border-problem.png


Ext.onReady(function() {
var panel = Ext.get('admin-query-panel');

Ext.DomHelper.overwrite(panel, {
children: [{
id: 'admin-query-queries'
}, {
id: 'admin-query-data'
}]
});

var queryPanel = new Ext.ContentPanel('admin-query-queries');
var data = new Ext.ContentPanel('admin-query-data');

var getPanelHeight = function() {
return panel.dom.parentNode.offsetHeight / 2;
};

var layout = new Ext.BorderLayout(panel, {
north: {
split: true,
initialSize: getPanelHeight()
},

center: {
split: true,
initialSize: getPanelHeight()
}
});

layout.beginUpdate();
layout.add('north', queryPanel);
layout.add('center', data);
layout.endUpdate();
});