Firefox Display Issues

[iberican]

1) Script Title: Scrollable content

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex11/scrollc.htm

3) Describe problem:

I am having issue with the Display of my site in Firefox - works fine in IE but ever since I attempted to add the Scrollable Content Script, the display is off in Firefox. Could be missing a closing div or an issue with my stylesheet (I may be trying to accomplish too many things in it...)

Any help would greatly be appreciated!

site:

www.healthyadventure.com/new2

CSS:


body {

scrollbar-3dlight-color : #EBF3FE;
scrollbar-arrow-color : #1c3694;
scrollbar-darkshadow-color : #EBF3FE;
scrollbar-face-color : #EBF3FE;
scrollbar-highlight-color : #EBF3FE;
scrollbar-shadow-color : #EBF3FE;
scrollbar-track-color : #EBF3FE;
overflow: -moz-scrollbars-vertical;
overflow-x: hidden;
overflow-y: scroll;

margin : 0 auto;
padding : 0;
color : #000;
background : #ffffff;

font-family: Georgia, serif;
font-size: 10px;
font-style: normal;
text-align : center;
font-weight: bold;
font-variant: normal;
text-transform: none;
color: #000000;
line-height : 1.7em;
}


#container {
width : 750px;
margin : 0 auto;
padding : 0;
text-align : center;
color : #666;
background : #D6E7FC;
border: 1px;
}

#top {
margin : 0 auto;
padding : 0;
color : #000;
background : #7a2e2e;
}

#top h1 {
margin : 0 20px 0 0;
padding : 10px 0 10px 0;
font-size : 130%;
text-align : right;
text-transform : uppercase;
color : #fff;
background : inherit;
}

#banner {
width : 750px;
margin : 0 auto;
padding : 0;
height : 102px;
color : #fff;
background : #ffffff url(images/logo2.jpg) no-repeat;
}

.container {
margin : 0;
padding : 1px 0 0 0;
width : 100%;
color : #000;
background : #D6E7FC;
}

#div-1 {
position:relative;
top:7px;
left:12px;
width: 165px;
height: 450px;
text-align : left;
background-color: #78abd6;
}



#side {
width : 210px;
float : left;
margin : 0 auto;
padding : 0;
}

#side p {
margin : 1em 0 1em 1em;
color : #999;
background : inherit;
}

#content {
width : 525px;
height: 450px;
margin-left : 200px;
padding-left : 10px;
line-height : 1.8em;
border-left : 1px solid #bbb;
background-color : #EBF3FE;
}


a:link, a:visited{
padding : 15px;
color : #000;
background : transparent url(images/list-off.gif) no-repeat left center;
font-family: Georgia, serif;
font-size: 12px;
font-style: normal;
line-height: 16px;
font-weight: bold;
font-variant: normal;
text-transform: none;
color: #ffffff;
text-decoration: none;
}

a:hover {
color : #ffffff;
background : transparent url(images/list-on.gif) no-repeat left center;
}



#footer {
margin-top : 10px;
text-align : center;
height: 10px;
padding : 0.5em;
clear : both;
font-size : 0.9em;
color : #333;
background : #FFFFFF;
border-top : 1px solid #bbb;

}

h2 {
color : #000000;
font : 160% "Georgia", sans-serif;
font-weight: bold;
font-variant: normal;
text-transform: none;
background : inherit;
}



/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */<!-- Hide entire CSS code from IE6 -->
<![if !IE 6]>



.shiftcontainer{
position: relative;
left: 5px; /*Number should match -left shadow depth below*/
top: 5px; /*Number should match -top shadow depth below*/
}

.shadowcontainer{
width: 750px; /* container width*/
background-color: #d1cfd0;
}

.shadowcontainer .innerdiv{
/* Add container height here if desired */

background-color: white;
border: 1px solid gray;
padding: 6px;
position: relative;
left: -5px; /*shadow depth*/
top: -5px; /*shadow depth*/
}



<![endif]>

[jscheuer1]

This (red) doesn't belong in the styles.css stylesheet file:

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */<!-- Hide entire CSS code from IE6 -->
<![if !IE 6]>



.shiftcontainer{
position: relative;
left: 5px; /*Number should match -left shadow depth below*/
top: 5px; /*Number should match -top shadow depth below*/
}

.shadowcontainer{
width: 750px; /* container width*/
background-color: #d1cfd0;
}

.shadowcontainer .innerdiv{
/* Add container height here if desired */
background-color: white;
border: 1px solid gray;
padding: 6px;
position: relative;
left: -5px; /*shadow depth*/
top: -5px; /*shadow depth*/
}



<![endif]>