Mi pagina no se ve bien en Firefox.....

Bueno, pues como dice el titulo mi "pagina web" no se ve como deberia en firefox....Y bueno no se porque ya que firefox no me ha fallado nunca y para el colmo mi pagina web se ve bien en Internet explorer......Aqui mis codigos:

Plantilla.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Page title</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
<link rel="stylesheet" href="estilo-menu-desplegable.css" type="text/css" media="all">
</head>
<head>
<title>Page title</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
<link rel="stylesheet" href="estilo-menu-desplegable.css" type="text/css" media="all">
<script language="javascript" src="no-tocar.txt" type="text/javascript"></script>
<script language="javascript" src="numero-de-menus.txt" type="text/javascript"></script>
</head>
<body onload="init();">
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo">[contenido no disponible]</div>
<div id="publicidad">Bienvenidos a mi Web</div>
</div>
<div id="navegacion">
<ul>
  • Sección 1
  • Sección 2
  • Sección 3

    </div>
    <div id="contenido">
    <div id="menu">
    <h1>Título de Sección 1</h1>
    <ul>
  • Enlace 1
  • Enlace 2

  • Enlace 3
  • Enlace 4
    </div>
    <h1>Esta será la zona principal de la web</h1>


    Este es mi segundo párrafo. Acabo de poner un punto y en cambio sigue siendo un párrafo
    pues no le he colocado aún la etiqueta de cierre. Voy a ponersela justo aquí.</p>
    <h2>Y este es el tercer párrafo.</h2>


    En pocas lecciones aprenderé a darle margenes para
    separarlos unos de otros, e incluso hacerles sanguias por la izquierda a la primera línea,
    que queda mucho mejor.</p>


    Anda, fijate! Salen todos centrados, que cosa. Espero que Jorgens nos enseñe a ponerlos
    alineados a la izquierda, o justificados. Así esto parece una poesia! je je je.</p>
    </div>
    <div id="pie">
    <div id="pieuno">
    <ul>
  • Foro Ejemplo
  • Contactos
  • Nos enlazan

    </div>
    <div id="piedos">pie dos</div>
    <div id="pietres">
    <ul>
  • Directorio
  • TopSite
  • Mapa de la web

    </div>
    </div>
    <div id="curva-inferior"></div>
    </div>
    <script language="javascript" src="definir-menus.txt" type="text/javascript"></script>
    </body>
    </html>

    Estilo-general.css

    * {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}
    h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ;
    text-align: center}
    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 ;
    * {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}
    h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ;
    text-align: center}
    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 ; border-left: black 1px solid ;
    border-right: black 1px solid ; height:85px}
    #logotipo {width:280px ; float:left }
    #publicidad {width:518px ; float:right ; margin-top:25px ; font-size: 16px }
    #navegacion {background-color: gray ; border: black 1px solid ; height:20px}
    #navegacion li {float:left ; list-style:none ; margin: 0px 20px 0px 20px }
    #navegacion ul { margin-left: 180px }
    #contenido {background-color: orange ; border-left: black 1px solid ;
    border-right: black 1px solid }
    #contenido p {margin: 5px 10px 0px 10px ; text-indent: 15px}
    #menu {background-color: lorange ; width: 150px ; float:left ;
    text-align:left ; margin: 3px 10px 3px 3px ;
    background-image: url(objetos/menu-parte-inferior.gif);
    background-position: bottom ;
    padding-bottom:5px }
    #menu li {list-style:none ; margin: 4px 8px 4px 6px }
    #menu h1 {text-decoration:none ; font-size:12px ; padding-top:12px ;
    background-image: url(objetos/menu-parte-superior.gif) }
    #pie {border-left: black 1px solid ; border-right: black 1px solid ;
    border-top: black 1px solid ; height: 65px }
    #pie li {list-style: none ; font-size: 12px }
    #pieuno {float:left ; width:150px }
    #piedos {float:left ; width:498px }
    #pietres {float:left ; width:150px }
    #curva-inferior { background-image: url(objetos/curva-inferior.gif) ;
    background-repeat: no-repeat ;
    width: 800px ;
    height:12px ;
    overflow: hidden }
    a {color: brown ; text-decoration:none ; display: block }
    a:link {}
    a:visited {}
    a:hover {color:red ; text-decoration:underline ; background-color: silver}
    a: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}
    #logotipo a {}
    #logotipo a:link {}
    #logotipo a:visited {}
    #logotipo a:hover {background-color: white }
    #logotipo a:active {}

    Este es mi dominio: http://planetapando.mywebcommunity.org/plantilla.html Mirarlo con internet exlorer si lo quereis ver bien

    Tambien si mirais el menu de la web os dareis cuenta de que el menu esta MAL!!!!! Se ve como raro alguien me puede ayudar a colocar las dos cosas bien?¿

    Muchas gracias desde ya y Un saludo muy grande a todos ;)
  • En el ópera se ve peor aún, y eso se debe a que tienes dos head, tienes el siguiente código:
    <head>
    <title>Page title</title>
    <link rel="stylesheet" href="estilo-general.css"          type="text/css" media="all">
    <link rel="stylesheet" href="estilo-menu-desplegable.css" type="text/css" media="all">
    </head>
    <head>
    <title>Page title</title>
    <link rel="stylesheet" href="estilo-general.css"          type="text/css" media="all">
    <link rel="stylesheet" href="estilo-menu-desplegable.css" type="text/css" media="all">
    <script language="javascript" src="no-tocar.txt"          type="text/javascript"></script>
    <script language="javascript" src="numero-de-menus.txt"   type="text/javascript"></script>
    </head>
    Y lo correcto sería:
    <head>
    <title>Page title</title>
    <link rel="stylesheet" href="estilo-general.css"          type="text/css" media="all">
    <link rel="stylesheet" href="estilo-menu-desplegable.css" type="text/css" media="all">
    <script language="javascript" src="no-tocar.txt"          type="text/javascript"></script>
    <script language="javascript" src="numero-de-menus.txt"   type="text/javascript"></script>
    </head>
    Saludos :wink:
    hola gente , al igual que nuestro amigo xenon yo tambien tengo problemas con el firefox y ni que decir del opera.

    acontinuacion les dejo el codigo de mi pagina

    la plantilla general


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

    <html>
    <head>
    <title>general</title>
    <link rel="stylesheet" href="estilos-general.css" type="text/css" media="all">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    <body>

    <font face="Arial, Helvetica, sans-serif">
    <div id="global">
    <div id="cabecera">
    <div id="logotipo">[contenido no disponible]</div>
    <div id="navegacion">
    <div id="imagenuno"></div>
    <div id="imagendos"></div>
    <div id="imagentres"></div>
    <ul>
  • <a href="definicion.html">Definición</a>
  • <a href="historia.html">Historia</a>

  • <a href="filosofia.html">filosofia</a>
  • <a href="estilos.html">Estilos</a>
  • <a href="pommsae.html">Pommsae
    </a>
  • <a href="competencia.html">Competencia</a></div>
    <div id="contenido">
    <div id="menu"><font face="Pigae"><h1>HWARANGDO</h1></font>
    <ul>
  • <a href="mision.html">Misión</a>
  • <a href="vision.html">Visión</a>

  • <a href="servicios.html">Servicios</a><a href="noticias.html">Noticias</a>
  • <a href="actividades.html">Actividades</a></div>
    <h1>Esta será la zona principal de la web</h1>


    bueno esta sigue siendo una pagina de prueba, me esta sacando un poco de canas porque
    me estoy dando cuenta que la resolucion de la pantalla afecta el funcionamiento.</p>


    simple mente un bosquejo para que le den un visto bueno y muchas sugerencias.</p>
    </div>
    <div id="pie">
    <div id="pieuno">
    <ul>
  • <a class="enlaceuno" href="http://www.wtf.org/">[contenido no disponible]</img>
  • <a class="enlaceuno" href="http://tkdcolombia.webcindario.com/">[contenido no disponible]</img>
    </div>
    <div id="piedos">
    <ul>
  • <a class="enlaceuno" href="mailto:[correo eliminado]">[contenido no disponible]
    </a>
    </div>
    <div id="pietres">pie 3</div>
    </div>
    <div id="direccion">Calle 72A No. 71 - 36, Telefono: (057 1) 223 1779 - (057 1) 224 3026, Cel: (057) 315 851 6958</div>

    </div>
    </font>

    </body>
    </html>

    y la de estilos

    * {text-indent:0px ; margin:0px ; padding:0px ; border: 0px ; font:arial}
    p {text-align: justify ; font.size: 0.9em ;}
    body {background-color: #FFF5EE ; background-image: url(objetos/fondo.gif) ; background-repeat: no-repeat
    ; background-position:top center ; height:100% ; text-align:center ; margin-top: 100px}
    h1 {font-size: 1.3em; color:black ; font-weight: bold ; text-align: center; padding: 15px 0px 10px 0px}
    h2 {font.size: 1.1em; color:black ; font-weight: bold ; text-decoration: none ; text-align: center ; padding: 2px 0px 15px 0px}
    h3 {font.size: 1.1em; color:black ; font-weight: bold ; text-decoration: none ; text-align: left ; padding: 10px 10px 10px 10px}
    h4 {font.size: 0.8em; color:black ; text-decoration: none ; text-align: left ; padding: 0px 0px 0px 10px}
    h5 {font.size: 0.8em; color:black ; text-decoration: none ; text-align: right ; padding: 0px 10px 0px 10px}
    #global {width:800px ; margin: 4px auto}
    #cabecera {background-color: white ; border-left: 1px solid black}
    #navegacion {background-image: url(objetos/imagen-navegacion.gif) ; width=798px ; height=100px
    ; border-right: 1px solid black ; border-top: 1px solid black ; width:800px ; height:25px}
    #imagenuno {background-image: url(objetos/bandera-colombia.gif) ; float:left ; width:75px ; height:43px ; background-repeat: no-repeat ; margin: 5px 0px 0px 30px}
    #imagendos {background-image: url(objetos/corea.gif) ; float:right ; width:75px ; height:43px ; background-repeat: no-repeat ; margin: 5px 26px 0px 0px}
    #imagentres {background-image: url(objetos/imagen-taekwondo.gif) ; float:center ; width:200px ; height:43px ; background-repeat: no-repeat ; margin: 5px 0px 0px 0px}
    #navegacion li {background-image: url(objetos/borde-superior.gif); width:115px ; font-size:12px ;
    list-style:none ; float:left ; margin: 30px 0px 0px 0px}
    #navegacion ul { margin-left: 50px }
    #contenido {background-image: url(objetos/imagen-kumgam.gif) ; float:left ; height:100% ; background-repeat: repeat; width:800px ; float: left ;
    border-right: 1px solid black ; padding-bottom:20px}
    #contenido p {padding: 5px 10px 5px 10px}
    #menu {background-color:white ; width: 150px ; float:left ;
    text-align:left ; margin: 15px 15px 3px 15px ;
    background-image: url(objetos/borde-inferior-menu.gif) ; background-position: bottom ; padding-bottom:5px}
    #menu li { list-style:none ; margin: 4px 8px 4px 6px ; font-size:12px ; text-indent: 0px}
    #menu h1 {text-decoration:none ; font-size:12px ;
    background-image: url(objetos/borde-superior-menu.gif) ; width: 150px }
    #pie {background-image: url(objetos/imagen-fondo-pie.gif) ; width=798px ; height=100px ;border-top: 1px solid black
    ; border-right: 1px solid black ; border-bottom:1px solid black ; width: 800px ; height: 25px ; text-align: center}
    #pieuno {float:left ; width:149px}
    #piedos {float:left ; width:498px ; font-size:12px}
    #pietres {float:left; width:149px}
    #pie li {list-style:none ; font-size:12px}
    #direccion {float:center ; font-size:9px ; background-color: no ; width:800px ; margin-bottom: 100px
    ; border-right: 1px solid black ; border-bottom: 1px solid blak}
    a {color: #363636 ; font-size:1.3em ; text-decoration: none ; display: block}
    a:link {}
    a:visited {}
    a:hover {color: blue ; text-decoration: none}
    a:active {}
    #pie a.enlaceuno {color: blue; text-decoration:none ; display: block }
    #pie a.enlaceuno:link {}
    #pie a.enlaceuno:visited {}
    #pie a.enlaceuno:hover {color:black ; text-decoration:none}
    #pie a.enlaceuno:active {color:black}
    #navegacion li a {color: #363636 ; font-size:1.3em ; text-decoration: none ; display: block}
    #navegacion li a:link {}
    #navegacion li a:visited {}
    #navegacion li a:hover {color: red}
    #navegacion li a:active {background-image: url(objetos/borde-menu-activo.gif)}
  • [imagen no disponible]
    Hola

    empezamos
    aqui tienes un error (en rojo lo que te falta) (checa las medias en azul)

    [contenido no disponible]</img></div>

    te sobran cierres de </a> solo debes tener uno (checa todos tus enlaces)

    <a href="definicion.html">Definición</a>
  • <a href="historia.html">Historia</a>

    aqui te falta cerrarlo

    [contenido no disponible]</img>
    </div>

    y aqui tambien
  • <a class="enlaceuno" href="http://www.wtf.org/">[contenido no disponible]</img>

    a hay muchos mas sigo checando
  • esto no tiene qu estar aqui

    <body>

    <font face="Arial, Helvetica, sans-serif">
    <div id="global">

    y aqui........ creo que tambien sobra (checa los 5 enlaces)

  • <a href="definicion.html">Definició

    en los enlaces del menu pasa lo mismo y te falta cerrar un li y un ul y el div menu

    pero... aun faltan errores por sacar

    corrije toodo eso y nos vuelves a pasar los codigos o bien subelo para verlo arriba

    saludos
  • muchas gracias yaneth, estoy corrigiendo los cambios que me dijiste , vaya si son bastantes lo unico es que hasta el fin de semana no puedo subirlos a la red,

    a proposito la linea que me dices que no deberia estar hay

    <font face="Arial, Helvetica, sans-serif">

    fue la unica forma que consegui para cambiar el tipo de letra de la pagina,
    de que otra forma lo puedo hacer??

    y de nuevo muchisimas gracias
    [imagen no disponible]
    ok voy a probar
    de nuevo muchas gracias
    olle pero aun no logra que se vea bien en el mozilla, mejor dicho en el unico que se ve bien es en el explorer
    [imagen no disponible]
    es que son muuuchos los fallos

    corrije todo lo que te he dicho, y cuando lo subas

    me avisas, para seguir checando

    :wink: :wink:
    listo yaneth, ya realize los cambios pero sin embargo sigo igual el mismo problema en los demas navegadores
    [imagen no disponible]
    Perdona jugoncan pero e echo lo que tu me has dicho y nada de nada.......Se ve igual de mal que antes agradeceria mucho la ayuda de los demas usuarios.

    PD: Cuando paso a la leccion 5º de Curso paso a paso no me lleva porque pasa esto?¿
    Ok, no te desesperes, el html, y aquedó bien

    el fallo lo tienes en el css, elimina lo que te pusé en rojo, y agrega lo que te puse en azul

    * {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}
    h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ;
    text-align: center}
    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 ;}
    * {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}
    h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ;
    text-align: center}
    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 ; border-left: black 1px solid ;
    border-right: black 1px solid ; height:85px}
    #logotipo {width:280px ; float:left }
    #publicidad {width:518px ; float:right ; margin-top:25px ; font-size: 16px }
    #navegacion {background-color: gray ; border: black 1px solid ; height:20px}
    #navegacion li {float:left ; list-style:none ; margin: 0px 20px 0px 20px }
    #navegacion ul { margin-left: 180px }
    #contenido {background-color: orange ; border-left: black 1px solid ;
    border-right: black 1px solid }
    #contenido p {margin: 5px 10px 0px 10px ; text-indent: 15px}
    #menu {background-color: lorange ; width: 150px ; float:left ;
    text-align:left ; margin: 3px 10px 3px 3px ;
    background-image: url(objetos/menu-parte-inferior.gif);
    background-position: bottom ;
    padding-bottom:5px }
    #menu li {list-style:none ; margin: 4px 8px 4px 6px }
    #menu h1 {text-decoration:none ; font-size:12px ; padding-top:12px ;
    background-image: url(objetos/menu-parte-superior.gif) }
    #pie {border-left: black 1px solid ; border-right: black 1px solid ;
    border-top: black 1px solid ; height: 65px }
    #pie li {list-style: none ; font-size: 12px }
    #pieuno {float:left ; width:150px }
    #piedos {float:left ; width:498px }
    #pietres {float:left ; width:150px }
    #curva-inferior { background-image: url(objetos/curva-inferior.gif) ;
    background-repeat: no-repeat ;
    width: 800px ;
    height:12px ;
    overflow: hidden }
    a {color: brown ; text-decoration:none ; display: block }
    a:link {}
    a:visited {}
    a:hover {color:red ; text-decoration:underline ; background-color: silver}
    a: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}
    #logotipo a {}
    #logotipo a:link {}
    #logotipo a:visited {}
    #logotipo a:hover {background-color: white }
    #logotipo a:active {}



    checalo y me avisas de nuevo

    saludos
    Yaneth ya lo hice y nada, perdona que no te haya contestado antes

    He echo todo lo que me has dicho y nada, aun asi agradezco mucho tu interes y tu ayuda.

    Yo lo he vuelto a mirar y no encuentro nada raro........

    PD: Cuando paso a la leccion 5 no me carga, a que se debe esto?¿
    Nadie ayuda :lol:

    Por favor ayudarme :roll: Vosotros que sabeis de esto, necesito vuestra ayuda.
    Hola

    pues veo que ya lo arreglaste, al menos ya no se ve taaaaaaan mal jeje

    solo queda una cosa, el fondo del menu, que se está repitiendo

    intenta ver si lo puedes ajustar
    y si no..... pues te seguimos ayudando

    saludos
    no, no lo se arreglar.....Plis ayudarme!!!!Vosotros si que sabeis, yo es la primera web que creo y en mi vida habia conocido el HTML......

    Un Saludo

    PD: Cuando paso a la quinta leccion no me carga......por que pasa esto?¿
    Hola

    al ver las pripiedades de tu imagen
    veo que mide 122px de ancho

    y el div menu mide 150px de ancho

    tendrás que ajustarlo a la medida de la imagen para que no se repita

    #menu {background-color: lorange ; width: 150px ; float:left ;
    text-align:left ; margin: 3px 10px 3px 3px ;
    background-image: url(objetos/menu-parte-inferior.gif);
    background-position: bottom ;
    padding-bottom:5px }



    pd, no entiendo porke mida eso ya que la imagen que yo bajé mide 150 de ancho


    checa tambien esto creo que tienes un error en el nombre de la imagen, ya que la mia se llama "menu-curva-superior.gif"

    #menu h1 {text-decoration:none ; font-size:12px ; padding-top:12px ;
    background-image: url(objetos/menu-parte-superior.gif) }

    saludo
    Y entonces que tengo que hacer?¿?¿ Borrar lo que tu me has puesto en rojo o modificarlo?¿?¿?¿????? Esque no entiendo, si lo borro lo mas seguro esque se me quede mal.......Por lo que no toco nada...... :cry:

    PD: Perdona mi tardanza al contestar y muchas gracias
    Tranquilo

    y mira que te estoy dando tooodas las pistas

    tu imagen mide 122px de ancho ok???
    el hueco donde la metes mide 150px de ancho
    por eso la imagen se repite, para ocupar tooodo el hueco

    me explico??????

    que puedes hacer?????

    tienes varias opciones

    o haces la imagen mas grande (150px de ancho)

    o haces el hueco (menu) mas chico (122px de ancho)

    tu decides

    saludos
    mmmmm.........Como es la palabra?¿?¿ CRACK!!!!!!!

    Eres el/la mejor!!!!!!

    Muchas gracias por tu ayuda la verdad ahora se ve muyy bien.

    Lo unico que le falta es el menu.....Que se ve bastante mal.....Me podrias ayudar a colocarlo como el de CCTW?¿

    UN Saludo y Muchisimas gracias ;)
    Si, es evidente que es la mejor, pero aun no me habeis dicho que hago para que se me vea bien el menu........snif!!!

    Un Saludo
    :wink: :wink: :wink:

    Hola de nuevo, veo que vamos avanzando verdad??

    bueno... pues solo nos falta que se vea la curva superior del menu vdd??

    oks

    en el css veo esto:

    background-image: url(objetos/menu-parte-superior.gif) }

    Peeeeero, creo que la imagen se llama "menu-curva-superior.gif"

    checa bien como es que se llama la imagen ok??

    saludos
    No, yaneth si pongo eso no e sale el menu....por lo que ese no es...Y sino compruebalo tu misma en la web, podras ver que a empeorado.....

    Un Saludo
    Pues la unica solucion para mi seria que hagas todo de nuevo y vallas probando con el firefox conforme avanzas con tu web y asi te daras mas rapido donde esta el error .