CSS: El color de fondo del container principal desaparece

Hola.

Estoy haciendo una maquetación sencilla con CSS y tengo un problema mu gordo que me está creando graves traumas anímicos...

Me explico...

Mi diseño básico tiene un fondo #ccc y sobre él un contenedor con fondo #fff. Dentro de éste tengo lo típico: cabecera, barra izquierda, zona de contenidos, pie....

Estoy montándolo todo en Dreamweaver y bien... ahi veo mi container con todos los elementos sobre un hermoso fondo de color blanco y el fondo de la web en gris.

ahora bien... cuando veo la web en explorer no hay problema, pero al verlo en Firefox y Opera el color de fondo del container principal desaparece y se ven los módulos que componen la web sobre el color gris de fondo...

POR QUÉ!!!??????????????

Mi código es el siguiente:
<code>
/*----------------------*/
/* LAYOUT */
/*----------------------*/

/*Propiedades Generales*/
body {
font:70% Tahoma, Verdana, Arial, Helvetica, sans-serif;
background-color:#CCC;
text-align : justify;
margin: 0;
}
p {
font-size: 1em;
color: #000;
}
hr {
display:none;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Trebuchet MS", Tahoma, Verdana, Helvetica, Arial, sans-serif;
text-align : left;
color : #666666;
margin-top:3px;
margin-bottom: 3px;
}
h1 {
font-size: 1.8em;
margin:0;
}
h2 {
font-size: 1.6em;
text-transform: capitalize;
}
h3 {
font-size:1.5em;

}
h4 {
font-size:1.4em;
}
h5 {
font-size: 1.3em;
color : #336699;
text-transform: uppercase;
}
h6 {
font-size:1.1em;
color : #336699;
}
td {
text-align : center;
color : #586885;
}
a {
font-size:1em;
color:#333333;
}
a:link {
text-decoration: none;

}
a:visited {
text-decoration: none;
color:#333333;
}
a:hover {
text-decoration: underline;
color:#000066;
}
a:active {
text-decoration: none;
color:#990000;
}

/*Contenedores*/
#contenedor {
background-color:#FFF;
margin: 0 auto;
width:980px;
height:auto;
}
#header{
width:980px;
height:100px;
margin: 0 auto;
border-bottom: solid 1px #ccc;
}
#contenido {
width:auto;
}
#izquierda{
width:210px;
height: auto;
float:left;
margin:10px 0 0 10px;
}
#principal{
width:auto;
height:auto;
margin:10px 0 0 233px;
line-height:1.5;
}
#footer{
width:980px;
height:15px;
background-color: #FF9900;
margin-top: 20px;
padding: 3px 0 0 3px;
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.9em;
text-align: center;
}
</code>

No veo nada raro... (puede que el css no sea lo más ortodoxo del mundo pero... hasta aquí llego... ;-p)

Por qué pasa esto en Firefox y Opera? Por qué se va el color de fondo? POR QUÉEEEEEEEEEEEE!!!!!!!!!!???????????

Un saludo y gracias