Fixed header/footer with shadow

If you need a static header on the web page for a menu system, or a static footer for some data (tips perhaps?) to be displayed, here is how.

Header HTML:

<div id="header" class="shadeh">content</div>

Header CSS:

#header {
position:fixed;
left:0px;
top:0px;
height:30px;
width:100%;
background:#999;
}
/* IE 6 */
* html #header{
position:absolute;
top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}
div.shadeh:after {
content: "";
position: fixed;
top: 0px;
left: 0;
width: 100%;
height: 30px;
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
box-shadow: 0px 0px 10px rgba(0,0,0,.8);
z-index: 100;
}

Footer HTML:

<div id="footer" class="shadef">content</div>

Footer CSS:

#footer {
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
background:#999;
}
/* IE 6 */
* html #footer {
position:absolute;
top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}
div.shadef:after {
content: "";
position: fixed;
bottom: 0px;
left: 0;
width: 100%;
height: 30px;
 
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
box-shadow: 0px 0px 10px rgba(0,0,0,.8);
 
z-index: 100;
}