doesn't work properly when calling this on a html page

Question

* {
    margin: 0;
    padding: 0;
}

body {
    background-color:#357835;
    margin: 40px 0;
    margin-top: -3px;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

}

p, ul {
    text-align: justify;
}
b{
   font:Verdana, Arial, Helvetica, sans-serif;
   color:#00FF33;
    font-size:12px;
}
h4{
    font-size:12px;
    color:#000000;
    margin-top:20px;
}
strong {
    font-weight: bold;


}

a {
    color: #87ddtt;
    text-decoration:none;
}

a:hover {
    text-decoration: none;
    color: #7gr4yy;
}

.row1{

} 
.box1 {

    float:left;
       width:230px;
    height:225px;
    margin-top:10px;

}
.box2 {

    float:left;
       width:230px;
    height:225px;
    margin-top:10px;    

}
.box3 {

    float:left;
       width:230px;
    height:225px;
    margin-top:10px;

}
.row2 {

} 
.box5{
    float:left;
       width:150px;
    text-align:left;
    margin-top:5px;
    margin-right:15px;
}
.box6 {
    float:left;
       width:180px;
    text-align:left;
    margin-top:5px;
    margin-left:35px;
}
.boxgap{
width:13px;
height:295px;
float:left;
margin-top:85px;
background:url(file:///H|/images/vbar300.gif) no-repeat bottom;
}
.details{
     text-align:right;
     margin-right:20px;
     font-family:Verdana, Arial, Helvetica, sans-serif;
     font-size:11px;
     color:#FF9933;
     list-style:none;
     float:right;
}

.bar {
    width:801px;
    height:30px;
    background-color:#FF9933;
    margin-left:0px;
    padding: 0px 0px 5px 0px;
    }
.titletext {
    text-align:center;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:14px;
    margin-bottom:2px;
    font-weight:600;
    padding: 0px 0px 15px 0px;
}
#page {
    width: 801px;
    margin: 0 auto;
    padding: 0px 0 0 0;
    position:relative;
}
#table {
      background:url(file:///H|/images/tableback680.gif) repeat-x; 
      width:801px;
      height:680px;
      padding: 0px 0px 0 0px;
      margin: 0 auto;
}
/* Header */

#banner {

    width: 801px;
    height: 150px;
    margin: 0 auto;
    margin-top:Opx;
    background-color:#003300;
    background: url(file:///H|/images/banner.jpg);    
    border-bottom: 3px solid #FFFFFF;
     }
#header {
    width: 801px;
    height: 37px;
    margin: 0 auto;
    background-color:#003300;
    background:#9bb143 url(file:///H|/images/img01.gif) repeat-x;
    /*background: #BECF74 url(../images/img01.gif) repeat-x;*/
    border-bottom: 1px solid #FFFFFF;

}

/* Menu */

#menu {
    float:left;
    width: 791px;
    height: 47px;
    margin: 0;
    padding: 0 0 0 10px;
    list-style:none;
    background: url(file:///H|/images/img02.gif) no-repeat;

}

#menu li {
    display:inline;

}

#menu a {
    display: block;
    float: right;
    height: 27px;
    padding: 10px 15px 0px 15px;
    text-transform: lowercase;
    text-decoration: none;
    font-size: 12px;
    font-weight: bold;
    color:#003300;
}

#menu a:hover {
    background: url(file:///H|/images/img04.gif) repeat-x;

}
#menu .current_page_item a {
    background: url(file:///H|/images/img04.gif) repeat-x;
}

#colOne {
    margin-top:0px;
    margin-left:90px;
    width: 800px;
    height:300px;
    padding: 0px 0px 0 0px;

}
#colTwo {
    margin-top:0px;
    margin-left:90px;
    width: 700px;
    height:275px;
    padding: 0px 0px 0 0px;

}

.caption{
     font-family:Georgia, "Times New Roman", Times, serif;
     font-size:14px;
     color:#CC9900;
     text-align:center;

}
/* Footer */

#footer {
    clear: both;
    width: 801px;
    margin: 0 auto;
    padding-top: 0px;
    background: url(file:///H|/images/img12.gif) repeat-x;
}

#footer p {
    margin: 0;
    text-align: center;
    font-size: 11px;
    color:#663366;
}
#footer a{
     font-family:"Trebuchet MS";
     color:#000099;
}
#footer a:hover {
     font:"Trebuchet MS";
     color:#990000;
}

Answer 1

Well I've no idea what your question is really supposed to be about, but if we're talking problems when deploying the above stylesheet to a real HTTP server, this would certainly be an issue:

background: url(file:///H|/images/img12.gif) repeat-x;

all your URLs are pointing at the local filesystem on your computer. That can't work when you are serving pages over HTTP, so the images will all appear to be missing. You need to point that URL at a page-relative address, maybe:

background: url(/images/img12.gif) repeat-x;