Problemas con el navegador firefox

Hola amigos soy nuevo por aqui, he creado una pagina con: cabecera, contenido, menu y pie. Cuando lo subo al servidor y lo miro con el internet explorer me aparece todo bien, pero cuando lo miro en el firefox, el pie me sale casi arriba del todo. Como puedo solucionar esto¿?
No se muy bien a que te refieres con el URL, donde esta alojada mi web? Aqui hos dejo mi codigo HTML y estilo.css=

HTML:

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

<html>
<head>
<title>J Y C</title>
<link rel="stylesheet" href="estilos.css" type="text/css" media="all">
</head>
<body>
<div id="global">
<div id="cabecera">Julio Y Carmen</div>
<div id="subcabecera"></div>
<div id="menu">
<ul>
  • Google
  • Descarga de archivos
  • Play Station 3
  • Documentos
  • Imagenes
  • Bromas
  • Power points

    </div>
    <div id="contenido">
    <h1>--Web en construccion</h1>



    </div>
    <div id="pie">Pagina creadapor pilot84</div>
    </div>
    </body>
    </html>



    ESTILO:CSS


    * {margin:0px ; padding:0px ; border: 0px}
    body {background-color: black;
    background-image: url(objetos/#.JPG) ;
    background-position: center center;
    background-repeat: no-repeat ; height:100%; }
    #cabecera {color:red ; font-size:2.3em}
    #navegacion {background-color: gray }
    #pie {background-color: brown}
    body {text-align: center}
    #global {width:800px ; margin: 4px auto }
    #contenido {width: 800px ; float:left ; color: white ; font-size:1.3em}
    #menu li { list-style:none; margin: 14px 10px 14px 16px }
    #menu { width: 150px ; float:left ; text-align:left}
    a {color: blue ; text-decoration:none ; font-size:1.3em}
    a:link {}
    a:visited {}
    a:hover {color:red ; text-decoration:underline}
    a:active {}
    #subcabecera {color:blue ; font-size:2.3em}
    h1 {font-size: 1.2em; color:red ; font-weight: bold ; text-decoration: underline ; text-align: center}
    h2 {font.size: 0.8em; color:blue ; ont-weight: bold ; text-decoration: underline ; text-align: center}
  • Ya:

    1. Tiene repetida la palabra "center" en esta línea de la hoja de estilos:

    (... background-position: center center;)

    2. El body en la hoja de estilos únalo en uno sólo:

    ( body {background-color: black;
    background-image: url(objetos/#.JPG) ;
    background-position: center center;
    background-repeat: no-repeat ; height:100%; }....)

    ( body {text-align: center}...)

    3. Quítele el "width" y el "float" al contenido en la hoja de estilos.

    (#contenido {width: 800px ; float:left ; color: white ; font-size:1.3em}..)

    4. En la hoja de .html, Meta el <div id="menu"><ul>........ </div> inmediatamente después de <div id="contenido">

    Y 5. Agréguele algo de TEXTO al contenido para que coja cuerpo, porque si está vacío el pie siempre se va a subir ...


    Bueno , yo la organicé así (Y se ve bien en todos los navegadores):

    estilos.css:

    * {margin:0px ; padding:0px ; border: 0px}
    #global {width:800px ; margin: 4px auto }
    body {text-align: center;background-color: black;
    background-image: url(objetos/#.JPG) ;
    background-position:center;
    background-repeat: no-repeat ; height:100%; }
    h1 {font-size: 1.2em; color:red ; font-weight: bold ; text-decoration: underline ; text-align: center}
    h2 {font.size: 0.8em; color:blue ; ont-weight: bold ; text-decoration: underline ; text-align: center}
    #cabecera {color:red ; font-size:2.3em}
    #subcabecera {color:blue ; font-size:2.3em}
    #navegacion {background-color: gray }
    #contenido {color: white ; font-size:1.3em}
    #menu { width: 150px ; float:left ; text-align:left}
    #menu li { list-style:none; margin: 14px 10px 14px 16px }
    #pie {background-color: brown}
    a {color: blue ; text-decoration:none ; font-size:1.3em}
    a:link {}
    a:visited {}
    a:hover {color:red ; text-decoration:underline}
    a:active {}


    hoja .html

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title>J Y C</title>
    <link rel="stylesheet" href="estilos.css" type="text/css" media="all">
    </head>
    <body>
    <div id="global">
    <div id="cabecera">Julio Y Carmen</div>
    <div id="subcabecera"></div>
    <div id="contenido">
    <div id="menu">
    <ul>
  • Google
  • Descarga de archivos
  • Play Station 3
  • Documentos
  • Imagenes
  • Bromas
  • Power points

    </div>
    <h1>--Web en construccion</h1>
    "Tendría yo como 14 o 15 años... estabamos mi hermano de 12 años y dos compañeros más de 14 años promedio; estabamos cazando pájaros en una ensenada, o campo, con unas chinas(resorteras); en la maleza se movió algo de repente... yo me asusté pensando que era un perro; lo primero que vi, a una distancia como de 4 metros parecía tener forma de un mono con piel clara; yo grité a mis compañeros: "un mono"... hemos encontrado un mono pequeño, era muy difícil que por esa zona se encontrara un monoyo quedé aterrado junto con mi hermano ya que fuimos los únicos que lo vimos por un momento, no sabíamos lo que era; inmediatamente del susto nos fuimos para la casa y lo comentamos a los compañeros que nos acompañaban y nunca conseguimos una explicación de lo que era... si lo hubiese visto yo solo hubiera creído que lo había imaginado....pero fuimos dos personas los que lo vimos al mismo tiempo.... y no era un animal...ni ningún mono que hayamos visto alguna vez... en lo que sí concordamos es que tenía forma humanoide... al principio creíamos que era algún tipo de duende... Pero sin ropa? y la piel no era con pelos... nunca se lo contamos a nadie porque estas historias poca gente las puede creer.... ..."
    </div>
    <div id="pie">Pagina creadapor pilot84</div>
    </div>
    </div>
    </body>
    </html>

    Ya las distancias entre el menu y el contenido se las da en la hoja de estilos con "margin" o "padding"

    Un amigo desde Colombia