Conseguir que la web se vea igual en todos los navegadores

Foley · 15 Jul 2010, 22:34 · Solicitar retirada

Hola

Este tema lo creo a razón de bastantes preguntas de foreros que están creando su web y se encuentran con el problema de que se ve bien en un navegador y en el resto no. Veo que en general se os ve bien en internet explorer y no en el resto (debería ser al contrario je je je).

Como vamos a hacer bastantes cambios, te recomiendo que dupliques los archivos de tu web, es decir que crees lo que se llama una copia de seguridad para así luego, si algo queda mal pues puedas volver al estado anterior.

Vamos al tema:

Cuando creamos una web se debe mirar primero en firefox porque es un navegador muy extendido y que además interpreta el código bien, cosa que internet explorer (ie) no hace. Los principales problemas en ie son con los márgenes y con los anchos pero es todo prueba y error: modificas un ancho/margen y ves cómo afecta a la visualización.

Recomiendo usar una hoja de estilos para internet explorer y otra para firefox, opera y demás. Recomiendo montarlo así:

estilos.css (esa para todos las navegadores menos ie)
estilos-ie.css (para ie, obvio je je, si en tu caso la hoja estilo-general.css hace que se vea bien solo en ie pues entonces renombrala a estilos-ie.css)

Primero vamos a "instalar" lo que se llama un reset css, copia todo el código y guárdalo como reset.css:

http://www.testautomovil.com/css/reset.css

Colócalo en el head, usando este código:

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

El reset tendrá que quedarte justo antes del siguiente código que te daré.

Ahora bien, cómo se indica que use una en todos los casos salvo en ie y que use la otra solo cuando el navegador es internet explorer? Fácil, con el siguiente código indicas la hoja de estilos para todos salvo ie:

<link rel="stylesheet" href="estilos.css" type="text/css">

Con el siguiente código indicas que en todas las versiones de ie se use la estilos-ie.css (coloca el código justo antes de </head>):

<!--[if IE]>
<link rel="STYLESHEET" type="text/css" href="estilos-ie.css" />
<![endif]-->

Con eso bastaría pero hay casos como el de la primera web de mi firma que usa 3 hojas de estilo, una para todos salvo ie, otra para ie6 y otra para ie7 o superior. Hice eso porque se me veía de diferente forma en ciertas versiones del ie, un rompecabezas vamos je je Laughing

Para eso ya necesitas otros códigos que te indican y explican aquí (te recomiendo leerlo):

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

Supongo que después de este tocho que te acabo de escribir odias al internet explorer y también a microsoft, como todos los diseñador de webs, o casi todos.

Al hacer todo esto el head de tu web debería quedar de este estilo:

<head>
---------------etiquetas meta y título-------------------
<link rel="stylesheet" href="reset.css" media="all" />
<link rel="stylesheet" href="estilos.css" media="all" />
   <!--[if IE]>
   <link rel="STYLESHEET" type="text/css" href="estilos-ie.css" />
   <![endif]-->
</head>

Después de hacer todo eso tiene que mejorar sino hazte la idea de que algo estás haciendo mal.

Si aún así se te sigue viendo mal, entonces crea un nuevo tema en el "Foro General" porque siempre hay solución solo que aquí mi idea es explicarlo todo de la forma más sencilla posible. Por favor, no pidas ayuda respondiendo a este.

Ah y ya lo último, por si te hace falta ver cómo tengo montado lo de las hojas de estilo y qué tengo en cada una, te dejo dos enlaces a tres hojas de estilo que uso en mi web (tiene bastantes cosas pero para hacerte una idea sirve):

http://www.testautomovil.com/css/base.css la general
http://www.testautomovil.com/css/estilos-ie.css la de ie 7 o superior
http://www.testautomovil.com/css/fix-ie6.css la de ie 6

EDITO: Quizás os interese leer algunas dudas de usuarios con respecto a este tema:

http://www.comocreartuweb.com/phpBB2/ftopic26110.html

Saludos ;)

codomodragon · 15 Jul 2010, 23:01 · Solicitar retirada

jo nada man esto no lo savia gracis jeje XD
pes si odiamos iexplorer es el explorador mas chafa q conosco creo q me entiendes al decirte los dolores de cabesa q me a dado con mi pagina web haa son paramorirse de la ravia pero esto me cirve y mucho otravez gracie XD

kevin · 16 Jul 2010, 04:32 · Solicitar retirada

wow men te felicito no lo sabia que util :D ya he logrado hacer que mi web se vea bien en ie

francisco1 · 9 Ago 2010, 16:52 · Solicitar retirada

Hola Foley yo casi termine el curso paso a paso la plantilla se ve perfecta en todos los navegadores mi pregunta es si las webs que valla haciendo ha ora a partir de esa plantilla si se ven perfectas debo ponerle todos esos css para el internet explorer o no es necesario si se ven bien un saludo de Francisco.

Foley · 9 Ago 2010, 17:02 · Solicitar retirada

Hola francisco

Si la web se ve bien en todos los navegadores sin hacerle nada de lo que dije yo arriba pues no la toques, déjala así ;)

Un saludo

francisco1 · 9 Ago 2010, 17:09 · Solicitar retirada

Rápido Foley gracias hay algo mas que se me olvidaba preguntarte solo lo e comprobado en tres navegadores el internet explorer FireFox y clome pero no lo e probado con el opera, safari i otros que hay es necesario probarlo en todos los navegadores que hay para saber si están bien en todos o no es necesario es suficiente con estos tres.

Foley · 10 Ago 2010, 15:04 · Solicitar retirada

Debería ser suficiente, ya que tanto opera como safari siguen los estándares como mozilla firefox y chrome así que debe verser bien la web ;)

De todas formas no cuesta nada instalar el navegador un momento, mirar cómo se ve y desinstalarlo je je je, por asegurar ;)

Saludos

francisco1 · 10 Ago 2010, 15:55 · Solicitar retirada

Gracias por todo Foley lo hice ya boy adelantando gracias a todos vosotros un saludo a todos

dani-rous · 16 Ago 2010, 22:59 · Solicitar retirada

Hola, tengo la web muy avanzada

http://mi-revista.atwebpages.com/

Con internet explorer se ve bien, pero revisando el foro se me ocurrio probar el firefox y da miedo de como se ve, intente utilizar los codigos antes mensionado en una determinada pagina y segui las indicaciones pero no note ningun cambio visible, como puedo corregir la visualizacion sin cojer una pataleta y stres.
Si me lo explicas con un poquito mas de detalle los pasos se lo agradecere mucho.
Adios.

Foley · 16 Ago 2010, 23:51 · Solicitar retirada

En el tema dije:

"Si aún así se te sigue viendo mal, entonces crea un nuevo tema en el "Foro General" porque siempre hay solución solo que aquí mi idea es explicarlo todo de la forma más sencilla posible. Por favor, no pidas ayuda respondiendo a este."

Por favor, lee ^^

Saludos, es por mantener un orden, nada más, espero que lo entiendas ;)

dty_safe · 31 Ago 2010, 13:16 · Solicitar retirada

Gracias por la explicacion,pero a mi me pasa siempre lo contrario,cuando cero una web,se me ve bien siempre en el explorer,los problemas los tengo cuando ytilizo el firefox,chrome y el opera,que no hya manera,tengo que estar reajustando cosas para que se vean en estos navegadores,incluso hubi una vez que no fui capaz de solucionar un problema, y nadie desde aqui me dio solucion,ya he descartado esa web,en los demas ensayos todo fue bien(con sufrimiento,pero bien),ah,solo queria agradecer el esfuerzo,que creo que es enorme por vuestra parte

MaGNo · 8 Sep 2010, 09:43 · Solicitar retirada

Bueno Foley, antes de partirme la cabeza con ese tutorial que has escrito, me gustaria comprender una cosa. A ver, si me pongo a modificar los margenes y demas,..a medida que vaya viendo la preview en el HTML-kit se me ira descuadrando la web...

No se si me explico. Si por ejemplo en el mozilla se me ve un marco descuadrado y lo modifico en el HTML-kit,..por logica en el explorer se me vera mal.

A ver si me podeis explicar este concepto antes de meter mano porque veo la cosa mu complicada recien llegao de vacas xDD.

MaGNo · 8 Sep 2010, 11:44 · Solicitar retirada

MaGNo escribió:Bueno Foley, antes de partirme la cabeza con ese tutorial que has escrito, me gustaria comprender una cosa. A ver, si me pongo a modificar los margenes y demas,..a medida que vaya viendo la preview en el HTML-kit se me ira descuadrando la web...

No se si me explico. Si por ejemplo en el mozilla se me ve un marco descuadrado y lo modifico en el HTML-kit,..por logica en el explorer se me vera mal.

A ver si me podeis explicar este concepto antes de meter mano porque veo la cosa mu complicada recien llegao de vacas xDD.

Vale, ya vi la respuesta xD:

"Ahora bien, cómo se indica que use una en todos los casos salvo en ie y que use la otra solo cuando el navegador es internet explorer? Fácil, con el siguiente código indicas la hoja de estilos para todos salvo ie"

indiglosv · 8 Sep 2010, 16:44 · Solicitar retirada

Gracias por este aporte, yo tampoco sabia este metodo.

Pregunta :
Acaso microsoft no lo sabe o se hacen los tonto, se pretende arreglar o asi sera siempre ?

saludos..

Foley · 8 Sep 2010, 18:59 · Solicitar retirada

indiglosv escribió:Acaso microsoft no lo sabe o se hacen los tonto, se pretende arreglar o asi sera siempre ?

Las últimas versiones del ie ya están cada vez siguiendo mejor los estándares web pero todavía hay muchos usuarios que usan el ie6 y el ie7 que no siguen los estándares.
Cuando ie6 (sobre todo) y ie7 se dejen de usar, no hará falta andar con estos métodos.

indiglosv · 8 Sep 2010, 19:03 · Solicitar retirada

Foley escribió:
indiglosv escribió:Acaso microsoft no lo sabe o se hacen los tonto, se pretende arreglar o asi sera siempre ?

Las últimas versiones del ie ya están cada vez siguiendo mejor los estándares web pero todavía hay muchos usuarios que usan el ie6 y el ie7 que no siguen los estándares.
Cuando ie6 (sobre todo) y ie7 se dejen de usar, no hará falta andar con estos métodos.

Bueno ie6 ya murio , osea que solo queda 1 en la lista :twisted:

Foley · 15 Sep 2010, 00:43 · Solicitar retirada

indiglosv escribió:Bueno ie6 ya murio , osea que solo queda 1 en la lista :twisted:

Me gustaría que llevase muerto 1 o 2 años ya pero la verdad es que no, no está muerto ni mucho menos.

Dependiendo el público que visite tu web verás más o menos usuarios que usen ie6 pero ya te digo que tengo webs que reciben un 10-15 % del total de visitantes que usan ese navegador, cantidad que no se puede despreciar :)

Hablo de webs que tienen un público de nivel bajo en internet, gente que no sabe que existe otro navegador que no sea internet explorer. Cada vez son menos pero algunos tienen miedo a instalar firefox o quizás no sepan, no sé.

Saludos

emilio_py · 4 Nov 2010, 20:01 · Solicitar retirada

Amigo Foley, muchisimas gracias
hago los cambios y te aviso que tal quedaron
saludos desde asuncion - paraguay
emilio laguardia

gerchulino · 8 Dic 2010, 07:48 · Solicitar retirada

No se por que se complican tanto, con usar las funciones basicas de CSS alcanza y sobra para que se vea en todos los navegadores sin la necesidad de usar javascript para que se ejecute...........Otra cosa para el diseño muchas veces tambien es conveniente usar tablas proque se ve correctamente en todos los navegadores, no asi los div........No van a estar decuerdo con mi teoria pero google y otros me han demostrado que le dan la misma iportancia a una tabla que a un div......

codomodragon · 8 Dic 2010, 10:07 · Solicitar retirada

Haber amigo, lo que pasa con las tablas y div es que cada uno sirve para algo diferente, los div se usan mas que todo para hacer diseños bonitos (también lo hacen las tablas pero los div son mas adecuados) y efectos mas fácil rápido y con menos códigos, las tabas se usan mas que todo parea tabular datos :roll: y aveces para definir una parte sólida del diseño.
Ósea que en cierta forma tienes razón en lo que dices, pero no es = y no se deben usar =, además las paginas bien diseñadas usando los div cuando se deben usar div y usando tablas para cuando se deben usar tablas tiene mas prioridad que las que no en los buscadores, por lo menos en Google (lo dice en sus políticas)

Aparte también dijiste que el correcto uso de las propiedades en css hacen que la web se vea = en todos los navegadores, es la verdad mas cierta de todas, siempre i cuando el html también este como debe en css se puede hacer que se vea todo =, como ejemplo esta mi web no uso un estilo para cada explorador y no tengo problema de visualización alguno.

PD: les recomiendo a todos investigar html5 esta en fase experimental pero trae bastantes ventajas en cuanto al diseño y el ahorró de códigos, además de mas propiedades.

mikasa · 13 Feb 2011, 11:16 · Solicitar retirada

Buenos días, os escribo pq estoy un poco desesperado. Eh creado una web, pero esta solo se veia bien en IE. Segui los pasos expuestos aquí, pero mi problema no se solucionó. Así que revisé toda la hoja de estilos y la fui adaptando para que se viera bien en firefox. El problema esq ahora se bastante bien en firefox pero no en IE y ya no hace falta ni hablar de chrome, donde se ve fatal.
Mi web es muy densa, y solo eh tenido tiempo de optimizar para firefox el index.html que es la que tengo colgada en la red. Sirve para hacerse una idea de lo q me pasa.
http://www.viajaracalifornia.es
Puedo pasaros también la hoja de estilos. pero no se si meterla toda aquí o como hacerlo.

Todo consejo será de gran ayuda.Gracias.

hegete · 14 Feb 2011, 21:22 · Solicitar retirada

Hola mikasa, estoy tambien aprendiendo pero te recomendaria que cambies el DOCTYPE por este otro:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="es">

Es mucho mas estricto con la validacion del codigo pero es el que sigue los estandares por otra parte tienes la etiqueta </head> mal cerrada, </head

Recuerda borrar <html> si cambias el DOCTYPE.

codomodragon · 15 Feb 2011, 02:37 · Solicitar retirada

hegete escribió:Hola mikasa, estoy tambien aprendiendo pero te recomendaria que cambies el DOCTYPE por este otro:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="es">

Es mucho mas estricto con la validacion del codigo pero es el que sigue los estandares por otra parte tienes la etiqueta </head> mal cerrada, </head

Recuerda borrar <html> si cambias el DOCTYPE.

amm pero de que hablas, amigo ese código solo indica que la pagina a sido validad, del resto no tiene inferencia en el código, a acepción de 1 parte "DTD XHTML 1.0" esta parte es la que indica el idioma que usas en tu web, ahora por cambiarlo de HTML 4.01 a XHTML 1.0 no crearas grandes cambios ni mejoras si el resto del código no esta adaptado a dicho idioma, el XHTML es mas que todo el que se usa con los foros o blog ya que son mucho contenido extraído de BD y de bases externas o de archivos xml.

Ahora si tu pasas tu pagina por la WC3 (que es una perdida de tiempo) debes escogerle el idioma en el que trabajas para que pueda verificar el código y lo que aparezca en esa parte después variara según el idioma escogido.

hegete · 15 Feb 2011, 10:34 · Solicitar retirada

Hola . ¿donde leistes que yo afirmara que este DOCTYPE que recomende a Omar afectara directamente en el codigo?. Si acaso di a entender que con el uso de xhtml se estandarizaban todos los navegadores siempre y cuando se incluya en el DOCTYPE y para evitar el modo Quirks, este DTD; "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd". De todas formas habra que empezar a adoptar el xhtml como posible sustituto del html.

mikasa · 15 Feb 2011, 11:15 · Solicitar retirada

eh cambiado el DOCTYPE por ese que me habéis dicho pero eso no mejora mi web, se me ha movido alguna cosilla pero nada grave. Lo que no entendí es que tiene q ver el DOCTYPE con que se vea bien la pagina en todos los navegadores? Mi pagina no tiene forums ni nada, es solo informativa. (hablo desde la ignorancia). Si aplico eso del xhtml tengo que cambiar el codigo html?? y el css???
Habéis visto muchos fallos en el código aparte del </head>?¿?
Gracias por vuestras respuestas!