¿Mi pag se ve bien en firefox pero no en otros?
Estoy haciendo una página de una ferretería, el tema es que en el firefox se ve exactamente igual como la hago y en el internet explorer cualquier ver y otros se ve algunas cosas mal, por lo general las capas desalineadas, que puede ser . La hago con el estándar 4.01 y utilizo estos programas : MICROSOFT WEB EXPRESSION 3, DREAMWEAVER CS5 Y ZEND PHP STUDIO 5 .
1 respuesta
Respuesta de innet
1
Bueno te intentaré responder en 3 cuestiones ya que las incompatibilidades entre navegadores da para mucho y cada caso se debe tratar de una manera distinta.
1º / Es cierto que lo mejor es hacer la web para Firefox y luego ya corregir compatibilidades pero si puedes ahorrarte el luego corregir cosas, mejor prevenir que curar. Para evitar muchos de los problemas que suele dar IE se suelen utilizar Reset Stylesheet, es decir, plantillas que resetean algunos valores por defecto para que IE no les asigne lo que le parezca. Puedes buscar en google poniendo Reset CSS, yo te recomiendo la primera que sale de MeyerWeb.
2º / En la medida en que las páginas sean de tipo corporativo para una empresa, y que los contenidos no serán muy variables, usa anchos fijos para los DIV y usa todos los que tengas que usar para que todo este bien ordenadito y con su DIV superior que lo contiene, porque IE se lleva muy mal con los position:relative por ejemplo o con los float.
3º / En lo que viene siendo programación como JavaScript o PHP deberás tener especial atención en el uso de las comillas simples, dobles y espacios en blanco. Por ejemplo hay acciones de JavaScript en las que deberás "escapar" las comillas simples mediante '\función'\ y esto también pasa con PHP en según que funciones utilices.
Espero haberte ayudado, un saludo.
Pd: si de repente utilizas el Reset CSS y ves que las cosas se te mueven es normal, quizá hayas hecho algún apaño para verlo mejor en IE y ahora tienes que revertirlo.
1º / Es cierto que lo mejor es hacer la web para Firefox y luego ya corregir compatibilidades pero si puedes ahorrarte el luego corregir cosas, mejor prevenir que curar. Para evitar muchos de los problemas que suele dar IE se suelen utilizar Reset Stylesheet, es decir, plantillas que resetean algunos valores por defecto para que IE no les asigne lo que le parezca. Puedes buscar en google poniendo Reset CSS, yo te recomiendo la primera que sale de MeyerWeb.
2º / En la medida en que las páginas sean de tipo corporativo para una empresa, y que los contenidos no serán muy variables, usa anchos fijos para los DIV y usa todos los que tengas que usar para que todo este bien ordenadito y con su DIV superior que lo contiene, porque IE se lleva muy mal con los position:relative por ejemplo o con los float.
3º / En lo que viene siendo programación como JavaScript o PHP deberás tener especial atención en el uso de las comillas simples, dobles y espacios en blanco. Por ejemplo hay acciones de JavaScript en las que deberás "escapar" las comillas simples mediante '\función'\ y esto también pasa con PHP en según que funciones utilices.
Espero haberte ayudado, un saludo.
Pd: si de repente utilizas el Reset CSS y ves que las cosas se te mueven es normal, quizá hayas hecho algún apaño para verlo mejor en IE y ahora tienes que revertirlo.
Hola amigo, te agradezco tanta atención a mi pregunta, encontré el css que me dijiste, lo probé pero no me dio resultado, me sigue desacomodando capas
Bueno si has repasado lo que te he comentado, lo que te puedo comentar es una profundización en algo anterior y es que cada div ha de tener un contenedor superior que lo delimite porque sino con los float cada cosa se va por su lado. Te pongo un ejemplo de estructuración por contenedores para que lo que vaya dentro de estos no se muevan:
<div id="contenedor"> // width:1006px; margin:0 auto; contendrá las partes de la web y estará centrado para todas las resoluciones por el margin auto.
<div id="header"> // width:1006px; float:left; La típica cabecera que imagínate que tiene un menú a la derecha del banner con 5 secciones, Inicio, Historia, Servicios, Personal y Contacto
<div id="menu"></div>
// Width:450px;float:right Se iría a la derecha pero dentro de su contenedor superior más inmediato que es el id "header"
</div>
<div id="contenido"> // width:1006px; float:left Sería donde se estructura el contenido de la página y los contenidos que metas en ella se colocarán uno tras otro con el float:left; pero DENTRO del div contenido que ya está situado.
<div id="columna_izq"></div>
// width:302px;
<div id="columna_centro"></div>
// width:602px;
<div id="columna_derecha"></div>
// width:302px;
</div>
<div id="footer"></div>
// width:1006px; float:left;
</div>
Con esto más o menos tienes una estructura que ya puedes variar dependiendo de las necesidades y en la cuál lo que coloques dentro de estos DIVs, si tienes en cuenta los márgentes y floats pensando que ya están colocados dentro de esos contenedores superiores propios te será sencillo que se vea bien en explorer.
Otra alternativa es que trabajes con Mallas CSS o Grid CSS, como CSS 960 o thesquaregrid.com. Son "plantillas" CSS que ayudan con problemas de compatibilidad ya que te lo dan casi todo hecho sólo tienes que especificar qué tamaño tendrá el div y buscar en la documentación que tipo de clase le tienes que poner para que tenga ese tamaño, pero bueno he querido darte la alternativa de un ejemplo porque esto era lo más fácil :).
<div id="contenedor"> // width:1006px; margin:0 auto; contendrá las partes de la web y estará centrado para todas las resoluciones por el margin auto.
<div id="header"> // width:1006px; float:left; La típica cabecera que imagínate que tiene un menú a la derecha del banner con 5 secciones, Inicio, Historia, Servicios, Personal y Contacto
<div id="menu"></div>
// Width:450px;float:right Se iría a la derecha pero dentro de su contenedor superior más inmediato que es el id "header"
</div>
<div id="contenido"> // width:1006px; float:left Sería donde se estructura el contenido de la página y los contenidos que metas en ella se colocarán uno tras otro con el float:left; pero DENTRO del div contenido que ya está situado.
<div id="columna_izq"></div>
// width:302px;
<div id="columna_centro"></div>
// width:602px;
<div id="columna_derecha"></div>
// width:302px;
</div>
<div id="footer"></div>
// width:1006px; float:left;
</div>
Con esto más o menos tienes una estructura que ya puedes variar dependiendo de las necesidades y en la cuál lo que coloques dentro de estos DIVs, si tienes en cuenta los márgentes y floats pensando que ya están colocados dentro de esos contenedores superiores propios te será sencillo que se vea bien en explorer.
Otra alternativa es que trabajes con Mallas CSS o Grid CSS, como CSS 960 o thesquaregrid.com. Son "plantillas" CSS que ayudan con problemas de compatibilidad ya que te lo dan casi todo hecho sólo tienes que especificar qué tamaño tendrá el div y buscar en la documentación que tipo de clase le tienes que poner para que tenga ese tamaño, pero bueno he querido darte la alternativa de un ejemplo porque esto era lo más fácil :).
