body {
  margin:0;
  border:0;
  padding:0;
  height:100%; 
  max-height:100%; 
  background:#f1f1f1; 
  font-family:Arial, Helvetica, sans-serif;
  font-size: 16px;
  background:#000000;
  line-height: 25px;  
  overflow: hidden; 
  }
#header {
  position:absolute; /* since the body size is set to 100% high (by 100% wide) this will have the same effect as position:fixed; but using position:absolute allows Internet Explorer to interpret it correctly. */
  top:0; 
  left:0; 
  width:100%; 
  min-width:995px;
  height:116px; 
  overflow:hidden;
  background:#f1f1f1;
  background-image:url(images/bg_header.gif);
  }
#footer {
  position:absolute; 
  bottom:0; 
  left:0;
  width:100%; 
  min-width:995px;  
  height:87px; 
  overflow:hidden; 
  text-align:left; 
  background:#f1f1f1;
  }
#contents {
  position:fixed; /* Internet Explorer doesn't understand this but all other browsers do and will place a fixed position contents div at the position defined below. In this case we are defining the top, bottom, left and right position so that the height and width will be calculated by the browser. */
  top:116px;
  left:0;
  bottom:87px; 
  right:0; 
  min-width:995px;
  overflow:auto; 
  background:#f1f1f1;
  background-image:url(images/bg_detail.gif);
  }


/* for internet explorer */
* html body {
  padding:116px 0 87px 0; 
  }
/* since we're using the faulty box model, in which the padding is included within the height and width of the body,
this will have the effect of reducing the usable body size by 120px from the top of the window and 50px from the bottom.
In other words, any content placed in the body will now occupy the space between our header and footer. */

* html #contents {
  height:100%; 
  width:100%; 
  }