Thursday, January 31, 2008

CSS Fixed footer, fixed header


/* Tested in IE6,IE7, Safari and FF */

html, body {
padding: 0;
margin: 0;
_background: url(nothing) fixed;
}

.fixed-bottom {
position: fixed;
bottom: 0;
left: 0;
_position: absolute;
_top: expression(document.body.scrollTop + (document.body.clientHeight - this.clientHeight));
}

.fixed-top {
position: fixed;
top: 0;
left: 0;
_position: absolute;
_top: expression(eval(document.body.scrollTop));
}

CSS PNG Transparency

This sample provides a CSS class that fills a background of an element with a semi-transparent PNG. This one does a shadow-fading effect along a horizontally stretched DIV or TD:


/* Tested in IE6, IE7, Safari and FF. */
.fade-down-white {
background: transparent url(images/fade_down_white.png) top repeat-x;
height: 50px;
width: 100%;
_background: none;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/fade_down_white.png',
sizingMethod='scale');
}