bueno... hay algunas cositas basicas que estoy viendo en el css
el body que hiciste no le veo mucha razon.
para que pusiste font-style:normal; font-variant:normal; font-weight:normal;? no es necesario, ya lo predeterminado es "normal".
Nunca vi un body con el fondo con columna falsa, siempre lo vi en un contenedor, pero bueno, quizas sean solo maneras de trabajar, el resultado es el mismo creo, pero no se.
Las tipografias que definis en el body? por que no definis la trebuchet asi no la volves a escribir despues? lo mismo con el cuerpo, si predeterminas en el body trebuchet 8px, listo, despues la volves a cambiar cuando necesitas.
En cuanto al html, vi algunas cosas que tendrias que corregir.
Algunos divs id tienen atributos de altura, esos tenes que sacarlos de ahi, porque tienen que ir en el css.
Para los distintos menus que usas trata de usar listas pero correctamente, por ejemplo:
Código:
#menu1 {propiedades} /* para el contenedor del menu*/
ul.principal {propiedades} /*para la lista en si*/
ul.principal li {propiedades} /*para cada item de esa lista */
ul.principal li a {propiedades} /*para los items que funcionan como links */
ul.principal li a:hover {propiedades} /*y para cuando pasas el mouse por encima */
despues en el html tendria que quedar algo asi:
Código:
<div id="menu1">
<ul class="principal">
<li><a href="#">educación medica</a></li>
<li><a href="#">salud publica</a></li>
<li><a href="#">salud reproductiva sexualidad y SIDA</a></li>
</ul>
</div>
Los separadores de tu menu superior los puedes resolver con un border-right en ul.principal li , pero deberias crear una clase mas para que el ultimo link no tenga border-right=none
Otro problema sobre tu html, otros div tienen estilos. Trata de separar tu contenido de la presentación.
Una recomendación: no uses nombres descriptivos para tus clases e identificadores, por ejemplo "rojo" ni tampoco nombres que no digan nada como "otras". Trata de ser mas exacta, tanto tu como otra persona tiene ue entender el código y saber que hace ese objeto y además cuando rediseñes el sitio y quieras cambiar de color, rojo no te a a servir mas y no va a tener logica.
En cuanto al problema que tenes a mi me ha pasado un par de veces, no la tengo tan clara como para explicarte, pero voy a tratar.
Es porque internet explorer si no me equivoco te suma el ancho del div y los margenes, es decir, si tenes un div de 300px de ancho y 20px margen derecho y 20 inzquierda, y 10 de padding der e izq te hace un div de 360px y como no entra, te estira el contenedor.
No se si esta bien como te lo explique, pero estas cosas las soluciono modficando los valores, quizas, sacando el margen y agregando padding se soluciona, pero quizas tengas que hacer otras modificaciones.
Bueno, primero trata de reestructurar tu sitio y despues sigue tratando de solucionar tu problema. Suerte!