El Menu se ve Deforme En IE

Hola, mi duda viene a que mi web. www.jestudio.cl se ve deforme en
IE.
¿Que puedo hacer para arreglarlo?
Fíjense que el menú se desencaja deformando la web completa.

¿Alguna idea?

Puedes planear un ataque terrorista a las oficinas principales de Microsoft o probar con uno de esos muy de moda CSS's "just for IE"

Google te puede ayudar en ambos casos

Si estoy preguntando aquí es por que no encontré la solución.
¿Alguien tiene idea?

Es muy fácil que te hagan el trabajo, verdad?
Cuanto menos, deberías:
- describir mejor tu problema.
- poner un esquema, con sólo el código implicado.
- poner un screenshoot (muchos no tenemos esa castaña de navegador)
- intentar adquirir más conocimientos de CSS, pues me parece que no andas muy sobrado...

por mi parte, te doy un voto de confianza, pero espero que la próxima, tengas en cuenta TODOS los puntos anteriores:
al DIV que contiene el menú, ponle:

cuéntanos si ha cambiado algo

rizome escribió:

Se de CSS, pero no demasiado.
Perdón si pareció que quisiera que me hiciesen el trabajo. Juro que intente solucionarlo, pero ya cansado de que nada de lo que intente funcionara plante la pregunta.
Mira, probé tu codigo y ¡gracias! funciono un poco. Pero aun sigue con una deformidad, claro que no tan terrible como la otra.
aquí uno Screen de como se ve en IE.


Y el...
Wrap Body y Content (Por si alguno sirve)

Código :

body {

   margin: 0px;

   padding: 0px;

   color: #000;
   background: #bde3ff;
   font: normal 13px/18px "Trebuchet Ms", "Lucida Grande", sans-serif;
}

#wrap {

   width: 800px;

   overflow: hidden;

   position:relative;

   margin: 0px auto;

    background: #fff;

}

#content {

   width: 550px;

   float: left;

   display:inline;

   text-align: justify;

   padding: 10px;
   margin: 8px;
   background-color:#fff;
   border:#ccc 1px dotted;

}

y el del DIV del menu:

Código :

#menu{
width:800px;
overflow:hidden;
list-style:none;
margin-top:-14px;
padding:0px;
}
#menu li{
padding-top:10px;
margin-bottom:10px;
background:#386BA4;
float:left;
}
#menu li a{
color:#fff;
text-decoration:none;
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
text-align:center;
display:block;
width:160px;
height:30px;
border-bottom:#111 3px solid;
}
#menu li a:hover{
color:#fff;
border-bottom:#fff 3px solid;
font-size:20px;
text-align:center;
display:block;
width:160px;
height:30px;
}

Sin IE para hacer pruebas, no sabría decirte.
Pero está claro que debes probar con él.
mira a ver, cambiando las dos líneas del:
por:
a ver qué pasa.

Con esos cambios, quita el menú, y cámbialo por una imagen, con ancho 700, y mira a ver cómo va.
Amplía la imagen a ancho 800, y mira a ver.
Si la imagen se queda donde debería, es cosa del menú, y te tocará ir probando...

Tienes que hacer muchas pruebas...
no creo q nadie pueda/deba hacerlo por tí.

Suerte

rizome escribió:

Muchísimas Gracias tu codigo funciono!!
Me podrías explicar más menos donde esta el truco?
No entiendo por que siempre me pasan cosas con el CSS.

rizome escribió:

No tiene ningún truco:

Código :

DIV
{position:relative; /* Posiciona el elemento respecto al elemento anterior */
top:0px; left:0px;  /* Le dice, que respecto al anterior, baje 0, y se arrime a la izquierda */
margin:0px;  /* Le dice que NO PONGA MARGENES */
width:800px; height:30px;  /* Especifica un tamaño */
overflow:hidden;  /* Le dice, que no crezca, bajo ninguna circunstancia, aunque el contenido sea mayor */
}

UL
{position:relative; top:0px; left:0px; /* idem */
margin:0px; /* idem */
margin-top:-5px; /* Esto sube un poco el elemento, aunque se podría haber quitado, y poner top:-5px; */
}

Lo que ocurre, es que se deben declarar explicitamente, y no dejarlas en "automático", porque si no, aparecen los problemas.

Muchísimas Gracias rizome. Entiendo un poco más ahora.
De verdad agradezco tu ayuda. Te debo una

JaLeRu, ya deberías saber las medidas máximas de las imágenes en los foros. La tuya deforma el foro.

JaLeRu escribió:

¿Que imagen?

AAA ya se cual..perdón..
La borro si quieren.