break a css layer out of a table cell

Hello,

I have too work with 3rd party code which I am not allowed to modify. It is .jsp code that calls(includes) a header file which I am alloud to modify. However the header unfortunatly is trapped inside a table cell that is 540 px wide but I want my header to span the full width of the page. I built the Header.jsp with a css layer. If I set the layer property to width=100% well 100% of 540 is 540 so it comes out short. If I set the absolute px width than at 860 screen resolution the header gets cut off. Here is some 'view source' code to just generate the .jsp to html:

</head>



<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">

<!------------------------------The Login Page calls itself to verify login info and then redirects--------------->

<TABLE width="540" border="0" cellspacing="0" cellpadding="0" >
<TR>
<TD align="left" valign="top" nowrap>
<form NAME="Login" onSubmit="return checkRequired()" ACTION="LoginValidate.jsp" METHOD="post">
<input type="hidden" name="finalize" value="0">

<!------------------------------------------------------HEADER--------------------------------------------------------->

<p>&nbsp;</p>
<div id="Layer1" style="position:absolute; width:100%; height:115px; z-index:1; top: 0;">
<table border=0 cellpadding=0 cellspacing=0 align="center" width="100%">

Blah blah blah.

So you see that a 100% table is created then a 540px table with the 'include/header.jsp' code.

So Basically is there a way to break out of the table cell? I understand 'float' allows you to overide the inherited structure but it does'nt really apply here?

here is a url: URL

The header at the top needs to span the whole page. The header file is the upper blue banner as well ast the light blue faded banner logo.

Thanks in advance...

I am going to answer my own question here but thanks to those for looking. In the header.jsp file I use JS to find the client screen resolution and print the <div> based on that.
<SCRIPT LANGUAGE="JavaScript">
//-->
//alert('Screen Resolution=' + screen.width + "x" + screen.height);
var height=0;
height = screen.height;

if (height >= 650) {
document.write('<div id="Layer1" style="position:absolute; width:984; height:140px; z-index:1; top: 0; left: 10;">')
} else {
document.write('<div id="Layer1" style="position:absolute; width:760; height:140px; z-index:1; top: 0; left: 10;">')
}
</script>



<table border=0 cellpadding=0 cellspacing=0 align="center" width="100%">

and so on...

It's a shame the table does not have an id tag, as this would have made grabbing it and changing the size a piece of cake.

You could walk the DOM until you find the table (perhaps it's always guaranteed to be the first table on screen, if so then use var atable = document.getElementsByTagName('table')[0]

and then use css to alter its width (that is if css can override a hardcoded width='' statement.

atable.style.width = '100%';

Hope this helps some..

Cha'mone.. OCB