No background image in Firefox

I have a page design that ONLY works in IE. I have done everything I can think of to make the background image in Firefox, Safari, and Chrome to no avail. Here is the HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>TJHSHPS Home</title>
<link rel="stylesheet" type="text/css" href="/styles/tjhps.css" />
</head>

<body>

<table style="width: 780px" cellspacing="0" cellpadding="0" align="center">
<tr>
<td>
<div id="container" style="left: 0px; top: 0px">
<table style="width: 100%; " cellspacing="0" cellpadding="0">
<tr>
<td colspan="2">

</td>
</tr>
<tr>
<td style="width: 25%; height: 359px;" valign="top">
<div id="nav_left">

</div>
</td>
<td valign="top" style="height: 359px">
<div id="content">
<table style="width: 100%">
<tr>
<td>
<p>
<img border="0" src="images/Dome_low_DCP_0037.jpg" width="234" height="307" class="rightframe" />The Society's purpose is to
provide a
focal point for the leadership and involvement
required to develop and implement plans to preserve
and encourage the continued preservation of buildings,
objects, and places related to the historical
significance of Thomas Jefferson High School and
its architectural and natural beauty. We want those who walk through its doors today,
those that have come before, and those in the future
to continue to be guided by the richness of Jefferson's heritage.</p>

<p>We want to inform the public of our efforts and
invite those who would step forward to help us in
our efforts.</p>

<p>Thomas Jefferson High School was listed on the
National Register of Historic Places in 1983. It was
included in the City of San Antonio Local Historic
District in 1995. </p>

<div id="missioncallout"> <h2>Mission of the Thomas Jefferson High School<br />
Historic Preservation Society</h2>
<table style="width: 85%" class="center">
<tr>
<td class="leftpad">
<img alt="Icon of Jefferson outside cafeterai entrance" src="images/cafe_entrance_DCP_0039.jpg" width="80" height="80" /></td>
<td class="leftpad">Preserve and conserve the historic exterior and notable historic interior spaces of the Thomas Jefferson High School,723 Donaldson Ave., San Antonio Texas.</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>
<img alt="Icon to Thomas Jefferson's portrait" src="images/Jeff_portrait_DSC03316.jpg" width="80" height="80" class="leftpad" /></td>
<td class="leftpad">Preserve and conserve historic memorabilia and artifacts that are of significance to the present.</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>
<img alt="Icon of historical landmark plaque" src="images/hist_plaque_DSC03270.jpg" width="80" height="80" class="leftpad" /></td>
<td class="leftpad">Educate the community about the significance of Thomas Jefferson High School as a San Antonio Historic Landmark and as a Texas Historic Landmark listed in the National Register of Historic Places.</td>
</tr>
</table>

</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td style="width: 25%"> 
</td>
<td>
</td>
</tr>
<tr>
<td colspan="2">

</td>
</tr>
</table>

</div>
</td>
</tr>
</table>

</body>

</html>

AND HERE IS THE CSS:

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
color: #990000;
background-color: #EEE5D6;
padding-top: 0px;
}
/* #scroll {
padding-top: 0px;
margin: 0px;
background-image: url(../images/scroll_images/scroll_final02.gif);
background-repeat: no-repeat;
background-position: 0px 0px;
width: 232px;
height: 764px;
z-index: 0;
position: relative;
left: 0px;
top: 0px;
background-color: #F6EDDF; */
}
#container {
background: #EEE5D6 url('/images/scroll_final03.gif') no-repeat scroll top left;
border: 0px black none;
z-index: 99;
min-height: 762px;
}
#nav_top {
border:
font-size: .7em;
margin-bottom: 1.5em;
margin-left: 190px;
}
#nav_left a:link {
color: #707070;
text-decoration: none;
}
#nav_left a:visited {
color: #707070;
text-decoration: none;
}
#nav_left a:hover {
color: #707070;
text-decoration: underline;
}
#nav_left a:active {
color: #707070;
text-decoration: none;
}
#nav_top a:link {
color: #707070;
text-decoration: none;
}
#nav_top a:visited {
color: #707070;
text-decoration: none;
}
#nav_top a:hover {
color: #707070;
text-decoration: underline;
}
#nav_top a:active {
color: #707070;
text-decoration: none;
}
.bracketed a:link {
font-size: .7em;
color: #707070;
text-decoration: none;
}
.bracketed a:visited {
font-size: .7em;
color: #707070;
text-decoration: none;
}
.bracketed a:hover {
font-size: .7em;
color: #707070;
text-decoration: underline;
}
.bracketed a:active {
font-size: .7em;
color: #707070;
text-decoration: none;
}
#banner h1 {
font-family: "Times New Roman", Times, serif;
font-weight: bold;
color: #990000;
font-size: 2em;
}
#banner {
margin-top: 20px;
margin-left: 190px;
}
#nav_left td {
font-size: .75em;
font-weight: bold;
text-align: right;
color: #707070;
}
#content {
margin-left: 20px;
margin-right: 20px;
font-size: .9em;
}
#content h1 {
font-family: "Times New Roman", Times, serif;
font-size: 1.6em;
font-weight: bold;
color: #707070;
/* margin-bottom: -10px; */
}
#content h2 {
font-family: "Times New Roman", Times, serif;
font-size: 1.4em;
font-weight: bold;
color: #707070;
/* margin-bottom: -15px; */
}
#content h3 {
font-family: "Times New Roman", Times, serif;
font-size: 1.3em;
font-weight: bold;
font-style: italic;
color: #707070;
margin-bottom: -5px;
}

#content h4 { /* Designated mainly as an Event Title heading */
font-family: "Times New Roman", Times, serif;
font-size: 1.2em;
font-weight: bold;
color: #707070;
margin-bottom: -12px;
}
.caption {
font-size: .8em;
font-style: italic;
}
p {
color: #990000;
font-size: 1em;
}
table td {
vertical-align: top;
}
#timeline table {
font-size: .9em;
border-collapse: collapse;
}
.leftpad {

padding: 0 0 0 15px;
}
.center {
margin-left: auto;
margin-right: auto;
}
#content ul {
list-style-type: square;
color: #990000;
}
#content ul li {
list-style-type: square;
font-size: 1em;
font-weight: normal;
margin-bottom: 3px;
}
#content ul ul li{
list-style-type: disc;
font-size: 1em;
font-weight: normal;
margin-bottom: 3px;
}
#ctr_footnote {
font-size: .8em;
font-style: italic;
line-height: 1.3em;
color: #707070;
margin-right: 40px;
margin-left: 5px;
text-align: left;
}
#ctr_footnote {
font-size: .6em;
font-style: normal;
color: #707070;
margin-right: auto;
margin-left: auto;
text-align: center;
}
#missioncallout {
clear: all;
background-color: #cccccc;
padding-top: 5px;
padding-bottom: 20px;

}
#missioncallout h2 {
text-align: center;
padding-left: 30px;
padding-right: 30px;
}
#missioncallout p {
text-align: left;
padding-left: 30px;
padding-right: 30px;
}
.rightframe {
float: right;
border-style: solid;
border-width: 4px;
border-color: #cccccc;
margin-left: 15px;
margin-bottom: 15px;
}
.leftframe {
border: 4px solid #cccccc;
float: right;
margin-right: 15px;
margin-bottom: 15px;
}
.frame {
border: 4px solid #cccccc;
margin-right: 15px;
margin-bottom: 15px;
}

The background image in the $container div does not display.

This page can be viewed at:

Thanks for any help in advance.

dmooresatx

[edited by: eelixduppy at 5:18 am (utc) on Nov. 6, 2008]
[edit reason] removed URL [/edit]