problemas al abrir la página con mozilla

Hola, es la primera vez que escribo, tengo casi lista la página principal de mi web y la abro siempre con explorer y no hay fallos. Al cambiar y abrirla con mozilla, por probar, he visto que hay muchos fallos que no entiendo, por regla general me estropea los anchos y largos de cada una de las partes de forma que no coinciden y hay como restos de una parte que se ve con un color que no corresponde...., por otra parte los bordes no pone ni uno sólo. Muchas gracias
danielpiazzolla escribió:Hola, es la primera vez que escribo, tengo casi lista la página principal de mi web y la abro siempre con explorer y no hay fallos. Al cambiar y abrirla con mozilla, por probar, he visto que hay muchos fallos que no entiendo, por regla general me estropea los anchos y largos de cada una de las partes de forma que no coinciden y hay como restos de una parte que se ve con un color que no corresponde...., por otra parte los bordes no pone ni uno sólo. Muchas gracias
Hola:
Es un problema, (por llamarlo de alguna manera) muy común. Se debe a que un explorador ve las cosas de una manera y otro las ve de otra manera.
Para Firefox y otros, una capa que mide 800 píxeles de ancho y tiene bordes de un píxel a la derecha y a la izquierda, la parte usable será de 798 píxeles, o sea si usted quiere meter dentro de esa capa otra capa pero esta sin bordes, esta deberá medir de ancho 798 píxeles, lo mismo sucede con los margin padding etc. Pero si usted quiere meter una capa de 800 píxeles dentro de esa capa que también mide 800 píxeles, entonces a la capa que tiene bordes, deberá añadirle dos píxeles de ancho, o sea 802 píxeles
En Internet Explorer esa capa de 800 píxeles, será usable los 800 píxeles, por tanto si usted dentro de esa capa pone otra que mida 800 píxeles de ancho, a la vista seguirá siendo de 800 píxeles.
Resumiendo:
Si usted tiene un terreno que mide de ancho 800 metros y que tiene muros a la izquierda y a la derecha de un metro de ancho cada uno, y desea ocupar el terreno para plantar tomates, solo podrá ocupar 798 metros. Eso según el Consorcio que sugiere los standares.
Sin embargo Internet Explorer, desde hace mucho ha tenido (por decirlo así), un standar propio, que es el de incluir los bordes, margenes, rellenos etc. en el ancho total. Aunque ahora , Internet Explorer se va adecuándo poco a poco a los standares sugeridos por el Consorcio
Para Internet Explorer ese terreno en el que va a plantar tomates, puede ocupar los 800 metros, como si los planta arriba de los muros.
Por eso es bueno al ir diseñando la página ir viendo con uno y con otro explorador, el como va quedándo la página, y ya que Internet Explorer "arregla" un poco las medidas, sería bueno hacer la página con Firefox e ir viendo también como va quedándo en Internet Explorer.
Si gusta ponga sus códigos acá
Saludos
Agradecido de los que aprenden enseñando
Gracias por lo que me dices, la verdad que lo he liado un poco, pero el fallo no se donde está, pq cuando hago lo que dices y adecúo el ancho de la barra navegación y la de contenidos (teniendo en cuenta el borde) una sale desplazada con respecto a otra en el explorer, sin embargo el pie de página sí lo tengo adecuado y no me da problemas. Si quieres echar un vistazo a lo que tengo, te doy las gracias de antemano, el problema tiene que estar por aquí:

#cabecera {background-color: white ; margin: 10px 0px ; padding: 20px 0px; height:84px}
#logotipo {width:260px; float:left ; height= 82px}
#publicidad {width:534px; float:right; margin-top:0px ; height:82px ; background-color: white}
#navegacion {background-color: brown ; padding:10px 0px ; border: black 2px solid ; width: 800px ; height:40px}
#navegacion li {float:left ; list-style:none ; margin: 0px 45px 0px 45px }
#navegacion ul { margin-left: 45px }
#menu {background-color: none ; height:320px ; width: 150px ; float:left ; text-align:left ; margin: 15px 10px 10px 5px ; padding-top:12px; padding-bottom:5px}
#menu li {list-style:none ; margin: 8px 8px 8px 6px}
a {color: black; text-decoration: none ; display: block}
#contenido {background-image: url(OBJETOS/sala80.GIF) ; background-repeat: no-repeat ; background-position: right; width: 800px ;
float:left ; border: black 1px 2px 2px 2px solid ; padding: 3px 20px 3px 20px}p {text-align: left} p { text-indent: 15px ; margin: 10px}
Vale, perdona, a ver si con esto puedes entenderlo:
Te he mandao casi to lo que tengo. Gracias
<div id="cabecera"><div id="logotipo">[contenido no disponible]</div>
<div id="publicidad"> </div>
<div id="navegacion"><ul>
  • Inicio
  • Agrupaciones
  • Tipo de acto</a
  • <a id="desplegable2" href="#">Repertorio</div>
    <div id="contenido">
    <div id="menu">
    <ul>
  • [contenido no disponible]
  • [contenido no disponible]
  • [contenido no disponible]
  • Publicidad</div>


    <h1>Bienvenidos a musicaconcierto.com</h1></p>


    Esta página trata de facilitar el contacto entre la música y las personas que están interesadas en escucharla en directo.</p>


    Ofrecemos diversas agrupaciones a precios asequibles para la interpretación de música en los distintos actos que se puedan
    presentar, ya sean: <h2>Boda religiosa, boda civil, cena de enamorados, copa de espera, recital a la carta de piezas musicales de distintas épocas
    o estilos, concierto de tangos, concierto reglado de música clásica, concierto-velada para fiestas o eventos de particulares...</h2></p>


    Para ello contamos con una amplia experiencia y un importante repertorio de obras. Nos encontramos en:
    <h2>Jaén, Córdoba, Sevilla, Granada, Almería, Málaga y Salamanca
    y podemos abarcar conciertos a lo largo de la
    geografía española </h2></p>

    No dude en consultarnos por correo electrónico o por teléfono.</p></div>
    <div id="pie"><div id="pieuno">pie 1 publicidad</div><div id="piedos">pie 2</div><div id="pietres">pie 3 publicidad</div></div>
  • Perdona pero no se poner mi web aquí????
    He pensao por no molestar poner sólo donde parece que tengo el problema, pero si quieres lo pongo todo de html y css y alomejor lo puedes conseguir entender antes, dime y lo pongo en 1 segundo
    danielpiazzolla escribió:Perdona pero no se poner mi web aquí????
    He pensao por no molestar poner sólo donde parece que tengo el problema, pero si quieres lo pongo todo de html y css y alomejor lo puedes conseguir entender antes, dime y lo pongo en 1 segundo
    Hola:
    En realidad la explicación anterior, era para que entendiese un poco la diferencia de como ven los navegadores las cosas, pero para ir arreglando el problema sería conveniente que pusiera todos los códigos tanto de su hoja de estilo, como los de su página ya que a veces el problema que pueda tener arriba, puede haberse generado abajo.
    Y para poner su web solo debe escribir acá su dirección completa, por ejemplo http://mipagina.onlineweb.net
    Saludos
    Agradecido de los que aprenden enseñando
    Vale, lo copio todo, la web no la tengo todavía subida así que va a ser difícil que os hagais una idea, sorry. Vale aquí os pongo esto, gracias de nuevo.

    html:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title>musicaconcierto.com</title>
    <link rel="stylesheet" href="estilos.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="cabecera"><div id="logotipo">[contenido no disponible]</div>
    <div id="publicidad"> </div>
    <div id="navegacion"><ul>
  • Inicio
  • Agrupaciones
  • Tipo de acto</a
  • <a id="desplegable2" href="#">Repertorio</div>
    <div id="contenido">
    <div id="menu">
    <ul>
  • [contenido no disponible]
  • [contenido no disponible]
  • [contenido no disponible]
  • Publicidad</div>


    <h1>Bienvenidos a musicaconcierto.com</h1></p>


    Esta página trata de facilitar el contacto entre la música y las personas que están interesadas en escucharla en directo.</p>


    Ofrecemos diversas agrupaciones a precios asequibles para la interpretación de música en los distintos actos que se puedan
    presentar, ya sean: <h2>Boda religiosa, boda civil, cena de enamorados, copa de espera, recital a la carta de piezas musicales de distintas épocas
    o estilos, concierto de tangos, concierto reglado de música clásica, concierto-velada para fiestas o eventos de particulares...</h2></p>


    Para ello contamos con una amplia experiencia y un importante repertorio de obras. Nos encontramos en:
    <h2>Jaén, Córdoba, Sevilla, Granada, Almería, Málaga y Salamanca
    y podemos abarcar conciertos a lo largo de la
    geografía española </h2></p>

    No dude en consultarnos por correo electrónico o por teléfono.</p></div>
    <div id="pie"><div id="pieuno">pie 1 publicidad</div><div id="piedos">pie 2</div><div id="pietres">pie 3 publicidad</div></div>
    <script language="javascript" src="definir-menus.txt" type="text/javascript"></script>
    </body>
    </html>


    css:


    * {margin:0px ; padding:0px ; border: 0px}
    img {border-style: none}
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> (para los acentos)
    {text-align:left}
    body {text-align: center}
    #global {width:800px ; margin: 4px auto }
    #cabecera {background-color: white ; margin: 10px 0px ; padding: 20px 0px; height:84px}
    #logotipo {width:260px; float:left ; height= 82px}
    #publicidad {width:534px; float:right; margin-top:0px ; height:82px ; background-color: white}
    #navegacion {background-color: brown ; padding:10px 0px ; border: black 2px solid ; width: 800px ; height:40px}
    #navegacion li {float:left ; list-style:none ; margin: 0px 45px 0px 45px }
    #navegacion ul { margin-left: 45px }
    #menu {background-color: none ; height:320px ; width: 150px ; float:left ; text-align:left ; margin: 15px 10px 10px 5px ; padding-top:12px; padding-bottom:5px}
    #menu li {list-style:none ; margin: 8px 8px 8px 6px}
    a {color: black; text-decoration: none ; display: block}
    #contenido {background-image: url(OBJETOS/sala80.GIF) ; background-repeat: no-repeat ; background-position: right; width: 800px ;
    float:left ; border: black 1px 2px 2px 2px solid ; padding: 3px 20px 3px 20px}p {text-align: left} p { text-indent: 15px ; margin: 10px}
    h1 {font-size: 1.2em; color:black ; font-weight: bold ; text-decoration: underline ; text-align: center}
    h2 {font-size: 1.0em; color:black; font-weight: bold ; text-decoration: none ; text-align: center}
    a:link {}
    a:visited {}
    a:hover {color:black ; text-decoration:underline ; background-color: none}
    a:active {}
    #pie {background-color: brown ; height:40px ; border: black 0px 2px 2px 2px solid}
    #pieuno {background-color:silver ; float:left ; list-style:none ; width: 148px ; height:40px}
    #piedos {background-color:brown ; float:left ; list-style:none ; width: 500px ; height:40px}
    #pietres{background-color:silver ; float:left ; list-style:none ; width: 148px ; height:40px}
  • Hola, yo también tengo problemas con mozila, me lo podeis mirar. Muchas gracias. Ademas el logo no se ve ni en el explorer ni en el mozila pero estoy investigando a ver si encuentro el fallo y si no ya lo preguntare en la seccion correspondiente.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>XAVIER GIL PIQUÉ</title>
    <link rel="stylesheet" href="estilos-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="cabecera">
    <div id="logotipo"><a href="index.html">
    [contenido no disponible]
    </a>
    </div>
    <div id="publicidad">ARQUITECTE XAVIER GIL</div>
    </div>
    <div id="navegacion"><ul>
  • PRESENTACIÓ
  • PROJECTES
  • CONCURSOS
  • NOTICIES
  • EQUIP
  • CONTACTA
  • LINKS

    </div>
    <div id="contenido">
    <h1>PRESENTACIÓ</h1>


    Arquitecte Xavier Gil és una empresa de nova creació, dedicada a l'elaboració, gestió i desenvolupament de projectes i de disseny d'interiors.</p>


    Està formada per l'arquitecte Xavier Gil Piqué i diversos col·laboradors de Lleida de l'àmbit de l'arquitectura, que treballen conjuntament en el desenvolupament de les idees i projectes.</p>


    </p>


    </p>


    "La inspiració és la sensació de començament al llindar on se troben el silenci i la llum" (Louis Kahn)</p>
    </div>
    <div id="pie">
    <div id="pieuno"><ul>
  • Informació coorporativa
    </div>
    <div id="piedos"> </div>
    <div id="pietres"><ul>
  • Vols treballar amb nosaltres?
    </div>
    </div>
    </div>
    <script language="javascript" src="definir-menus.txt" type="text/javascript"></script>
    </body>
    </html>




    Estilos:
    * {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; padding: 20px 20px 20px 20px}
    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 }
    #cabecera {background-color: white; color:orange; font-weight: bold ; font-size: 24px ; height:85px ; padding: 20px 20px 20px 20px}
    #logotipo {background-color: white; width:300px; float:left}
    #publicidad {background-color: white; width:418px ; float:right; margin-top:65px}
    #navegacion {background-color: orange ; border: black 1px solid ; height:30px}
    #navegacion li {float:left; list-style:none; margin: 5px 10px 5px 10px}
    #navegacion ul { margin-left: 40px }
    #contenido {background-color: white; height:500px; width:400px }
    #pie {background-color: orange; border: black 1px solid ; height: 50px}
    #pieuno {background-color: orange ; float:left; width:150px}
    #piedos {background-color: orange ; float:left; width:498px}
    #pietres {background-color: orange ; float:left; width:150px}
    #pie li {list-style: none ; font-size: 16px ; margin: 5px 15px 5px 15px}
    #menu {background-color: yellow ; width: 150px ; float:left ; text-align:left ; margin:3px 10px 3px 3px}
    #menu li { list-style:none ; margin: 4px 0px 4px 10px}
    a {color: #EEE8AA; font-size:1.05em ; font-weight:bold; text-decoration: none; display: block }
    a:hover {color:black ; text-decoration:underline ; background-color: #EEE8AA}
    #contenido p {padding: 5px 20px 5px 20px; text-indent: 20px; font-size:1.00em; font-family: Arial,Verdana,Helvetica,sans-serif}
    #pie a {color: black; text-decoration:none ; display: block }
    #pie a:link {}
    #pie a:visited {}
    #pie a:hover {color:blue ; text-decoration:underline ; background-color: orange }
    #pie a:active {color:blue}
    #logotipo a {}
    #logotipo a:link {}
    #logotipo a:visited {}
    #logotipo a:hover {background-color: white }
    #logotipo a:active {}
  • Agnes escribió:Hola, yo también tengo problemas con mozila, me lo podeis mirar. Muchas gracias. Ademas el logo no se ve ni en el explorer ni en el mozila pero estoy investigando a ver si encuentro el fallo y si no ya lo preguntare en la seccion correspondiente.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>XAVIER GIL PIQUÉ</title>
    <link rel="stylesheet" href="estilos-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="cabecera">
    <div id="logotipo"><a href="index.html">
    [contenido no disponible]
    </a>
    </div>
    <div id="publicidad">ARQUITECTE XAVIER GIL</div>
    </div>
    <div id="navegacion"><ul>
  • PRESENTACIÓ
  • PROJECTES
  • CONCURSOS
  • NOTICIES
  • EQUIP
  • CONTACTA
  • LINKS

    </div>
    <div id="contenido">
    <h1>PRESENTACIÓ</h1>


    Arquitecte Xavier Gil és una empresa de nova creació, dedicada a l'elaboració, gestió i desenvolupament de projectes i de disseny d'interiors.</p>


    Està formada per l'arquitecte Xavier Gil Piqué i diversos col·laboradors de Lleida de l'àmbit de l'arquitectura, que treballen conjuntament en el desenvolupament de les idees i projectes.</p>


    </p>


    </p>


    "La inspiració és la sensació de començament al llindar on se troben el silenci i la llum" (Louis Kahn)</p>
    </div>
    <div id="pie">
    <div id="pieuno"><ul>
  • Informació coorporativa
    </div>
    <div id="piedos"> </div>
    <div id="pietres"><ul>
  • Vols treballar amb nosaltres?
    </div>
    </div>
    </div>
    <script language="javascript" src="definir-menus.txt" type="text/javascript"></script>
    </body>
    </html>




    Estilos:
    * {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; padding: 20px 20px 20px 20px}
    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 }
    #cabecera {background-color: white; color:orange; font-weight: bold ; font-size: 24px ; height:85px ; padding: 20px 20px 20px 20px}
    #logotipo {background-color: white; width:300px; float:left}
    #publicidad {background-color: white; width:418px ; float:right; margin-top:65px}
    #navegacion {background-color: orange ; border: black 1px solid ; height:30px}
    #navegacion li {float:left; list-style:none; margin: 5px 10px 5px 10px}
    #navegacion ul { margin-left: 40px }
    #contenido {background-color: white; height:500px; width:400px }
    #pie {background-color: orange; border: black 1px solid ; height: 50px}
    #pieuno {background-color: orange ; float:left; width:150px}
    #piedos {background-color: orange ; float:left; width:498px}
    #pietres {background-color: orange ; float:left; width:150px}
    #pie li {list-style: none ; font-size: 16px ; margin: 5px 15px 5px 15px}
    #menu {background-color: yellow ; width: 150px ; float:left ; text-align:left ; margin:3px 10px 3px 3px}
    #menu li { list-style:none ; margin: 4px 0px 4px 10px}
    a {color: #EEE8AA; font-size:1.05em ; font-weight:bold; text-decoration: none; display: block }
    a:hover {color:black ; text-decoration:underline ; background-color: #EEE8AA}
    #contenido p {padding: 5px 20px 5px 20px; text-indent: 20px; font-size:1.00em; font-family: Arial,Verdana,Helvetica,sans-serif}
    #pie a {color: black; text-decoration:none ; display: block }
    #pie a:link {}
    #pie a:visited {}
    #pie a:hover {color:blue ; text-decoration:underline ; background-color: orange }
    #pie a:active {color:blue}
    #logotipo a {}
    #logotipo a:link {}
    #logotipo a:visited {}
    #logotipo a:hover {background-color: white }
    #logotipo a:active {}
  • Hola:
    Lamento no haber podido ver sus códigos detenidamente, no se si ha solucionado ya el problema, pero a vista rápida me doy cuenta de que su logotipo tiene de altura 150 píxeles y se supone que va dentro de la capa cabecera, pero la capa cabecera parece ser que usted solo le ha puesto una altura de 85 píxeles, si usted desea que su logotipo sea de esa altura lo que le sugiero es que a la capa cabecera (en su hoja de estilo) le ponga un height de 150 pixeles para que sea de la misma altura que su logotipo.
    Trataré de ver mejor sus códigos para que puedan compatibilizar con los navegadores.
    Saludos