Conseguir que la web se vea igual en todos los navegadores

**Foley** · 15/07/2010, 20:34

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:

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:

Código:

<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>):

Código:

<!--[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...onales-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:

Código:

<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/07/2010, 21:01

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/07/2010, 02:32

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

**francisco1** · 09/08/2010, 14:52

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** · 09/08/2010, 15:02

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** · 09/08/2010, 15:09

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/08/2010, 13:04

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/08/2010, 13:55

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

**dani-rous** · 16/08/2010, 20:59

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/08/2010, 21:51

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/08/2010, 11:16

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** · 08/09/2010, 07:43

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** · 08/09/2010, 09:44

Iniciado por MaGNo

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** · 08/09/2010, 14:44

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** · 08/09/2010, 16:59

Iniciado por indiglosv

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.

Tema: Conseguir que la web se vea igual en todos los navegadores

Herramientas

Buscar Tema

Visualizar

Conseguir que la web se vea igual en todos los navegadores

Sobre los css para el internet explorer

otra pregunta css navegadores

css vista de la web en otros navegadores

Problemas con nvegador

Re: Conseguir que la web se vea igual en todos los navegador

Temas Similares

Web Wordpress igual en todos los navegadores???

NO se me ve igual en todos los navegadores. Por qué???

Permisos de Publicación