Datatable rides up over top of page header

scaiferw

I have DataTables working well except for one thing.

My pages have a header bar with the site title and nav links. The header bar (#top) is fixed position so that vertically scrolling page content slides underneath it and it always stays visible.

The problem is that the datatable rides up over top of the header bar instead of sliding under it.

Unfortunately this is on an Intranet page and I can't link to it.

Can anyone help me solve this problem? The relevant CSS is below.



[code]#top_offset, #top {
height:30px;
}

#top_offset {
margin-bottom:25px;
}

#top {
padding: .5em;
border-bottom: 1px solid navy;

color: white;
background-color: #006;


/* ----- MAKE TOP MENU FIXED, CONTENT SCROLLS UNDER ----- */

/* *** DON'T FORGET TO ENABLE #TOP_OFFSET *** */
position:fixed;
top:0;
width:98.5%;
left:50%;
margin-left:-49.825%;

/* ----- /make top menu fixed, content scrolls under ----- */

}[/code]

essexsteph

I do the same on one of my websites. My header is contained in a span with the following:

[code]
.header {
position:fixed;
left:0;
top:0;
width:100%;
z-index: 100;
background-color: #465a84"
}
[/code]

I wonder if the missing bit in yours is 'z-index'.

Steph

scaiferw

Why, aren't you just the genius today Steph!

Simply added that one line to my #top and that's it.

I'm going to have to read up on z-index.

Many thanks,

Rob