En primer lugar cosas como esta las puedes simplificar:
#container{
width: 880px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
Así:
#container{
width: 880px;
margin: 0 auto;
}
Tanto margin como padding, border, etc. funcionan agrupados:
arriba-derecha-abajo-izquierda
Por lo que con esto:
Cita: h1{
font-family: Calibri;
font-size: 32px;
padding: 0 0 10px 15px;
}
le estás diciendo al H1 que tenga 10px de relleno abajo y 15 a la izquierda, y con esto otro:
Cita: #header{
width: 880px;
padding: 50px 0px 30px 20px;
background: url('bg_header_900x136.gif') no-repeat left bottom;
background-position: center;
color: #fff;
height: 0px;
margin-bottom: 0px;
}
que tenga un relleno de 50px arriba, 30 abajo y 20 a la izquierda, ya que al ponerlo como:
<h1 id="header">
le están afectando los dos selectores, tanto el genérico h1 como el del ID #header.
Dale unas vueltas por ahí.
En cuanto a los png deberás buscar PNG+IE6, que hay ríos enteros de información.
Mikel.