La página se ve diferente entre Firefox y Explorer

Subidos los archivos a internet, hay diferencias entre navegadores. ¿Por qué en Explorer la parte superior se ve correctamente, sin espacio entre el borde redondeado superior y la cabecera, mientras que con Firefox sí que aparece esta separación? Dias atrás pasaba exactamente al revés: se veia bien en Firefox y mal en Explorer...
¿Podríais ayudarme?
Gracias por adelantado y, sobre todo, por vuestra paciencia

La página es: http://www.somnis.ppcc.cat

La página de estilos es la siguiente:

* {text-indent: 0px ; margin:0px ; padding:0px ; border: 0px}
p {text-align:justify }
h1 {font-size: 1.1em ; color:blue ; font-weight: bold ; text-decoration: none ; text-align: center }
h2 {font-size: 1.1em ; color:blue ; font-weight: bold ; text-decoration: none ; text-align: center}
body {text-align: center}
body {background-color:#EEAEEE}
#global {width:1000px ; margin: 4px auto }
#curva-superior { background-image: url(objectes/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:110px }
#logotipo { width: 150px ; float:left ; margin-top: 5px ; margin-left: 40px }
#benvinguda { width:550px ; float:center ; margin-top: 25px ; font-size: 20px}
#publicitat { width:100px ; float:right ; margin-top: 0px ; font-size: 10px}
#publicitat1 { width:100px ; float:right ; margin-top: 18px ; font-size: 10px}
#mapamundi { width: 135px ; float: left ; margin-top: 2px ; margin-left: 2px ; }
#navegacion {background-color: #9c9c9c ; border: black 1px solid ; height:20px }
#navegacion li { float:left ; list-style:none ; margin: 0px 20px 0px 50px }
#navegacion ul { margin-left: 15px }
#contenido {background-color: #ffd700 ; text-align:left ; border-left: black 1px solid ; border-top: black 1px solid ; border-right: black 1px solid }
#contenido p {margin: 5px 10px 0px 10px ; text-indent: 15px }
#menu { width: 150px ; float:left ; text-align:left ; margin: 3px 10px 3px 3px ; background-image: url(objectes/menu-parte-inferior.gif) ; background-position: bottom ; padding-bottom: 5px }
#menu li {list-style:none ; margin: 4px 8px 4px 8px}
#menu h1 { text-decoration:none ; font-size: 12px ; padding-top:12px ; background-image: url(objectes/menu-parte-superior.gif) }
#pie { border-left: black 1px solid ; border-right: 1px solid ; border-top: black 1px solid ; height: 100px ; }
#pie li {list-style: none ; font-size: 12px }
#pieuno { float:left ; width: 150px }
#piedos { float: center ; width: 498px }
#pietres {float: left ; width: 150px }
#curva-inferior { background-image: url(objectes/curva-inferior.gif) ; background-repeat: no-repeat ; width:798x ; height: 15px ; overflow : hidden }

a:link {}
a:visited {}
a:hover {color:red ; text-decoration:underline ; background-color: silver}
a:active {}
a {color: blue ; font-size:1.3em ; text-decoration: none }
#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: yellow }
#pie a: active {color: black }
#logotipo a {}
#logotipo a: link {}
#logotipo a: visited {}
#logotipo a: hover {background-color: white }
#logotipe a: active {}

jaume escribió:Subidos los archivos a internet, hay diferencias entre navegadores. ¿Por qué en Explorer la parte superior se ve correctamente, sin espacio entre el borde redondeado superior y la cabecera, mientras que con Firefox sí que aparece esta separación? Dias atrás pasaba exactamente al revés: se veia bien en Firefox y mal en Explorer...

Como soy gallego tengo el privilegio de responderte con otra pregunta ji ji :)

Sería genial que me pudieras pasar el código css y html de cuando se veía bien en firefox y mal en internet explorer. Al fin y al cabo hay que diseñar para firefox, dejar de lado internet explorer y cuando lo tengas todo listo crear una hoja de estilos exclusiva para ie y así corregir los fallos que en él se producen. Los tienes?

Argggggfff... pues no, no lo tengo... ¿Hay solución?

gracias

Solución siempre hay, lo que pasa que siempre es mejor encontrar la forma de arreglarlo trabajando menos je je :D

Ahora bien, acostúmbrate a ir creando carpetas a medida que vayas realizando cambios en la web y siempre guarda copias de seguridad de los archivos buenos, es decir, que funcionan como tu quieres, no vaya ser que luego quieras deshacer los cambios y no puedas. A mi ya me pasó mucho eso.

Bien, el primer error que yo veo es que tienes un ancho de 1000px y la imagen de las curvas superior e inferior solo da 800 px por lo que queda un espacio a un lado.
Vigila los márgenes que dejas arriba y abajo.

Como me imagino que eres nuevo quizás te sea complicado arreglarlo así que yo te recomendaría leer de neuvo el curso completo paso a paso e ir copiando los códigos del diseño sin hacerle ningún cambio.

Saludos

Cierto, hace más o menos dos días que estoy haciendo cópias de seguridad antes de retocar nada. De todo se aprende, ¿verdad? Sobre el otro tema, el de los márgenes, parece ser que las imagenes del curso tienen un máximo de 800px, por lo que alargargarlos, pues como que no. Ahora voy a mirar si consigo hacer unos nuevos o mirar si puedo alargar estos. Lo cierto es que si lo dejo todo a 800px queda bien, pero el conjunto queda pequeño en la pantalla. Por eso lo amplié a 1000px, que más o menos se ve mejor. Bien, gracias, si me pudieras orientar sobre como hacer las imagenes, te lo agradecería.
Mu chas gracias de todas maneras, un saludo...

De todas maneras, no entiendo el por que, el margen superior se ve bien en Explorer, pero no en Firefox. Siendo así, me desorienta sobre lo que puedo trabajar.
Gracias de nuevo

Yo lo que hago es usar los comentarios condicionales para establecer hojas de estilos exclusivas para ciertos navegadores que interpretan los códigos a su manera, como internet explorer :oops:

Una buena explicación de esos condicionales:

http://www.disenorama.com/tutoriales/comentarios-condicionales-para-ie

Así para firefox, safari, opera y el resto tengo una hoja, para ie7+ tengo otra y para ie6 o menos otra más.
Es cosa de probar y probar márgenes, anchuras, alturas,...

Saludos ;)

Vaya complicación, no me he enterado de casi nada. Como bien sospechas, soy nuevo en el tema de la web y casi todo es nuevo para mi. Casi estoy por remirar los codigos y hacer pruebas, Sospecho que puede ser debido a que modifiqué alturas en la cabecera. Probaré a ver si el problema es este y, si consigo reparalo, os lo cuento.
Gracias de todos modos...

jaume escribió:Vaya complicación, no me he enterado de casi nada. Como bien sospechas, soy nuevo en el tema de la web y casi todo es nuevo para mi. Casi estoy por remirar los codigos y hacer pruebas, Sospecho que puede ser debido a que modifiqué alturas en la cabecera. Probaré a ver si el problema es este y, si consigo reparalo, os lo cuento.
Gracias de todos modos...

Hola:
A lo mejor la explicación es un poco larga, pero se que hay diferentes formas de hacerlo.
Voy a suponer que usted tien el editor de imagenes Photoshop
por tanto, abra la imagen con Pothoshop.

Al abrirla se dará cuenta que no puede trabajarla, eso es debido a que al ser una extensión GIF, esa imagen está indexada, por tanto lo que hay que hacer es primero convertirla en RGB.

Así que teniendo la imagen abierta, vaya a la pestaña Imagen, pulsa en ella y en el desplegable pone el cursor en la pestaña Modo, cuando se abra el siguiente desplegable hace click izquierdo en la pestaña RGB.

Luego de ello, vaya a la pestaña Capa (click izquierdo), y en el desplegable, pulse (click izquierdo) en la pestaña Duplicar capa, y en el recuadro que se abre, pulse en OK.

Ahora al tener la capa duplicada, (para que trabaje en esa capa), vaya a la pestaña Imagen, pulse (click izquierdo) y en el desplegable, pulse en Tamaño de lienzo.

En la ventana que se llama Tamaño de lienzo, le mostrará el alto y el ancho de la imagen, -- si las medidas se muestran en centímetros, pulse en la flecha de la derecha (donde dice centímetros) para que en un pequeño desplegable elija píxeles.

Ahora lo que hay que hacer (después de todo eso), es agrandar el tamaño del lienzo, (no la imagen), por tanto allí donde está ese cuadrado rodeado de flechas (lo que se llama Ancla), pues pulse en la flecha que tiene la punta mirándo hacia la izquierda.

Después de ello, vaya al ancho de la imagen (donde dice 800), y borre el 800 y ponga 1000 y pulse en OK (o aceptar, es que no me acuerdo bien).

Así el lienzo se alargará hacia la derecha 200 píxeles.

Ahora lo que puede hacer es, Seleccionar con el Marco rectangular, (el primero de la izquierda arriba que está en la paleta de herramientas), la parte derecha de la imagen, (ponga el cursor en alguna parte de la imagen, (unos 250 píxeles, incluyéndo la curva de la derecha).

Ahora que ya esa parte está seleccionada, ponga el cursor sobre ella (sobre la selección), y pulse el botón izquierdo del ratón.

Manteniendo el botón pulsado, pulse la tecla Control, y manteniendo la tecla control pulsada y el botón del ratón pulsado en la selección , arrastre el cursor con la selección hacia la derecha (hasta que tope en el margen derecho del lienzo).

Luego de ello, haga click izquierdo en cualquier parte de la imagen (que no se la parte seleccionada) para que la selección se pegue y a la vez se deseleccione esa parte.

Ahora ya yiene la imagen curva superior de 1000 píxeles de ancho.

Bueno, ahora vaya a la pestaña Imagen, pulse en ella (click izquierdo), y en el desplegable que se abre ponga el cursor en la pestaña Modo y en el desplegable que se abre pulse en la pestaña Indexado.

Le saldrá una ventanita que le dirá que hay que acoplar las capas, pues le dice que Sí, y a la siguiente ventanita que le salga, que le dirá algo como Colores Exactos, también le dice que si u OK (es que no me acuerdo).

Luego de todo eso vaya a la pestaña Archivo, pulse (click izquierdo),
y en el desplegable que se abre pulse (click izquierdo) Guardar Como.

Se le abrirá la ventana del Guardar Como, y en el recuadro Nombre, saldrá el nombre de la imagen con la extensión gif, y en el recuadro Tipo saldrá también la extensión GIF.
Usted allí no cambie nada y pulse en OK o Aceptar (sigo sin acordarme ).

Elija también donde guardarla, (pude ser en el escritorio), o en la misma carpeta en donde está la original, solo que ya sabe que si la guarda en la misma carpeta en que está la original , ésta reemplazará a la anterior


Después de Aceptar u OK, (esta memoria mía)
Le saldrá a lo mejor una ventanita que dirá Opciones de GIF, en que estará marcada la opción Normal, por tanto solo pulse en OK.

Ahora cierre el PhotoShop
Y ya tiene su imagen curva superior con el mismo nombre y el mismo formato que la original, solo que un poco más ancha.
Saludos

Muchas gracias por la respuesta, pero solucioné este problema mucho más facil: abriendo la imagen "curva-superior.gif" con el programa ACDSee 8, abriendo "redimensionar", hay la opción de redimensionar por pixeles. Dandole la anchura de 1000 en lugar de los 800, se consigue la modificación (todo un áxito y una alegria, por cierto). Subida estas imagenes a la web, se ve correctamente. Ahora la pregunta es que la altura de la cabecera, que se ve correctamente en HTML-Kit y una vez subida a la web de internet, con Explorer de ve correctamente, mientras que con Firefox se ve un espacio abierto entre la curva superior y la cabecera (www.somnis.ppcc.cat). Unos días antes y a raiz de modificar no se qué, pasaba exactamente al revés. Imagino que en algún momento canvié el alto de la cabecera. Ahora, si no me podeis indicar a que se debe, probaré de canviar de nuevo los parámetros de altura y, con paciencia, ir subiendo los cambio y observando los resultados. Si consigo aclarar el tema os lo comunico. De todas maneras, gracias por la información. Seguro que la hubiera utilizado si no doy antes con la otra solución.
Saludos cordiales a tod@s...

Sin duda que ese problema que tienes ahora con firefox se arregla fácil usando los comentarios adicionales que te dije antes, no es ninguna complicación si lees con calma y sin saltarte nada esa explicación que te pasé ;)

toda web que se vea diferente en distintos navegadores, es porque aun siguen parametros en modo predeterminado.

solucion : modificar el estilo css y dejarle claro a cualkier navegador como kieres q se vea tu web, asi ellos no usan sus estilos predeterminados o por defecto.

Si, vale, pero ¿como hago esto? ¿Que debo dejar claro a los navegadores y cómo? ¿donde pongo lo que debería poner?
Gracias por vuestra ayuda

jaume escribió:Si, vale, pero ¿como hago esto? ¿Que debo dejar claro a los navegadores y cómo? ¿donde pongo lo que debería poner?

Jaume, veo que no me has hecho caso o no has leído mis mensajes anteriores.

Alo que dije agrego lo siguiente:

Para evitar que los navegadores usen parametros predeterminados, usa un reset.css. Se trata de una hoja de estilos un tanto especial, te dejo la que yo uso:

/* Reset CSS */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}

Eso todo mételo en un archivo llamado reset.css y, en el head de tus webs pon el siguiente (a parte de lo que te dije antes) código antes de todo el resto de hojas de estilo:

<link rel="stylesheet" href="css/reset.css" media="all" />

P.D: Como veo que tienes dudas de dónde poner ciertas cosas, te copio y pego el código del <head></head> que tengo en mi web:

<head>
<meta http-equiv="description" content="Descripción de tu web" />
<meta http-equiv="keywords" content="palabras clave separadas por comas" />
<title>TITULO DE TU WEB</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="css/reset.css" media="all" />
<link rel="stylesheet" href="css/base.css" media="all" />
   <!--[if lte IE 6]>
   <link rel="STYLESHEET" type="text/css" href="css/fix-ie6.css" />
   <![endif]-->	
   <!--[if gte IE 7]>
   <link rel="STYLESHEET" type="text/css" href="css/estilos-ie.css" />
   <![endif]-->
</head>

Saludos

Vale, entiendo que debo crear otra hoja de estilos ccs que se llamará "reset.ccs". Y en el archivo "index.html" que ya tengo, entre <head> y </head> poner todo lo que me has añadido en la segunda parte. ¿Es así? O por el contrario debo sustituir lo que tengo entre <head> y </head> mio por lo que me indicas tu?
Gracias por la ayuda

jaume escribió:Vale, entiendo que debo crear otra hoja de estilos ccs que se llamará "reset.ccs". Y en el archivo "index.html" que ya tengo, entre <head> y </head> poner todo lo que me has añadido en la segunda parte. ¿Es así? O por el contrario debo sustituir lo que tengo entre <head> y </head> mio por lo que me indicas tu?
Gracias por la ayuda

Lo primero, yo te di un modelo de mi <head></head>, tu tendrás tu título diferente, tus keywords, description y quizá más cosas. Solo tienes que agregar las hojas de estilo y lo de los condicionales.

Vale, de acuerdo, probaré y te digo alguna cosa.

gracias y saludos

A ver, he copiado exactamente los codigos que me has dado en un nuevo archivo reset.css. Ahora además de estilos-generales.ccs y estilos-ccs, hay uno nuevo con el nombre de reset.ccs. Hasta aquí bien.
En TODOS los archivos .html, justo antes de </head> y después de la línia, <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />, he colocado la que me has aconsejado: <link rel="stylesheet" href="css/reset.css" media="all" /> . Si des de el HTML_Kit abro vista previa, no hay modificaciones. Imagino que será un comando que actuará en el momento que esté colgada la página, ¿no? Por favor, dime si he hecho el proceso correctamente, ya que ahora mismo no puedo subir las modificacions y debería hacer más nodificaciones en otros aspectos.
Gracias de antemano

Raulyure, muchas gracias por la ayuda. Magníca explicación. He seguida al pié de la letra tu sugerencia y, a parte de solucionar el problema, he aprendido a modificar las imagenes. Muchas gracias, has sido de gran ayuda.

saludos

mandame la explicación q ami aveces me pasa y siempre termino haciendo trucos para evitar este problema, pero me confunde la raiz de este, chau

Camilorox, si te refieres a modificar las medidas de un .GIF, mira en este mismo hilo, más arriba o en la otra página, que está muy bien explicado. Al principio parece muy liado, pero si vas paso a paso, se soluciona de forma espectacular. Insisto, muchas gracias a Raulyure y a Foley. Gracias a ellos voy avanzando... Lo que no está nada claro es la separación entre curva superior y cabezera en firefox, pero estamos en ello. Puedes seguir el tema en

salut i llibertat