Problem with fixed panels

I am trying to have a fixed top and side sections with scrolling content. Both
side sections have navigation links. The side provides external navigation and
the top provides internal navigation. The styles I have defined work fine until
I move to an internal link. When moving to the internal link the header vanishes.

This is the style definition as it now stands:

/*Creates a fixed left sidebar and header with scrolling content */
body
{
margin:0;
padding:152px 0 0 150px;
}
div#header
{
position:absolute;
top:0;
left:0;
width:500%;
height:150px;
}
div#left-sidebar
{
position:absolute;
top:152px;
left:0;
width:150px;
height:100%;
}
@media screen
{
body>div#header
{
position:fixed;
}
body>div#left-sidebar
{
position:fixed;
}
}
* html body
{
overflow:hidden;
}
* html div#content
{
height:100%;
overflow:auto;
}
#pagemenu
{
top:75px;
float:left;
}

On Mon, 15 Nov 2004 05:36:46 -0800, Charles Russell <cerjr (AT) surewest (DOT) net>
wrote:

I am trying to have a fixed top and side sections with scrolling
content. Both side sections have navigation links. The side provides
external navigation and the top provides internal navigation. The styles
I have defined work fine until I move to an internal link. When moving
to the internal link the header vanishes.

Gotta post a URL.

Neal wrote:

On Mon, 15 Nov 2004 05:36:46 -0800, Charles Russell <cerjr (AT) surewest (DOT) net
wrote:

I am trying to have a fixed top and side sections with scrolling
content. Both side sections have navigation links. The side provides
external navigation and the top provides internal navigation. The
styles I have defined work fine until I move to an internal link.
When moving to the internal link the header vanishes.


Gotta post a URL.
There is no URL yet this is still in development and being done on localhost.

Here is the HTML for the body with the php file names omited.

<code>
<div id='header'>
<img src="images/logo.gif" style="float:left" />
<br />

<!-Make a page navigation bar for this page -->
<div id="pagemenu">
<a href="#su">Sunday</a> <a href='#mo'>Monday</a> <a href="#tu">Tuesday</a>
<a href="#we">Wednesday</a> <a href="#th">Thursday</a> <a href="#fr">Friday</a>
<a href="#sa">
Saturday</a></div>
</div>
<div id='left-sidebar'>
<span class="navhead">Timesheets</span><br/>
<a href="xxx.php" class="leftnav">Enter New Timesheet</a><br/>
<a href="xxx.php" class="leftnav">Review Timesheets</a><br/>
<a href="xxx.php" class="leftnav">Print a Timesheet</a><br/>
<a href="xxx.php" class="leftnav">Modify Timesheet</a><br/>
<a href="xxx.php" class="leftnav">Manage Projects</a><br />
<hr/>
<span class="navhead">Vehicle Maintenance</span></br>
<a href="xxxx.php" class="leftnav">Inspection</a><br />
<a href="xxx.php" class="leftnav">Maintenance</a><br/>
<a href="xxx.php" class="leftnav">View Vehicle Record</a><br/>
<hr/>
<span class="navhead">User Management</span></br>
<a href="xxxx.php" class="leftnav">Add User</a><br/>
<a href="xxxx.php" class="leftnav">Remove User</a><br/>
<a href="xxxx.php" class="leftnav">Modify User Info</a><br/>
<hr/>
<span class="navhead">Vehicle Management</span><br/>
<a href="xxxxx.php" class="leftnav">Add a Vehicle</a><br/>
<a href="xxxx.php" class="leftnav">Remove a Vehicle</a><br/>
<a href="xxxx.php" class="leftnav">Modify a Vehicle</a><br/>
<hr/>
<span class="navhead">Reports</span><br/>
<a href="xxxxxx" class="leftnav">Report</a><br/>
<hr/>
<a href="xxxx.php" class="leftnav">Log Out</a><br/>
</div>
<div id='content'>
Time sheet Of Charles Russell<br />for period <strong>11/14/2004</strong>
through <strong>11/20/2004</strong><br/>
<img src="images/blueline.gif">
<from method="post" action="xxxxx.php">
<div class='Timesheet'>
<div class='day'>
<a name='Su' /><strong>Sunday</strong><br />
<label for='hrs'>Hours<input type='text' name='hrs0_1'; style='width:2em' />
</label> <br />
<label for='hrs'>Hours<input type='text' name='hrs0_2'; style='width:2em' />
</label> <br />
<label for='hrs'>Hours<input type='text' name='hrs0_3'; style='width:2em' />
</label> <br />
<label for='hrs'>Hours<input type='text' name='hrs0_4'; style='width:2em' />
</label> <br />
<label for='hrs'>Hours<input type='text' name='hrs0_5'; style='width:2em' />
</label> <br />
<label for='hrs'>Hours<input type='text' name='hrs0_6'; style='width:2em' />
</label> <br />
<label for='hrs'>Hours<input type='text' name='hrs0_7'; style='width:2em' />
</label> <br />
<label for='hrs'>Hours<input type='text' name='hrs0_8'; style='width:2em' />
</label> <br />
</div><div class='day'>
<a name='Mo' /><strong>Monday</strong><br />
<label for='hrs'>Hours<input type='text' name='hrs1_1'; style='width:2em' />
</label> <br />
<label for='hrs'>Hours<input type='text' name='hrs1_2'; style='width:2em' />
</label> <br />
<label for='hrs'>Hours<input type='text' name='hrs1_3'; style='width:2em' />
</label> <br />
<label for='hrs'>Hours<input type='text' name='hrs1_4'; style='width:2em' />
</label> <br />
<label for='hrs'>Hours<input type='text' name='hrs1_5'; style='width:2em' />
</label> <br />
<label for='hrs'>Hours<input type='text' name='hrs1_6'; style='width:2em' />
</label> <br />
<label for='hrs'>Hours<input type='text' name='hrs1_7'; style='width:2em' />
</label> <br />
<label for='hrs'>Hours<input type='text' name='hrs1_8'; style='width:2em' />
</label> <br />
</div><div class='day'>
<a name='Tu' /><strong>Tuesday</strong><br />
<label for='hrs'>Hours<input type='text' name='hrs2_1'; style='width:2em' />
</label> <br />
<label for='hrs'>Hours<input type='text' name='hrs2_2'; style='width:2em' />
</label> <br />
<label for='hrs'>Hours<input type='text' name='hrs2_3'; style='width:2em' />
</label> <br />
<label for='hrs'>Hours<input type='text' name='hrs2_4'; style='width:2em' />
</label> <br />
<label for='hrs'>Hours<input type='text' name='hrs2_5'; style='width:2em' />
</label> <br />
<label for='hrs'>Hours<input type='text' name='hrs2_6'; style='width:2em' />
</label> <br />
<label for='hrs'>Hours<input type='text' name='hrs2_7'; style='width:2em' />
</label> <br />
<label for='hrs'>Hours<input type='text' name='hrs2_8'; style='width:2em' />
</label> <br />
</div><div class='day'>
<a name='We' /><strong>Wednesday</strong><br />
<label for='hrs'>Hours<input type='text' name='hrs3_1'; style='width:2em' />
</label> <br />
<label for='hrs'>Hours<input type='text' name='hrs3_2'; style='width:2em' />
</label> <br />
<label for='hrs'>Hours<input type='text' name='hrs3_3'; style='width:2em' />
</label> <br />
<label for='hrs'>Hours<input type='text' name='hrs3_4'; style='width:2em' />
</label> <br />
<label for='hrs'>Hours<input type='text' name='hrs3_5'; style='width:2em' />
</label> <br />
<label for='hrs'>Hours<input type='text' name='hrs3_6'; style='width:2em' />
</label> <br />
<label for='hrs'>Hours<input type='text' name='hrs3_7'; style='width:2em' />
</label> <br />
<label for='hrs'>Hours<input type='text' name='hrs3_8'; style='width:2em' />
</label> <br />
</div><div class='day'>
<a name='Th' /><strong>Thursday</strong><br />
<label for='hrs'>Hours<input type='text' name='hrs4_1'; style='width:2em' />
</label> <br />
<label for='hrs'>Hours<input type='text' name='hrs4_2'; style='width:2em' />
</label> <br />
<label for='hrs'>Hours<input type='text' name='hrs4_3'; style='width:2em' />
</label> <br />
<label for='hrs'>Hours<input type='text' name='hrs4_4'; style='width:2em' />
</label> <br />
<label for='hrs'>Hours<input type='text' name='hrs4_5'; style='width:2em' />
</label> <br />
<label for='hrs'>Hours<input type='text' name='hrs4_6'; style='width:2em' />
</label> <br />
<label for='hrs'>Hours<input type='text' name='hrs4_7'; style='width:2em' />
</label> <br />
<label for='hrs'>Hours<input type='text' name='hrs4_8'; style='width:2em' />
</label> <br />
</div><div class='day'>
<a name='Fr' /><strong>Friday</strong><br />
<label for='hrs'>Hours<input type='text' name='hrs5_1'; style='width:2em' />
</label> <br />
<label for='hrs'>Hours<input type='text' name='hrs5_2'; style='width:2em' />
</label> <br />
<label for='hrs'>Hours<input type='text' name='hrs5_3'; style='width:2em' />
</label> <br />
<label for='hrs'>Hours<input type='text' name='hrs5_4'; style='width:2em' />
</label> <br />
<label for='hrs'>Hours<input type='text' name='hrs5_5'; style='width:2em' />
</label> <br />
<label for='hrs'>Hours<input type='text' name='hrs5_6'; style='width:2em' />
</label> <br />
<label for='hrs'>Hours<input type='text' name='hrs5_7'; style='width:2em' />
</label> <br />
<label for='hrs'>Hours<input type='text' name='hrs5_8'; style='width:2em' />
</label> <br />
</div><div class='day'>
<a name='Sa' /><strong>Saturday</strong><br />
<label for='hrs'>Hours<input type='text' name='hrs6_1'; style='width:2em' />
</label> <br />
<label for='hrs'>Hours<input type='text' name='hrs6_2'; style='width:2em' />
</label> <br />
<label for='hrs'>Hours<input type='text' name='hrs6_3'; style='width:2em' />
</label> <br />
<label for='hrs'>Hours<input type='text' name='hrs6_4'; style='width:2em' />
</label> <br />
<label for='hrs'>Hours<input type='text' name='hrs6_5'; style='width:2em' />
</label> <br />
<label for='hrs'>Hours<input type='text' name='hrs6_6'; style='width:2em' />
</label> <br />
<label for='hrs'>Hours<input type='text' name='hrs6_7'; style='width:2em' />
</label> <br />
<label for='hrs'>Hours<input type='text' name='hrs6_8'; style='width:2em' />
</label> <br />
</div></div></form>
</div>
</body>
</html>
</code>

Charles Russell wrote:

Neal wrote:

Gotta post a URL.

There is no URL yet this is still in development and being done on
localhost. Here is the HTML for the body with the php file names omited.

</body>
</html>
</code>

Doesn't bode too well for the rest of the code. If you want us to help,
publish it somewhere and give us a URL. Ploughing through code manually
with no visual feedabck isn't fun.

Fixed header and sidebar at my site in sig.

--
Mark.
http://tranchant.plus.com/

Charles Russell <cerjr (AT) surewest (DOT) net> writes:

I am trying to have a fixed top and side sections with scrolling
content.

[...]

The
styles I have defined work fine until I move to an internal link.
When moving to the internal link the header vanishes.

Put the source online and reveal the source of the ad-hackery if you
didn't make it up yourself completely.

div#left-sidebar
{
position:absolute;
top:152px;

As it happens, a bell rings; don't use a top offset, you'll probably
need to DIV-soup that (nest, if you prefer) for IE/windows.

@media screen
{
body>div#header
{
position:fixed;
}
body>div#left-sidebar
{
position:fixed;
}
}
* html body
{
overflow:hidden;
}
* html div#content
{
height:100%;
overflow:auto;
}

Another bell rings; IE5/Mac *does* read the latter two rule sets as well
and won't like that much, if memory serves. They should be in the
@media rule as well.


--

) Più Cabernet,
-( meno Internet.
) http://bednarz.nl/