Problemas con el navegador

Hola a todos, tenia un problema :/
Les muestro mi pagina web: http://mayanzone-fr.sportsontheweb.net
Si ingresan no esta muy terminada, y esta en frances :p
miren mi index.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Mayan Zone</title>
<link rel="stylesheet" href="styles.css" type="text/css" media="all">
</head>
<body>

<script>
// numero de copos de nieve (maximo 35)
var snowmax=10
// colores para la nieve. puedes poner varios
var snowcolor=new Array("#aaaacc","#ddddFF","#ccccDD")
// fuente para los copos de nieve. puedes poner varios
var snowtype=new Array("Arial Black","Arial Narrow","Times","Comic Sans MS")
// coloca la letra que hara de copo, normalmente un asterisco *
var snowletter="Bienvenue a Mayan Zone"
// velocidad de la nieve. se recomienda entre 0.2 a 2
var sinkspeed=0.6
// tamaño maximo para los copos de nieve
var snowmaxsize=30
// tamaño minimo para los copos de nieve
var snowminsize=10
// Aqui selecciona el modo de nive. pon 1 para que la nieve caiga por todos lados
// 2 para que venga de la izquierda, 3 desde la derecha y 4 desde arriba.
var snowingzone=1
// lo siguiente no se debe variar
var snow=new Array()
var marginbottom
var marginright
var timer
var i_snow=0
var x_mv=new Array();
var crds=new Array();
var lftrght=new Array();
var browserinfos=navigator.userAgent
var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/)
var ns6=document.getElementById&&!document.all
var opera=browserinfos.match(/Opera/)
var browserok=ie5||ns6||opera
function randommaker(range) {
rand=Math.floor(range*Math.random())
return rand
}
function initsnow() {
if (ie5 || opera) {
marginbottom = document.body.clientHeight
marginright = document.body.clientWidth
}
else if (ns6) {
marginbottom = window.innerHeight
marginright = window.innerWidth
}
var snowsizerange=snowmaxsize-snowminsize
for (i=0;i<=snowmax;i++) {
crds = 0;
lftrght = Math.random()*15;
x_mv = 0.03 + Math.random()/10;
snow=document.getElementById("s"+i)
snow.style.fontFamily=snowtype[randommaker(snowtype.length)]
snow.size=randommaker(snowsizerange)+snowminsize
snow.style.fontSize=snow.size
snow.style.color=snowcolor[randommaker(snowcolor.length)]
snow.sink=sinkspeed*snow.size/5
if (snowingzone==1) {snow.posx=randommaker(marginright-snow.size)}
if (snowingzone==2) {snow.posx=randommaker(marginright/2-snow.size)}
if (snowingzone==3) {snow.posx=randommaker(marginright/2-snow.size)+marginright/4}
if (snowingzone==4) {snow.posx=randommaker(marginright/2-snow.size)+marginright/2}
snow.posy=randommaker(2*marginbottom-marginbottom-2*snow.size)
snow.style.left=snow.posx
snow.style.top=snow.posy
}
movesnow()
}
function movesnow() {
for (i=0;i<=snowmax;i++) {
crds += x_mv;
snow.posy+=snow.sink
snow.style.left=snow.posx+lftrght*Math.sin(crds);
snow.style.top=snow.posy
if (snow.posy>=marginbottom-2*snow.size || parseInt(snow.style.left)>(marginright-3*lftrght)){
if (snowingzone==1) {snow.posx=randommaker(marginright-snow.size)}
if (snowingzone==2) {snow.posx=randommaker(marginright/2-snow.size)}
if (snowingzone==3) {snow.posx=randommaker(marginright/2-snow.size)+marginright/4}
if (snowingzone==4) {snow.posx=randommaker(marginright/2-snow.size)+marginright/2}
snow.posy=0
}
}
var timer=setTimeout("movesnow()",50)
}
for (i=0;i<=snowmax;i++) {
document.write("<span id='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"'>"+snowletter+"</span>")
}
if (browserok) {
window.onload=initsnow
}
</script>

<meta content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<h1>Bienvenu a Mayan Zone !</h1>
<div id=logo>


[contenido no disponible]</p>
</div>
<div id="navegation">
<h2>Nos Tours</h2>
<ul>
<li class="margen">Présentation
<li class="margen">Río Dulce
<li class="margen">Antigua
<li class="margen"><a href="#">Chichi
<li class="margen">Livingston</a>
</div>


Le site est en construccion, desoler pour les incovenients, nous sommes en train de travailler sur le nouveau site web.</p>


Pour nous envoyer un mail vous avez qua cliquer ici: [contenido no disponible]</p>
<div id="menu">
<h2>Mayan Zone</h2>
<ul>
<il>

</body>
</html>




ya aqui mi styles.css
* {text-indent:0px ; margin:0px ; padding:0px ; border:0px}
p {text-align: center}
body{background-color:#228B22 ; text-align:left}
h1 {font-size: 5em ; color:blue ; font-weight: bold ; text-decoration: underline ; text-align: center}
p {font-size: 1.3em}
img {border-style:none}
h2 {font-size: 2em ; color: blue ; font-weight: bold ; text-decoration: underline ; text-align: center}
.espanol {font-size: 2em}
a {color: brown ; text-decoration:none ; display: block }
a:link {}
a:visited {}
a:hover {color:red ; text-decoration:underline ; background-color:silver}
a:active {}
#navegation{background-color: dark green ; border: none ; height:20px ; margin:10px 610px 10px 610px}
#navegation li{margin: 5px 0px 5px 0px ; float:left ; font-size: 1.2em ; background-image: url(objets/menu-curva-superior.gif)}
.margen {padding:5px 15px 5px 15px}
.margin {margin: 0px 850px 10px 850px}
.margenis {margin: 0px 700px 10px 700px ; paddin:100px 100px 100px 100px}
#logo {padding:100px 100px 100px 100px}


En conclusion mis porblemas son:
Las imagenes que deberian de ir arriba de la lista a la izquierda no aparecen.
Nada esta centrado



Gracias ^^