I am a novice, feeling my way around CSS - pretty much by trial & error - with varying levels of success (and failure/frustration).

I'm currently redesigning some pages and there are two display problems I cannot figure out. If anyone can help sort either out, I would be SO grateful.

In IE, this page is working fine: http://watershipdowns.com/try/index2.html

(style sheet code follows)

In Firefox, however -

1) the main background image is fixed; I would like it to scroll.

2) in the (navleft) DIV - where the navigation links are - the red border on the right side of the box has disappeared.

I SO don't get it. Can anyone help lower my blood pressure? THANK YOU
deb

Style Sheet:

body {
font-family: Tahoma, Arial, sans-serif;
font-size: 0.7em;
letter-spacing: 0.1em;
line-height: 1.5;
margin: 5px;
padding: 0;
}

a {
color: black;
text-decoration: none;
}
a:active{
color: #black;
text-decoration: none;
}
a:visited{
color: black;
text-decoration: none;
}
a:hover {
color: #930000;
text-decoration: underline;
}


#header1 {
height: 191px;
background-color: #930000;
}

#header2 {
background-color: #666666;
height: 18px;
}

#container {
position: absolute;
width: 98%;
background-color:#DDDDDD;
}

#navleft {
position: absolute;
left: 5px;
width: 120px;
background: #CCCCCC url(graphics/horses/ebony/bank/bank_cut_2_tr.jpg) no-repeat center;
margin-top: 10px;
padding: 0px 0px 0px 5px;
border: 3px solid #930000;
}



#content {
background-color:#DDDDDD;
margin-top: 0px;
margin-right: 20px;
margin-bottom: 5px;
margin-left: 130px;
padding: 10px;
}


#index {
background:#DDDDDD url(graphics/horses/ebony/xc_jump/xc_jump2.jpg) no-repeat center;
margin-top: 0px;
margin-right: 20px;
margin-bottom: 5px;
margin-left: 130px;
padding: 10px;
}