Estoy desesperada con el iExplorer!!!!

[irezumi]

Hola! ya no se que hacer, estoy haciendo una web con css y <div> y me pasa esto:

h t t p://img213.imageshack.us/img213/2346/sinttulo2copiaqk7.jpg

en el firefox se ve perfecto pero en el iexplore... ag!!! despues de la cabecera y del menu lateral aparece un trozo blanco!!!!! y no se como quitarlo, he revisado el codigo y no encuentro el fallo. y si no hay fallo, que puedo hacer para que ie "interprete" que ahi no hay ningun espacio blanco¿?


DEJO AQUI EL CSS

Código:

BODY {
background : #d6d6d6 url(images/fondosombra.jpg) repeat-y center;
_background-image:url(images/fondosombraIE.jpg);
background-position-x:center;
background-position-y:center;
color:#666666;
margin:0px;
text-align:center;
font-style:normal;
font-variant:normal;
font-weight:normal;
font-size:8pt;
font-family:Arial, Verdana, Geneva, Helvetica, sans-serif;

}

#contenedor{
font : 8pt Trebuchet MS;
width: 760px;
background-color : #ffffff;
margin: auto;
}

#navegadorsup{
background : url(images/fondonav.jpg);
width: 760px;
_width: 767px;
height: 16px;
border-top : 0px solid #ffffff;
border-bottom : 1px solid #ffffff;
text-indent: 10px;
padding-left:0px;
padding-right:0px;
padding-top:5px;
padding-bottom:5px
}

#cabecera{
height : 140px;
width: 760px;
}

#navegador{
background : url(images/fondonav.jpg);
width: 760px;
_width: 767px;
height: 16px;
border-top : 1px solid #cccccc;
border-bottom : 1px solid #cccccc;
text-indent: 10px;
padding-left:0px;
padding-right:0px;
padding-top:5px;
padding-bottom:5px
}

A.enlacenav, A.enlacenav:VISITED, A.enlacenav:ACTIVE, A.enlacenav:FOCUS, A.enlacenav:LINK{
color: #666666;
}
A.enlacenav:HOVER{
color: #3F7DE3;
}

#cuerpo{
width: 520px;
margin-left: 8px;
padding: 5px 0px 10px 12px;
_padding: 15px 0px 0px 12px;
background-color : #ffffff;
font : 8pt Trebuchet MS;
text-indent: 20px;
color : #000000;
float:left;
}

#foto{
text-align: center;
}

H1{
font: 14pt Georgia;
color: #CE0100;
}

#navabajo{
font : 8pt Trebuchet MS;
font-weight : bold;
padding-bottom: 10px;
padding-right: 10px;
text-align: right;
}

#lateral{
width: 200px;
background-color: #e3e3e3;
border-bottom : 1px solid #cccccc;
border-left : 1px solid #cccccc;
float:right;
font : 8pt Georgia;
margin: 0px 0px 8px 0px;
} 

.titlat{
background : url(images/fondolat.jpg);
color:#ffffff;
text-transform : uppercase;
font-weight : normal;
letter-spacing : 2px;
font-style:normal;
font-variant:normal;
font-size:8pt;
font-family:Georgia;
margin-left:0px;
margin-right:0px;
margin-top:0px;
margin-bottom:8px;
padding-left:8px; 
padding-right:3px;
padding-top:7px;
padding-bottom:7px
}

.cuerpolateral{
padding: 2px 0px 8px 8px;
color: #666666;
}

INPUT {
font-size : 8pt;
}

#fbuscar form{
margin-bottom : 0px;
margin-top : 0px;
}

#campotexto{
float: left;
}

#campotexto input{
width:100px;
}

#botonbuscar {
padding-top : 3px;
padding-left: 106px;
}

#botonbuscar input{
border : 0px none;
}

.radio{
padding-top: 2px;
clear:both;

}
#otras ul{
margin : 5px 10px 0px 0px;
padding: 0px 0px 0px 4px;
list-style: none;
}

#otras li{
padding-left: 14px;
background: url(images/cruz.jpg) no-repeat 0 2px;
margin-bottom: 10px
}

#pie{
clear : both;
color : #646464;
font: 8pt Arial;
text-align : center;
margin : 20px 72px 0px 72px;
padding-bottom: 1px;
vertical-align: bottom;
}

#contenedor{
text-align: left;
width: 760px;
border: 0px solid #ffffff;
margin: auto;
background-color : #ffffff;
}

#borde{
border: 0px solid #ffffff;
text-align: left;
width: 760px;
margin: auto;
}

[Rafael]

Sin el codigo html va a ser dificil saber ya que usas muchisimos Id.

[irezumi]

aqui esta la direccion:

h t t p://usuarios.lycos.es/ajiemsevilla

[marce_str]

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!

[irezumi]

voy a ponerme a ello, a ver si lo he entendido todo y me sale.

lo de "font-style:normal; font-variant:normal; font-weight:normal;" no se por qué pero aparecio solo, yo solo tenia escrito el atributo que me interesaba y no se que paso que me puso un monton de atributos con valor 0.

luego, no comprendo muy bien eso de no ponerle el nombre "rojo" al estilo de enlace, te refieres a que ponga enlacerojo¿? o enlacelat algo asi¿?

gracias por tu respuesta.

[marce_str]

con respecto a tu pregunta sobre el nombre de las clases podes encontrar la respuesta bien detallada en esta página:
http://www.webstudio.cl/blog/css-clases-y-semantica/

[irezumi]

ok. creo que ya he descubierto el porqué del margen blanco, pero aun asi mira lo que hace el explorer:

ht tp://usuarios.lycos.es/ajiemsevilla/index2.htm

abrelo con ie y con mozilla y veras la diferencia (por si no la ves, porque no es muy grande, te digo que iexplorer no centra igual que el firefox, la barra gris no esta centrada con respecto al fondo)

el ancho del fondo blanco es de 760, el ancho de la barra es de 760, si esta centrada, por qué sobra un pixel en la derecha y falta uno en la izquierda¿?

[marce_str]

a #navegadorsup no le pusiste margin: auto;
podria ser eso, pero yo igual lo haria de otra forma

al body solo le daria color de fondo, margin:0px y tipografia predeterminada,
para tu sombra yo haria otra cosa, se lo aplicaria a un identificador, seria una columna falsa, le darias altura del 100% y lo repetis en y como ya hiciste, eso si, el ancho tiene que ser mas de 760, o sea, tiene que ser el ancho de la imagen. No se como habras hecho la imagen, pero podes hacerlo con el mismo blanco para que ya te forme la placa de fondo, ah! y "margin: 0 auto;"

despues a ese div ya lo podes usar de conenedor principal y si queres podes crear otro #contenedor con 760px y margin:0 auto; sin ninguna otra cosa mas

Solo recuerda de centrar tus objetos con margin: 0 auto;
Lo que hace esto es "desactivar" los margenes superiores e inferiores y aplicar auto a los costados