Problemas con IE

[matelo]

Realice una pagina web con CSS y Html, lo probe en los navegadores que tengo, Safari, Firefox, Opera y IE, En todos los navegadores se ve bien la pagina menos en IE. En el IE para mac, el menu que va en la parte negra se baja demasiado y no se ve ya que es blanco, y todo se desordena y se ve horrible. En el IE para pc, no se desordena mucho, pero se baja el menu y no se ve igualmente. Ahora con el Opera, el problema es que el link que dice "english" no sirve, se lee pero es como si no fuera link. No se que es lo que esta pasando, y agradecería toda la ayuda que me puedan dar.
El link es http://marcelodesign.atspace.com

bueno, por si acaso este es el codigo html:

<div id="header">
<h1 id="encabezado"><span></span></h1>
</div>


<div id="container">
<div id="menu2">
<a href="ingles/index2.html">english</a></div>
<div id="menu">
<ul id="menu1">
<li><a href="contacto.html">contacto </a></li>
<li><a href="servicios.html">servicios </a></li>
<li><a href="portafolio.html">portafolio </a></li>
<li><a href="vida.html">hoja de vida </a></li>
<li><a href="index.html">inicio </a></li>
</ul>
</div>
<div id="subtit">
<img src="images/subti/contac.gif"/></div>

y este es el codigo CSS

#menu {
width:100%;
position: relative;
top: -32px;
float: right;
}

#menu1 {
color: #fff;
font-size: 10px;

margin: 0;
}

#menu1 li {
list-style: none;
float: right;
width: 80px;
display: inline;
text-align: center;
padding: 0;
margin: 0px 2px 0px 0px;

}

#menu1 a {
color: #fff;
display: block;
font-weight: bold;
text-decoration: none;

}

#menu1 a:hover {
color: #fff;
font-weight: normal;
}

#menu1 a#current {
color: #006600;
}

#menu2{
float: left;
left: 143px;
position: relative;
top: -15px;
width: 50px;
z-index: 2;
}

#menu2 a{
font-size: 9pt;
font-weight: bolder;
letter-spacing: 1pt;
color: #f80;
z-index: 2;
}

#menu2 a:hover{
font-size: 9pt;
letter-spacing: 1pt;
color: #f80;
font-weight: normal;
z-index: 2;}

#subtit {
position: relative;
float: left;
clear: right;
left: 120px;
top: -10px;
z-index: 0;
}

Bueno son pedazos del código, justo donde estan los elementos que aprecen mal.

[Rafael]

Hecándole un vistazo rápido al código html, en tu div menu, modifica el margin-top (o asígnale uno), o en ultimo caso usa un position: relative y prueba con diferentes valores.

Ahora, usa lo que es para lo que es, en ese caso concreto, ¿no te parece que anidar un ul y sus respectivos li salen sobrando?.

Saludos.

[matelo]

gracias por la respuestas Rafael, en cuanto al anidado del ul, pues si es algo redundante pero hice la prueba de otra forma, y resulta que ya tambien en Opera se ve mal, por lo que lo deje asi.

[Rafael]

Viendolo con más calma veo que hay demasiados "artificios", por ejemplo un span dentro del h1 vacío. Sipongo que metiste las imagenes como estilos.

Hay demasiados z-index cuando dejando que fluyan los divs no habría tanta necesidad.

Estás recurriendo a un elemento de bloque li y ul, que trae atributos por default diferentes en diferentes navegadores, quzá el margin-top, y por eso afecta diferente en los navegadores.

Hay Id anidados. Tal vez usalos con más mesura, ya que casi todos tienen o un float, position, z-index o block. Hay tienes una ensalada.

Trata de simplificar el código a lo que necesites. El Html está bastante limpio. Haz un ejercicio haciendo una copia, eliminando los li, y usando un css más básico.

[matelo]

Gracias Rafael por tomarte tu tiempo y ver el codigo, te cuento que ya hice algunos cambios como los div anidados y cambie el DOCTYPE pero te cuento que en el IE sigue saliendo mal y en el Opera el link English no es link.

No entendi muy bien lo que dijiste sobre ul y li en los navegadores.
Gracias nuevamente.

[Rafael]

Ya vi algunas cosas.

Tienes un span con display none, esto parece que está colapsando todo el h1... Si no quieres que aparezca tu nombre mejor no lo pongas, no lo escondas.

Prueba cambiando los position relative de English y el menu a absolute y recalcula la altura top de cada uno.

A ver si despues con calma te mando el código quitando lo que pienso que sobra, solo que no sé si en realidad lo usas digamos en otras páginas.