Se desmorona en Firefox y Explorer 6

Hola a todos, ante todo presentarme ante vosotros y felicitaros/agradeceros la información que posteáis por aquí..es de gran ayuda para los que empezamos en esto y encima somos medio torpones con la informática.

He estado creando una web (por el momento el index) con lo que voy aprendiendo en el curso paso a paso con el HTML kit. El principal problema que voy teniendo por el momento es la visualización de la web en los distintos navegadores. Con Internet Explorer 7 se ve perfecta pero lo he probado con el Explorer 6 y con el Mozila Firefox y la web se me desmorona. He leído bastante antes de preguntar pero sin solucionar nada.

¿Alguna ayuda por favor?


Rodrigo

Por cierto, que la propiedad "blink" en algunas palabras no hace nada en el Explorer pero sí que fuciona en el Firefox......:((

Lo normal es que se ve bien en firefox, bien o casi bien en ie7 y mal en ie6.

Yo creé un tema explicando una técnica para arreglar estos fallos:

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

Léetelo todo varias veces, sin saltarte nada y cuando tengas la idea en la cabeza de lo que hay que hacer, hazlo pasito a pasito.

Saludos

Gracias Foley!

He hecho lo que comentas en el enlace.......descargas la hoja de estilo reset e insertarla, independizar las hojas de estilo normal de la del Internet Explorer y ciertamente ha mejorado mucho....muchísimo aunque todavía no está del todo fina.

Me surgió una duda al leer el post.......¿han de ser iguales las hojas de estilo normal y la del Explorer?
Yo símplemente copié/pegé el contenido de la hoja CSS, le cambié el nombre y la enlacé con el index tal y como se explica. ...me parece demasiado sencillo, debo haber hecho algo mal.

Para ajustar ahora los desajustes observados en el Firefox....¿voy cambiando márgenes, padding, etc en la hoja css correspondiente hasta que vea la web igual en ambos navegadores?

En cuanto al IE 6...aún no he tenido oportunidad de ver cómo se muestra

Bueno, para que os hagáis una idea os paso la direción de la web por si tenéis la oportunidad de abrirla con ambos navegadores y así véis las diferencias, seguro que será más fácil ayudarme:

www.ipmscanaryislands.com

Saludos y gracias de nuevo

Bueno.........y ya abusando.

Me pregunto por qué el Explorer tiene tan mala fama...no lo pongo en duda pero es que es el único navegador que me muestra la web tal y como yo la veo en el HTML-kit. Me es muy difícil ajustar las cosas en el programa y ver si quedan bien en la web...¿cómo lo hago? ¿hay algún truco o tengo que hacer los cambios a ojo, subir la web al servidor y luego abrirla con Firefox para ver como ha quedado? No me cuadra esto. :roll:

Por ejemplo...después de hacer los cambios explicados para solventar el problema de los navegadores he visto que los enlaces de la barra de navegación se han pegado al borde superior con el I E...sin embargo en el programa se ven perfectos. ¿Cómo lo cambio en el programa? ¿Lo he de ver mal en el programa para que se vea bien en la web?

Joer esto es un lío....vaya bajada de moral :( :(

Gracias por la ayuda y perdón por el tostón.

Saludotes

Vamos por partes, intentaré responderte a todo:

:arrow: Sí, ahora tienes que ir modificando márgenes, paddings, bordes y demás para que se vea bien del todo en firefox. Hay veces que hace falta usar márgenes negativos de la siguiente forma:

margin:-110px

No dudes en hacerlo si es necesario, yo tuve que hacerlo para arreglar la visualización en ie6.

:arrow: Internet explorer tiene mala fama porque no sigue los estándares. Existen unos estándares y los navegadores en la medida de lo posible se ciñen a ellos pero ie no, ie interpreta las cosas a su manera, dá propiedades por defecto a ciertos elementos (usamos el reset.css para solucionar este problema) y es uno de los mayores rompecabezas que te puedes encontrar a la hora de hacer un diseño.

El problema es que vosotros, los que empezáis, hacéis la web fijándoos en cómo se ve en internet explorer y vais cambiando todo para que se vea bien en él pero como no sigue los estándares pues luego en firefox, safari, opera, chrome y demás navegadores se ve mal. Lo normal es que se vea bien en todos salvo en ie.

Yo la verdad el html kit no lo uso, yo solo uso el bloc de notas para editar la web, ahí modifico el diseño y agrego todo. Yo te diría que solo te fijes en si se ve bien en internet, en html kit no le deas demasiada importancia si luego se te va a ver mal en internet.

Saludos

Muchas gracias Foley.

Bueno......nada más postear mi anterior mensaje me puse a buscar por la web la forma de poder visualizar la web desde el HTML kit tanto en modo Explorer como en modo Gecko desde la pestaña Preview ya que esta opción viene desactivada "de serie".

Para ello tuve que descagarme el buscador de Mozilla en ZIP y descomprimirlo a una carpeta que creemos denominada Mozilla.org creada en Archivos de programa.


Luego nos vamos al menú de inicio de Windows y pinchamos en ejecutar...debemos poner esto:
regsvr32.exe "C:\Archivos de programa\Mozilla.org\Mozilla\mozctlx.dll"

Si nos dice que está todo ok, que lo ha encontrado y demás pues abrimos de nuevo el HTML-kit, abrimos un documento de html y pulsamos la pestama preiew. Desde ese momento podemos elegir si ver nuestra web en modo xplorer, en modo Gecko/Mozilla o los dos al mismo tiempo. en vertical o en horizontal.

Ojo porque si al ejecutar nos dice que no se puede encontrar debemos fijarnos y copiar la ruta exacta del archivo mozctlx.dll" que descomprimimos del ZIP.

Yo en este momento ya disfruto de doble pantalla en mi HTML kit, una con la visión de cómo se vería en el Explorer y otra como se vería en el Firefox.

Ahora toca empezar a pelearme con los estiloss CSS generales :cry:

Esto ahora me da miedo...empezar a rehacer la hoja, porque de lo que puse a lo que veo va un trecho.

Bueno, saludotes y gracias.

Por cierto, paralos que dominen el inglés os pongo el enlace a la web de la que saqué la info para configurar el HTML-kit:

http://www.htmlkit.com/support/docs/pages/h000157.html

Desesperado...estoy desesperado. LLevo más de un mes con esto y no he logrado que un mísero index se vea bien en todos los navegadores.

Cuando hice los pasos anteriores del reset.css, independizar hojas de estilo ydemás lo´gré que se viera de aceptable o similar en ambos navegadores. El caso es que añadí una nueva capa div dentro de una de las existentes y se me fue todo al garete de nuevo....cada vez que toco algo se me vuelve a descuadrar en el firefox.

Otra cosa..¿es normal que los cambios que hago en la hoja de estilo general afecten a la visualización en IE mientras que los que hago en la del IE no afectan a la visualización en Firefox?

Como la primera vez que apliqué el método me funcionó volví a repetirlo pero esta vez sin suerte.

Estoy haciendo la web un poco a contra reloj y de verdad que estoy completamente desmoralizado...

Y encima....para colmo, hoy el servidor esta tostado (1&1) ya que la web ha desaparecido de internet y cuando entro a mi cuenta no se me ven los archivos subidos ni me deja subir ninguno nuevo. Mañana les llamaré a ver qué ha pasado.

¿Algún alma caritativa que me eche un cable? Puedo mostraros todos los códigos, hojas de estilo, etc........

Si queréis echar un vistazo a la web:

www.ipmscanaryislands.com

Si no véis nada es que no he resuelto el tema con el servidor.

Saludos y gracias de antemano

Servidor operativo..ya podéis ver la web.

Saludos

Yeeeeee-HAW!!!!!!

Por fin lo he arreglado!!!!!!

Joer........vaya fallo estúpido, me puse a ordenar un poco la hoja de estilo "base" para todos los navegadores salvo IE y encontré un símbolo } de más....me lo cepillé y todo OK. Bueno, tuve que hacer algunos ajustes menores en el IE pero nada muy dramático.

Ahora mismo sólo me queda un flequillo por ajustar y es que los desplegables del menú horizontal no se ven exactamente igual.

Si alguno con ambos navegadores puede visitar mi web y actuar sobre los desplegables verá a lo que me refiero...a ver si es posible repararlo porque me da que habría que crear también dos hojas de estilos diferentes para el menú desplegable. :cry:

Bueno, una vez más os dejo la web para que veáis lo que os digo:

www.ipmscanaryislands.com

SALUDOTES

¿Alguna idea con lo del menú?

Por cierto...en IE 8 no saledel todo fina grrrrrrrrrr.........

Saludos

Si en diferentes versiones de IE se ve diferente, tendrás que crear más hojas de estilo e indicar que si es IE8 lea tal hoja, si es IE7 o menor tal otra hoja, etc.

Sí, en firefox el menú tiene un error y es que no se despliega bien del todo, solo cuando pones el ratón a la derecha. Miraste en el curso completo apso a paso la vista previa de cómo tendría que verse el menú según jorgens? Se ve bien en firefox?

Gracias ¡DE NUEVO! Foley :D

En Firefox se ve estupendo salvo el pequeño fallo de los desplegables del menú..de eso en estos momentos -por ahora- no me voy a preocupar.

En este momento mi prioridad es que se vea igual en el IE 8 ya que me descuadra algunos elementos.

He mirado el código fuente de mi index con el ordenador de un colega que tiene IE 8 y he visto una cosa curiosa que creo puede tener algo que ver.

Lo primero que me llamó la atención es que todo lo escrito enel html sale a color, tal y como lo veo en el programa de diseño mientras que en el resto de navegadores me salen las letras-todas- en negro.

Bien pues eso me ha permitido ver que el enlace a la hoja de estilo para IE me sale de color verde y no rojo y azúl como los demás....osea, que me agarra el color de los comentarios IF ie

<!--[if IE]>

<link rel="STYLESHEET" type="text/css" href="estilos-ie.css" />

<!-->

Todo esto sale en verde.

¿Alguna explicación o solución además de crear una hoja de estilo para IE8?

En caso de que tenga que crearla no tengo claro cómo sería...¿hay que poner otro comentario if IE8 ?????????


Muchas gracias de antemano Foley..de nuevo :wink:

La verdad no tengo el ie8 y no te podría dar una respuesta buena pero yo creo que es cosa del navegador que colorea el código como si se tratase de un programa como el notepad++. Te fijaste si en otras webs hace lo mismo, es decir colorear su código?

Te sigo recomendando que crees una hoja de estilos más, en este caso para IE8.

Para saber qué tendrías que poner en el if, mírate esto (y guárdarlo en favoritos, te hará falta algún día):

http://www.webtaller.com/construccion/lenguajes/html/lecciones/come…
http://www.disenorama.com/tutoriales/comentarios-condicionales-para-ie

Si te fijes en la primera página, tendrías que usar un menor o igual:

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

Y luego un:

<!--[if gte IE 8]>
Tu Codigo
<!-->

También en vez de usar gte (versión mayor o igual) podrías usar un if IE 8 normal y corriente pero bueno, poniendo el gte ya usamos la hoja esa cuando salga el IE 9 (eso sí que es pensar en el futuro).

Espero haberme explicado bien, sino tienes ejemplos en esas dos páginas que te comenté.

Ya sabes, con las hojas prueba y error, normalmente son problemas en bordes, márgenes, anchos y altos; si hace falta usa valores negativos, por ejemplo margin: -130px ;)

Saludos

Hola de nuevo....una cosa curiosa, he hecho lo que comentas creando hojas de estulo para versiones igual o menos de IE 7 y otra para versiones mayores o igual a IE 8.

Utilizando el IE tester he podido observar que ya se ve bien en las versiones 6, 7 y 8 pero que en el 5.5 sale mal.

¿Tendría que crear otra específica para el IE 5.5? Vaya lío porque pensaba que al poner el valor lte detectaría todas las versiones anteriores al 7.

De todas formas..¿valdrá la pena? ¿Habrá aguien que utilice aún el IE 5.5?



Y en otro orden de cosas............. ¿Se te ocurre cómo arreglar el fallito de los menús desplegables? Donde único se ve perfecto es en el IE7, en todas las demás y en el Firefox sale ese fallito.

Gracias por todo

Lo del ie 5.5 mejor no te comas la cabeza porque muy pocos lo usarán y los que lo usen se tendrán que actualizar porque verán muchas muchas webs mal. Es mejor que esa gente se actualice, no vale la pena, además sería algo complicado adaptarlo según cómo estea diseñada la web porque es un navegador muy antiguo que sólo comprende bien el css más básico.

Lo de los desplegables no lo sé la verdad porque jorgens creo recordar que tampoco es que lo haya hecho él, él cogió códigos de otro menú y lo adaptó para hacerlo todo más sencillo. Miraste si en la parte del curso que explica lo del desplegable, a jorgens se le ve perfecto en firefox? No vaya ser que algún cambio que le hiciste lo chafase un poco no sé.

Saludos ;)