Mi web no se ve casi nada en firefox pero se ve algo mejor en IE

Buenas soy un miembro nuevo y antes de empezar quisiera dar las gracias a todos los de CCTW por enseñarme a crear una web y a todos los miembros que me puedan ayudar a mejorarla.

Decir que he buscado solucion en distintos apartados del foro pero sin resultado, por ello escribo este tema.

Hacer un par de dias, empece con los tutoriales para crear webs y todo esto.
A la vez que hacia la web de CCTW (la cual esa se ve perfecta) también he ido haciendo otra por mi cuenta. El tema es que cuando hago la web con el HTML-kit y hago click en previsualizar se ve como deseo.
Pero si habro el codigo con el firefox solo se ve el codigo HTML pero sin imagenes ni estilos que tengo definidos en el CSS.

Me gustaria que pudieses hecharle un ojo al codigo que subo para ver que se me esta pasando y porque en un navegador en este caso (firefox) no se ve practicamente nada de lo hecho.

CODIGO HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Ayudapcyon</title>

<link rel="stylesheet"media="all"type="text/css"href="estilos-web.css"><!-- enlaza la el codigo html con los estilos que se le dan en el.css -->
</head>
<body> 
 <div id="contenido"><!-- engloba todo el contenido dentro de esta pagina -->
   <div><img id="imagenlogo"id="logoayudapc"alt="Portada ayuda pc (273K)" src="OBJETOS/Portada%20ayuda%20pc.jpg" height="300" width="1200" />
	 </div>
   <div><h1><b>AYUDAPCYON</b></h1></div>
	 
	 <div>MENU NAVEGACION</div><!-- este sera el menu de navegación que tenga mi web -->
	 
	 <div id="pcpasoapaso"><p id="cabecerapasoapaso"><h2>TU PC PASO A PASO</h2></p>
	  		<div id="logo-pasoapaso"><img alt="pc (26K)" src="OBJETOS/pc.gif" height="80" width="100" /></div>
				<div id="menulistapasoapaso"><ul class="menu li">
				    <div id="pcpiezas"><li>MONTA TU PC A PIEZAS</li></div>
						<div id="hardwaremejor"><li>¿QUE HARDWARE ES MEJOR?</li></div>
				    <div id="softwaremejor"><li>¿QUE SOFTWARE PONGO?</li></div></ul>
				
			  </div>
	 </div>
	 
	 <div id="blender"><!-- esto es el recuadro o bloque de el blender en mi web -->
	 <p id="cabecerablender2"><h2>BLENDER 3D</h2></p>
	 			<div id="logo-blender"><img alt="blender3D (8K)" src="OBJETOS/blender3D.gif" height="80" width="100" /></div>
	 			<div id="menulistablender"><ul class="menu li"><li>HAZ TUS DIBUS 3D</li>
	 			<div id="figura3d"><li>CREA UNA FIGURA 3D</li></div></ul></div>					
	 </div>
<p></p>
 </div>
 


</body>
</html>

CODIGO CSS:

* {text-indent:0px; margin:0px; padding:0px; border:0px;}
body {text-align:center;margin-right:10px;margin-top:10px;}
body {background-image:url(objetos/fondo 7.jpg);background-repeat:no-repeat;background-position:center;heigth:100%;heigth:1200px;width:1600px;}
#contenido {width:1200px; margin:20px 20px 50px 20px;}<!-- esto limita el ancho y los margenes de todo el contenido de mi pagina -->
#colorear1 {background-color:black;}

.colorear3
#logoayudapc {float:right;margin:10px 0px 0px 0px;}<!-- mueve la imagen del logo ayudapc -->
#imagenlogo {}<!-- esto hace que la imagen del logo principal tenga un borde de 3pixel rojo -->

.menu-li1 {list-style:none;color:blue;}
.menu-li2 {list-style:none;color:fuchsia;}
h1 {background-color:white;font-size:2cm;}
h2 {font-size:1.1em; color:blue; font-weight:bold; text-decoration:none; text-align:center;background-color:silver;} 

#menulistablender {float:right;margin:0px 20px 2px -10px;}<!-- contiene la colocacion de el menu de blender -->
#figura3d {float:left;margin:10px 1px 2px 0px;}<!-- esto es para que la palabra de la lista crea una figura 3d se peuda mover -->
#blender {background-color:white; width:300px; heigth: 30px;float:left; text-align:right; margin-right:0px;margin:10px 0px 0px 900px;}<!-- mueve el recuadro en el que esta el logo de blender -->
#logo-blender {float:left;margin:3px 0px 3px 1px;}<!-- mueve la imagen del logo de blender3D -->
#cabecerablender2 {text-align:center;}<!-- colorea la franja en la que se encuentra el titulo de blender -->

#pcpasoapaso {background-color:white;width:1200px;heigth:100px; }
#cabecerapasoapaso {text-align:center;}
#logo-pasoapaso {float:left;margin:3px 0px 10px 10px;}
#pcpiezas {float:right;margin:10px 0px 10px -1000px;}
#hardwaremejor {float:right;margin:10px 0px 10px -750px;}
#softwaremejor {float:right;margin:50px 0px 10px -1000px;}

Esta seria la URL de la pagina que quiero crear: http://www.ayudapcyon.nixiweb.com/
Gracias de antemano por la ayuda que me podais dar, Saludos.
Hola:

Es algo complejo leer el código así :P. Cuando escribas CSS siempre hazlo así:

#id {
  propiedad: valor;
  propiedad1: valor1;
  propiedadn: valorn;
}

Así es mas legible y fácil de entender :D (es solo una sugerencia).

En cuanto a tu problema: lo que ocurre es que Internet Explorer interpreta los valores de de distinta forma. Por ejemplo, para IE 1px puede ser igual a 0.2 Milímetros, mientras que para Firefox pueden ser 0.3 mm. No es mucha diferencia, pero cuando sumas los anchos, los altos, márgenes, padding, etc., es una gran diferencia.

Por otro lado tienes al menos un error gramatical: heigth no existe, pues se escribe height (termina en HT).

También pusiste dos veces height:

body { ... heigth:100%; heigth:1200px; }

que de estar bien escritos, la primera se omitirá, quedando con un alto de 1200px.

Otra cosa que ocurre con Firefox (en realidad IE es quién mal interpreta las propiedades), Google Chrome, Opera y Safari, es que para centrar un elemento (<p>, <div>, etc.) no se hace a través de text-align: center, sino que debes darle un ancho específico y luego darle márgenes así:

div {
width: 90%;
margin: 0 auto;
}

Lo anterior le dice al navegador que debe mostrar todos los divs con un ancho del 90% y aplicar todo el margen restante equitativamente a ambos lados, lo centrará el elemento.
Cuando añades la propiedad float, ya sea left o right, esto hace que el siguiente elemento sea posicionado seguido del elemento anterior al que flotaste XD. En otras palabras, es como que eliminaras los márgenes del elemento flotado y el elemento siguiente tendrá un comportamiento extraño (como si absorbiera los márgenes). Para solucionarlo, debes añadir la propiedad clear: both al siguiente elemento:

<div class="uno"><p>texto...</p></div>
<div class="dos"><p>texto---</p></div>

div.uno {
  float: left;
}

div.dos {
  clear: both
}

En cuanto a las imágenes:

Cuando utilices imágenes, nunca las nombres con espacios en blanco pues pueden causar problemas. Cambia los espacios en blanco por guiones (-) o guiones bajos (_).

<img id="imagenlogo"id="logoayudapc"alt="Portada ayuda pc (273K)" src="OBJETOS/Portada%20ayuda%20pc.jpg" height="300" width="1200" />

También debes asegurarte de que la ruta a la imagen sea la que especificaste.

Ojalá todo lo anterior te sirva de ayuda :D.

Saludos.
Gracias por responder me as ayudado un poko en el tema de mover las capas o divs pero sigo sin poder ver las imagenes con las que tengo hecho esto.
He cambiado los nombres de los archivos para que no tengan espacios como me recomendaste, pero sigo sin verlas y actualice tambien el nombre en el codigo HTML.
Tambien he corregido los errores de escritura de algunas cosas en la hoja de estilo.

Y Lo de :
div.uno {
  float: left;
}

div.dos {
  clear: both
}
No me a quedado claro del todo
Gracias por ayudarme de antemano.
Hmmm... yo creo que es la ruta a las imágenes. Las rutas son sensibles a mayúsculas y minúsculas, por lo que objetos/nombre_imagen.png no será igual a OBJETOS/nombre_imagen.png, así que ojo con eso.

En cuanto a lo del float:

Intenta haciendo la siguiente prueba (copia y pega):

<html>
  <head>
    <style media="screen" type="text/css">
      * { margin: 0; padding: 0; }
      div.uno { float: left; background: #000; height: 50px; width: 50px; }
      div.dos { background: #f00; height: 50px; width: 50px; margin: 0px 0 0 15px; }
    </style> 
  </head>
  <body>
    <div class="uno"></div>
    <div class="dos"></div>
  </body>
</html>

<html>
  <head>
    <style media="screen" type="text/css">
      * { margin: 0; padding: 0; }
      div.uno { float: left; background: #000; height: 50px; width: 50px; }
      div.dos { clear: both; background: #f00; height: 50px; width: 50px; margin: 0px 0 0 15px; }
    </style> 
  </head>
  <body>
    <div class="uno"></div>
    <div class="dos"></div>
  </body>
</html>

Mira las diferencias entre ambos; en el primero parece que ambos divs estuvieran en la misma posición y en el segundo (que tiene la propiedad clear: both) ambos están separados. Cuando usamos la propiedad float se dice que el elemento se saca del flujo normal en el que se muestran los mismos. Imagina que el sitio es una piscina; si uno tira un flotador, este estará sobre el agua y por ende sobre todos los demás elementos; lo mismo ocurre con los elementos en un sitio: estos pierden su forma física (no se respetan los márgenes, padding, etc.).

Espero que te haya quedado más claro :D.
respecto a los div y esas cosas me as resuelto alas dudas.
Ahora sigo sin saber porque narices no me carga las fotos en internet.
he creado una portada la cual en local se ve muy bien pero al subir los archivos a el hosting estas imagenes no se ven y eso que tengo puesto todo =.

te pego el codigo html y css de mi portada(es muy simple).

HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>AYUDAPCYON</title>
<link rel="stylesheet" href="estilo.css" type="text/css" media="all">
<style media="screen" type="text/css">
      * { margin: 0; padding: 0; }
      div#entrar { float: left; height: 50px; width: 50px; }
      div#salir { clear: both; height: 50px; width: 50px;}
    </style>
</head>
<body>
<!--INICIO BOTONERA WEB-->
	<div id="todo">
		<div id="entrar"><a href="#"><img alt="entrarweb (5K)" src="objetos/entrarweb.gif" height="80" width="200" /></a></div>
		<div id="salir"><a href="#"><img alt="salirweb (5K)" src="objetos/salirweb.gif" height="80" width="200" /></a></div>
        </div>
<!--FIN BOTONERA WEB-->
</body>
</html>


css:
/*IMAGEN FONDO*/
body {background-image:url(objetos/portada-ayuda-pc.jpg); 
         background-repeat:no-repeat;
         background-position: center; 
         margin:1000px 0px 0px 0px;}

div {
width: 90%;
margin: 0 auto;
}
/*COLOCACION DE LOS BOTONES DE ENTRADA A LA WEB*/
#entrar {float:left;
           margin:-300px 0px 0px 500px;}
#salir {float:left;
	   margin:-300px 0px 0px 700px;}

Y también te dejo una imagen para que veas como tengo puestas las carpetas tanto en LOCAL como en internet.
http://imageshack.us/photo/my-images/259/comoesta.jpg/

Y asi es como se ve en local en firefox.
http://imageshack.us/photo/my-images/217/asiseve.jpg/
Yo sí veo la imagen:

[contenido no disponible]

A veces puede deberse a la caché (una carpeta donde se guardan datos para un acceso mas rápido) del navegador. Busca en google como borrar la caché en Firefox, recarga la página y ve el resultado.
gracias de nuevo por responder.
No se el como pero el caso esq ahora si se ven las imagenes en Internet(lo que hice es subirlos 6 veces remplazando el antiguo sera por eso?).

Ahora me a surgido una nueva duda respecto a el aspecto visual, y esque su acerco o alejo el ZOOM los botones que tengo colocados se desplazan y no se quedan en el sitio que yo quisiera que estubiesen siempre.
Si tienes idea de como hacer que los botones se queden estaticos, que no se muevan con el zoom te lo agradeceria mucho.
Ya he solucionado el tema gracias por toda la ayuda prestada.
cuidaros.

La solucion que le he puesto es no ponerle los anchos de pagina etc en pixel sino en porcentajes ya que los porcentajes se interpretan iguales en todas las pantallas.