#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2003
    Location
    Blacksburg Virginia
    Posts
    3
    Rep Power
    0

    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: https://eservices.blacksburg.gov/cli...dev/Index2.jsp

    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...
  2. #2
  3. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2003
    Location
    Blacksburg Virginia
    Posts
    3
    Rep Power
    0
    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...
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Location
    Lyon, France
    Posts
    49
    Rep Power
    11
    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

IMN logo majestic logo threadwatch logo seochat tools logo