página no se ve igual en el servidor

A ver si podeis ayudarme con mi página. El problema es que en mi navegador "mozilla firefox" se ve la página estupendamente antes de subirla al servidor, (La he subido a http://razyhosting.com). Una vez subida no se ve igual y no se por qué. Os pongo aquí mi dirección web y mi hoja de estilo. Tiene algunas modificaciones con respecto a las lecciones, a ver si podeis ayudarme. Gracias de antemano. Felicidades a jorgens por las lecciones.
Mi direccion es: http://www.rafaelgarcia.mywebcommunity.org/plantilla.html
Mi hoja de estilo es:
* {text-indent:0px ; margin:0px ; padding:0px ; border: 0px}
p {text-align: justify}
h1 {font-size: 1.2em; color:blue ; font-weight: bold ;
text-decoration: underline ; text-align: center ;
border-left: black 1px solid ; border-right: black px solid }
h2 {font.size: 1.1em; color:blue ; font-weight: bold ;
text-decoration: none ; text-align: center ;
border-left: black 1px solid ; border-right: black px solid }
body {text-align: center}
#global {width:800px ; margin: 4px auto }
#curva-superior { background-image: url(objetos/curva-superior.gif) ;
background-repeat: no-repeat ;
width:800px ;
height: 12px ;
overflow : hidden }
#cabecera {background-color: white ; height:83px ; border-left: black px solid ; border-right: black 1px solid }
#logotipo {background-color: white ; width:280px ; float: left ; border-left: black 1px solid}
#publicidad {background-color: white ; width:518px ; float:right ; margin-top:25px ;
font-size: 16px }
#navegacion {background-color: blue ; widht: 800px ; border: black 1px solid ; height : 20px}
#navegacion li {float:left ; list-style:none ; margin: 0px 24px 0px 24px }
#navegacion ul { margin-left: 80px }
#contenido {background-color: orange ; width: 800 ; border-right: black 1px solid}
#contenido p {padding: 5px 10px 5px 10px ; text-indent: 25px ;border-left:
black 1px solid ; border-right: black px solid }
#menu {background-color: yellow ; width: 150px ; float:left ;
text-align:left ; margin-right: 10px ; margin:10px 10px 3px 10px ;
background-image: url(objetos/menu-parte-inferior.gif) ;
background-position: bottom ;
padding-bottom: 5px }
#menu li { list-style:none ; margin: 4px 4px 0px 6px }
#menu h1 { text-decoration: none ; font-size: 12px ; color: brown ; border: none ; padding-top:12px ;
background-image: url(objetos/menu-parte-superior.gif)}
#penultimo { background-color: blue ;
border-left : black 1px solid ; border-right : black 1px solid ; width: 800}

#pie { background-color: white ; widht: 150px ; border-left : black 1px solid ; border-right : black 1px solid ;
font-size:0.6em ; height: 65px }
#pieuno {background-color: # ; float:left ; width:150px ; height: px }
#pieuno li { list-style: none ; font-size: 10px}
#piedos {background-color: # ; float:left ; width:498px ; height: px }
#pietres {background-color: # ; float:left ; width:150px ; height: px }
#pietres li {list-style: none ; font-size: 10px}

#curva-inferior { background-image: url(objetos/curva-inferior.gif) ;
background-repeat: no-repeat ;
widht:800px ;
height: 12px ;
overflow : hidden }
a {color: black; font-size:1.2em ; text-decoration: none ; display: block }
a:link {}
a:visited {}
a:hover {color:red ; text-decoration: # ; background-color: #}
a:active {}

a.enlaceuno {}
a.enlaceuno:link {}
a.enlaceuno:visited {}
a.enlaceuno:hover {}
a.enlaceuno:active {}

#pie a {color: blue; text-decoration:none ; display: block }
#pie a:link {}
#pie a:visited {}
#pie a:hover {color:black ; text-decoration:underline ; background-color: white }
#pie a:active {color:black}

Hola

para ayudarte mejor, dinos que es lo que no te gusta

pero veo muchas cosas en la hoja de estilos

porque pones esto:
a:hover {color:red ; text-decoration: # ; background-color: #}

todas esas # se supone que ahi debes ponerle algo
su caracteristica

entonces, poque lo dejas asi:???

rafa2002 escribió:A ver si podeis ayudarme con mi página. El problema es que en mi navegador "mozilla firefox" se ve la página estupendamente antes de subirla al servidor, (La he subido a http://razyhosting.com). Una vez subida no se ve igual y no se por qué. Os pongo aquí mi dirección web y mi hoja de estilo. Tiene algunas modificaciones con respecto a las lecciones, a ver si podeis ayudarme. Gracias de antemano. Felicidades a jorgens por las lecciones.
Mi direccion es: http://www.rafaelgarcia.mywebcommunity.org/plantilla.html
Mi hoja de estilo es:
* {text-indent:0px ; margin:0px ; padding:0px ; border: 0px}
p {text-align: justify}
h1 {font-size: 1.2em; color:blue ; font-weight: bold ;
text-decoration: underline ; text-align: center ;
border-left: black 1px solid ; border-right: black px solid }
h2 {font.size: 1.1em; color:blue ; font-weight: bold ;
text-decoration: none ; text-align: center ;
border-left: black 1px solid ; border-right: black px solid }
body {text-align: center}
#global {width:800px ; margin: 4px auto }
#curva-superior { background-image: url(objetos/curva-superior.gif) ;
background-repeat: no-repeat ;
width:800px ;
height: 12px ;
overflow : hidden }
#cabecera {background-color: white ; height:83px ; border-left: black px solid ; border-right: black 1px solid }
#logotipo {background-color: white ; width:280px ; float: left ; border-left: black 1px solid}
#publicidad {background-color: white ; width:518px ; float:right ; margin-top:25px ;
font-size: 16px }
#navegacion {background-color: blue ; widht: 800px ; border: black 1px solid ; height : 20px}
#navegacion li {float:left ; list-style:none ; margin: 0px 24px 0px 24px }
#navegacion ul { margin-left: 80px }
#contenido {background-color: orange ; width: 800 ; border-right: black 1px solid}
#contenido p {padding: 5px 10px 5px 10px ; text-indent: 25px ;border-left:
black 1px solid ; border-right: black px solid }
#menu {background-color: yellow ; width: 150px ; float:left ;
text-align:left ; margin-right: 10px ; margin:10px 10px 3px 10px ;
background-image: url(objetos/menu-parte-inferior.gif) ;
background-position: bottom ;
padding-bottom: 5px }
#menu li { list-style:none ; margin: 4px 4px 0px 6px }
#menu h1 { text-decoration: none ; font-size: 12px ; color: brown ; border: none ; padding-top:12px ;
background-image: url(objetos/menu-parte-superior.gif)}
#penultimo { background-color: blue ;
border-left : black 1px solid ; border-right : black 1px solid ; width: 800}

#pie { background-color: white ; widht: 150px ; border-left : black 1px solid ; border-right : black 1px solid ;
font-size:0.6em ; height: 65px }
#pieuno {background-color: # ; float:left ; width:150px ; height: px }
#pieuno li { list-style: none ; font-size: 10px}
#piedos {background-color: # ; float:left ; width:498px ; height: px }
#pietres {background-color: # ; float:left ; width:150px ; height: px }
#pietres li {list-style: none ; font-size: 10px}

#curva-inferior { background-image: url(objetos/curva-inferior.gif) ;
background-repeat: no-repeat ;
widht:800px ;
height: 12px ;
overflow : hidden }
a {color: black; font-size:1.2em ; text-decoration: none ; display: block }
a:link {}
a:visited {}
a:hover {color:red ; text-decoration: # ; background-color: #}
a:active {}

a.enlaceuno {}
a.enlaceuno:link {}
a.enlaceuno:visited {}
a.enlaceuno:hover {}
a.enlaceuno:active {}

#pie a {color: blue; text-decoration:none ; display: block }
#pie a:link {}
#pie a:visited {}
#pie a:hover {color:black ; text-decoration:underline ; background-color: white }
#pie a:active {color:black}

Así por encima he visto que en el menú de la hoja de estilo tienes definido dos veces el margin right, lo pones una vez solo y después vuelves a ponerlo en - margin 10px 10px 3px 10px. y en la capa llamada penultimo tienes puesto el width (ancho pero no le has definido ese ancho y el navegador en vez de creer que son pixeles px puede creer que son puntos o pulgadas.
Saludos
PD:
En la capa contenido te ha faltado ponerle el 1 al border- right:1px

"a:hover {color:red ; text-decoration: # ; background-color: #}. "Todas esas # estaban antes : text-decoration: underline ; background-color: red, pero no me gustaban. Y en vez de eliminar todo lo dejé con las almohadillas por si alguna vez lo volvía a cambiar.
El problema es que en mi ordenador se ve la página bien, y cuando la subo al servidor no se ve bien. Algunas lineas de la hoja de estilo es como si no las leyera y no sé a que se debe.
Saludos.

He modificado lo que me ha dicho Raulyure : "en la capa llamada penultimo tienes puesto el width (ancho pero no le has definido ese ancho y el navegador en vez de creer que son pixeles px puede creer que son puntos o pulgadas. " y la página ha mejorado mucho. Aun me queda un poco. Gracias por tu ayuda.
Un saludo.

Ya sé lo que pasa. En el explorer se ve como la he creado, pero en mozilla se ve la capa penúltima desplazada un pixel hacia la derecha. Además "Esta será la zona principal", en mozilla no sale centrada y en el explorer si. Nosé a que se debe. Si algien puede ayudarme! Gracias y un saludo.