Preview in Browsers not showing

Question

Hi Group
I am a total newbie with CS5 and am about to go crazy, I miss my MX version so much.  My problem is that I have designed a page with CSS and it looks ok (still a work in progress). I have added a background for my header area and a background for my body area and I can see it in DW but when I preview in IE or Firefox the backgrounds do not show?  I am not sure if I have checked/unchecked a setting in DW or stuffed up my CSS.  They were showing to begin with.  If anyone could take a look for me I would appreciate it so very much.  I am self taught and about to give up.
I have uploade the page to www.forestviewhigh.school.nz/default-trial.htm
The CSS is below:
#header {
    background-image:url(/images/home/dblue.gif);
    background-repeat: repeat;
    position: absolute;
    height:140px;
    width: 100%;
    left: 0px;
    top: 1px;
#header_scripts {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-style: italic;
    position: absolute;
    top: 128px;
    width: 300;
    left: 5px;
#welcome_script {
    position: relative;
    top: auto;
    height: auto;
    float: right;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-style: italic;
    width: auto;
    margin-top: 0px;
    margin-right: auto;
    margin-left: auto;
    left: auto;
    padding-top: 0px;
    padding-right: 0px;
    padding-left: 0px;
    text-align: center;
    right: auto;
#date_script {
    width: 121px;
    position: absolute;
    top: 157px;
    right: 6px;
    padding-right: 30px;
    font-family: "Comic Sans MS", cursive;
    font-size: small;
    font-style: italic;
    line-height: normal;
    text-align: right;
    height: 48px;
    color: #05069C;
#main_content {
    background-image: url(/images/home/cloud.jpg);
    background-repeat: repeat;
#main_content #content_container {
    background-repeat: repeat;
    background-color: #FFF;
    top: 139px;
    position: absolute;
    text-align: left;
    white-space: normal;
    display: block;
    margin-top: 0px;
    margin-right: 100px;
    margin-bottom: 10px;
    margin-left: 100px;
    padding-top: 0px;
    padding-right: 25px;
    padding-bottom: 10px;
    padding-left: 25px;
    right: auto;
    height: 500px;
    width: 784px;
    left: 27px;
    overflow: visible;
#daily_picture {
    color: #000000;
    background-color: #FFFFCC; /* pale weak yellow */
    width: 595px;
    top: 215px;
    position:absolute;
    height: 345px;
    border: medium dotted #05069C;
    left: 320px;
#box1 {
    color: #000000;
    background-color: #FFFFCC; /* pale weak yellow */
    width: 350px;
    right: 806px;
    top: 625px;
    position:absolute;
    padding-left: 15px;
    height: 200px;
    border: medium dotted #05069C;
    left: 220px;
    border-radius: 15px;
#box2 {
    color: #000000;
    background-color: #FFFFCC; /* pale weak yellow */
    width: 350px;
    right: 300px;
    top: 625px;
    position:absolute;
    padding-left: 15px;
    height: 200px;
    border: medium dotted #05069C;
    float: right;
    border-radius: 15px;
#main_content #footer {
    font-family: "Courier New", Courier, monospace;
    font-size: 12px;
    font-style: normal;
    background-color: #CEE5F5;
    text-align: center;
    width: auto;
    position: relative;
    height: auto;
    top: 850px;
#main_content #modified_date {
    font-family: "Courier New", Courier, monospace;
    font-size: 12px;
    font-style: normal;
    background-color: #CEE5F5;
    text-align: left;
    width: 300px;
    position: relative;
    height: auto;
    top: 850px;

Answer 1

Looks OK to me.  But you have some code errors to clean up.
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.forestviewhigh.school.nz%2Fde fault-trial.htm
Remove extra hyphens from all your code comments.
Change this:
<!---------- Meta Data Information Start --------->
to this:
<!--Meta Data Information Start-->
Nancy O.