PRIMERO: ORDENEMOS EL CSS
Bueno, primero que nada tienes que ordenar tu CSS. Comprendo lo de noticias1 noticias2 y noticias3, y está bien utilizar 3 por los fondos; pero está mal que repitas los valores. Imagina que tienes 20 noticias (ya la hoja se hizo bastante larga) y decides cambiar un valor, tienes que repetir 20 veces la operación.
Por lo tanto, te doy resumida tu hoja CSS y verás en prácitica es igual a la tuya:
Código HTML:
#contenedor
{
text-align:left;
background-color:#BDBCBC;
width:800px;
margin-top:0px;
margin-left:0px;
margin-right:0px;
}
#baner
{
background-image:url(../images/logo.jpg);
background-position:center;
width:772px;
height:169px;
margin-left:14px;
margin-right:14px;
margin-top:10px;
background-repeat:no-repeat;
}
#menu
{
margin-left:70px;
margin-top:10px;
background-color:#BDBCBC;
width:160px;
float:left;
}
#menu1, #menu2, #menu3
{
background-color:#BDBCBC;
width:160px;
background-repeat:repeat-y;
}
#menu1
{
background-image:url(../images/menuup.jpg);
height:55px;
}
#menu2
{
background-image:url(../images/menumiddle.jpg);
padding-left:25px;
height:20px;
}
#menu3
{
background-image:url(../images/menudown.jpg);
height:29px;
}
#noticias
{
background-color:#BDBCBC;
margin-right:71px;
margin-top:10px;
width:449px;
float:right;
}
#noticias1, #noticias2, #noticias3
{
background-color:#BDBCBC;
width:449px;
background-repeat:repeat-y;
}
#noticias1
{
background-image:url(../images/noticiasup.jpg);
height:55px;
}
#noticias2
{
background-image:url(../images/noticiasmiddle.jpg);
height:25px;
}
#noticias3
{
background-image:url(../images/noticiasdown.jpg);
height:29px;
}
SEGUNDO: RESOLVAMOS EL PROBLEMA
Bueno, ya pasado el 1º tip tratemos de ver el problema:
Ya que no pasaste el HTML, lo supuse como lo pongo a continuación:
Código HTML:
<div id="contenedor">
<div id="baner">banner banner banner banner </div>
<div id="menu">menu
<div id="menu1">menu1</div>
<div id="menu2">menu2</div>
<div id="menu3">menu3</div>
</div>
<div id="noticias">noticias
<div id="noticias1">noticias1</div>
<div id="noticias2">noticias2</div>
<div id="noticias3">noticias3</div>
</div>
</div> Y tu CSS arreglado quedaría así
Código HTML:
#contenedor
{
text-align:left;
width:800px;
margin-top:0px;
margin-left:0px;
margin-right:0px;
}
#baner
{
background-position:center;
width:772px;
height:169px;
margin-left:14px;
margin-right:14px;
margin-top:10px;
background-repeat:no-repeat;
}
#menu
{
position:absolute;
left:70px;
margin-top:10px;
background-color:#BDBCBC;
width:160px;
}
#menu1, #menu2, #menu3
{
background-color:#BDBCBC;
width:160px;
background-repeat:repeat-y;
}
#menu1
{
background-image:url(../images/menuup.jpg);
height:55px;
}
#menu2
{
background-image:url(../images/menumiddle.jpg);
padding-left:25px;
height:20px;
}
#menu3
{
background-image:url(../images/menudown.jpg);
height:29px;
}
#noticias
{
background-color:#BDBCBC;
margin-left: 290px;
margin-right:71px;
margin-top:10px;
width:449px;
}
#noticias1, #noticias2, #noticias3
{
background-color:#BDBCBC;
width:449px;
background-repeat:repeat-y;
}
#noticias1
{
background-image:url(../images/noticiasup.jpg);
height:55px;
}
#noticias2
{
background-image:url(../images/noticiasmiddle.jpg);
height:25px;
}
#noticias3
{
background-image:url(../images/noticiasdown.jpg);
height:29px;
}
En firefox tu CSS se veía "bien", pero en explorer no.
A esto ahora falta tiempo, dedicación y PROLIJIDAD y quedará andado de diez.
Para que se vea bien en ambos navegadores tienes que establecer todas las propiedades como padding y margin. Y no repitas los colores o imágenes de fondo. si ponés un div1 dentro de un div2, y el div2 tiene fondo gris, no le pongas a div1 gris, si no se va a ver; es como poner una hoja blanca sobre otra hoja blanca más grande.
Digiere el trabajo que he hecho con tu problema. Si tienes otra duda no dudes en volver a escribir.
Saludos!