Firefox/Opera Scrollbar fix in CSS

Annoying behavior in FF: when navigating between page with height<100% and page with height>100% you will experience a horizontal shift in layout caused by added vertical scrollbar. This is a very nice and simple fix that enables a vertical scrollbar holder at all times.

html {
  overflow-y: scroll;
}

CSS Browser Detection

.myclass {
  color: red;     /* All browsers [Target: FF,NS] */
  _color: green;  /* IE6- [Target: IE6-] */
  .color: blue;   /* IE7, IE6- [Target: IE7] */
}
body:last-child:not(:root:root) .myclass {
  color: purple;  /* Safari, Konqueror [Target: Safari, Konqueror] */
}

For IE8 You can just use meta tag to make it behave like IE7 (Facebook, Google are using this technique)

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Inline Block

Elements may appear inline, yet retaining box models of block elements:

/* FF,NS */
html>body .inline-block {
  display: -moz-inline-box; /* [FF3]+ */
  display: inline-block; /* (FF3)- */
}

/* Safari, Webkit, Opera */
.inline-block {
  position: relative;
  display: inline-block;
}

/* (IE7)- */
/* to inline does the trick. */
* html .inline-block {
  display: inline;
}

/* [IE7]+ */
*:first-child+html .inline-block {
  display: inline;
}

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');
}