Ver la versión completa : [Post de desahogo] **** CSS
Buenas,
Estoy rediseñando algunas secciones de H-G, sobre todo la forma en la que se muestran los listados de productos, y he decidido pasar de tablas y ponerlo todo con CSS.
Si a estas alturas todavía no lo había hecho es por dos causas: porque me daba mucha pereza, ya que la estructura está hecha hace eones y me supone mucho curro rehacerla, y sobre todo porque las tablas funcionan de maravilla con todos los navegadores y con el CSS hay que andar revisando con cada navegador en particular.
Pues bien, en una tarde consigo maquetar todo para que funcione de maravilla en Chrome y Firefox, así que decido probarlo en Internet Explorer... y me he cagado en todos sus muertos. La web parece otra. Es una **** chapuza monumental. Tablas descuadradas, tamaños incorrectos, botones que se montan sobre textos, efectos que no funcionan correctamente (al colocar el ratón sobre el botón, por ejemplo)...
Este es simplemente un post de desahogo para ciscarme en la madre de los programadores del Internet Explorer. Encima, por lo poco que he investigado, veo tendré que hacer diferentes CSS dependiendo de la versión del internet explorer que se utilice, si quiero asegurarme de que funcione.
La madre que los parió.
Un saludo
Anachy
josepzin
20/03/2013, 19:39
Wait!!
No hagas versiones distintas para los IE, se puede hacer vaya igual que FF, Chrome y demás.
Obviamente olvídate de IE6, incluso a como van las cosas yo pasaría de IE7, pero eso depende de las estadisticas que tengas de la web.
¿Y cómo se puede hacer que vaya igual que en Chrome sin hacer css específicos para IE?
Tenía previsto hacer versiones para IE7 e IE8, pero si hay algún sistema sencillo para adaptar los CSS, te lo agradecería mucho. :brindis:
Normalmente como dice josepzin es posible ajustar lo suficiente para que se vea igual (o casi) en los IEs, pero lleva tiempo sobretodo si quieres que se vea bien en las versiones < 8.
Si los cambios en los css no son muchos puedes usar algunos "trucos" (no validará el css) para que algunas características solo afecten a IE6 o IE7 por ejemplo:
ul{
padding: 10px 5px /* todos los navegadores */
*padding: 9px 5px /* solo lo lee el IE6 e IE7 */
_padding: 9px 4px /* solo lo lee el IE6 */
}
Aunque si son muchos los "fixes" no es mala idea separarlo en diferentes css, pero a la hora de hacer pruebas son bastante útiles.
Al final con el tiempo te acostumbras a las "manías" de los IEs pero dan mucho por culo sobretodo sus problemas con los floats o z-index y que calculan los margins como les da la gana, a ser posible casi siempre intento usar paddings por eso...
Me pregunto si los programadores de los IEs < 8, lo pondrán en su curriculum :D
josepzin
20/03/2013, 20:09
Yo le tengo pillado el truco y ultimamente creo que ni hacks he usado.
Comprendo y comparto tu agonía hermano Anarchy. Es como para querer eutanasiar a esas gentes de Microsoft :lol:
Ahora no se que **** he hecho, que en Firefox se me sale un poco el campo del formulario de la tabla.
En Internet explorer directamente la web implosiona. xDDD
Ejemplos del botón de compra con el campo de unidades:
En chrome:
32177
En Firefox:
32179
En Internet Explorer: :lol2:
32178
Fijaros sólo en el botón y en el el campo de cantidad, que es con lo que estoy ahora, el resto lo sigo maquetando.
Ahora es cuando en modo troll entra alguien y dice que lo ve todo igual y perfecto en todos los navegadores - Shit happens :lol:
Las fuentes en la versión de firefox son las mismas?
Wild[Kyo]
20/03/2013, 20:47
Primero, ¿estás usando un CSS Reset? Yo te recomiendo el de Eric Meyer: http://www.cssreset.com/ ¿Para qué sirve? Pues para resetear los estilos de los navegadores que vienen por defecto, de esta forma te evitarás ver como algunas cosas no cuadran.
Luego, ten en cuenta que en Internet Explorer algunas cosas no te van a rular según la versión que uses. Como el border-radius. Luego, seguramente necesitarás algún que otro clearfix porque por lo que veo tienes alguna cosa flotante y pasa de ti. Es normal, son un coñazo.
El botón "a la cesta" es un input? ponle un ancho fijo y sin padding lateral, para que todos los navegadores lo muestren con la misma longitud. En cuanto al internet explorer... a veces es interesante posicionar cosas absolutamente aunque normalmente es desaconsejable. Si la caja que contiene toda la info es "position:relative", luego los elementos internos con "position:absolute" los puedes situar al pixel con top, bottom, left, right respecto a su contenedor.
GameMaster
20/03/2013, 21:16
Si hubieras hecho primero para IE verias que despues en los otros no tendrias practicamente problemas
Si hubieras hecho primero para IE verias que despues en los otros no tendrias practicamente problemas
Eso es broma no?, yo a partir de ahora directamente pondre NOT COMPATIBLE WITH IE, GET A REAL BROWSER OR GO ELSEWHERE! en mis guebs. :lol2:
Luisodin
20/03/2013, 21:28
IE con las tablas es el **** rosario de la aurora, con tamaños por defecto que nada tienen que ver con los exploradores, que si los bordes, que si muestran lo que les da la gana,..
Yo he llegado a ver webs maquetadas las tablas con simples divs y supongo que será todo por eso
GameMaster
20/03/2013, 21:37
para compatibilidad entre browsers jamas usar tablas, DIV en su lugar, las tablas estan condenadas a la extinción
para compatibilidad entre browsers jamas usar tablas, DIV en su lugar, las tablas estan condenadas a la extinción
Cierto, ahora se estila el formato tableless, no me extraña.
josepzin
20/03/2013, 22:04
Cierto, lo del reset css es super importante!!
Luisodin
20/03/2013, 22:13
O si no, IE dramaaaaaaaaaaaaaaaaaaaaa
Directamente olvídate del soporte IE 7, haz como si no existiera, usa IE8 como base para todas las maquetaciones de IE y confía en que el usuario que aún use IE7 estará más que acostumbrado a ver las páginas de mal a muy mal y no le importará que la vuestra también se vea mal, de verdad. Y aún así todavía te ciscarás en la madre de todo microsoft. Si quieres una bonita maquetación con el menor esfuerzo: boilerplate o bootstrap
Lo de los trucos está muy bien si algún contrato te obliga a dar soporte a IE6-7 pero por lo general son un error y siempre hay alternativas, recuerda esto siempre que estés maquetando, no te enfoques en que algo tiene que ser como tu quieres...
Gracias por los comentarios. Mañana me pondré con esto. Seguiré haciéndolo para que tire bien en Chrome y cuando lo tenga 100% a mi gusto ya haré los fix necesarios para el resto de navegadores. :brindis:
Es curioso pero desde siempre esto es normal, lo que pasa es que la gente hacia las paginas para explorer que viniendo de microsoft se salta los standar y si despues no se veian en netscape pues... ya sabes no uses netscape.
Pero ahora al haber mas navegadores conocidos la gente parece que empieza primero por los otros navegadores y después se lleva la sorpresa con el IE.
El problema es que al ser una tienda pierdes clientes potenciales pero es para mandar a la mierda al IE.
Whitesnake
20/03/2013, 23:01
Es la mayor pega de la programación web, la falta de estandares (o el cumplimiento de los mismos), tanto en CSS como en Javascript, por poner un ejemplo llevan dando la caca con HTML5 años y aun asi cada navegador todavia implementa muchas de sus funcionalidades a su bola (si es que las implementa, IE se sigue llevando la palma).
Y lo peor es que no tiene visos de solucionarse, ultimamente en el curro estamos investigando el desarrollo de aplicaciones web multiplataforma para dispositivos moviles, que te lo venden todo bonito, pues bien, ya no es que se vea una misma web diferente en Android que en iPhone, cosa comprensible, ni que se vea diferente entre distintas versiones del navegador de Android, cosa también comprensible, lo jodido es que se ve diferente en varios terminales como el mismo SO, ya que también el fabricante toquetea el explorador, vamos no me j0das, una locura...
Anarchy. Nadie visita con Opera?
De todos modos pasa a webkit. :(
He decidido que finalmente voy a empezar desde cero y programarlo para que se vea bien en internet explorer. Luego ya me aseguraré de que se vea bien en el resto de navegadores.
Ya os diré como evoluciona. De momento estoy chungo desde ayer en la cama, con la garganta inflamada y fiebre. Y mañana celebramos el cumple de Iban. :llorosa:
^MiSaTo^
22/03/2013, 13:55
Por recomendación te diría que empieces haciéndolo en FF y Chrome, que son los mayoritarios ahora mismo ;)
Aparte que IE suele dar muchísimos más problemas que los otros dos juntos XD
Es que en FF y Chrome ya lo tengo funcionando, pero en IE se descojona por completo y no consigo solventarlo. Y no es cuestión de perder clientes por no dar soporte a ciertos navegadores.
Durante un instante he pensado en hacer que si el cliente entra con IE, se muestra la versión antigua de la web, y si entra con cualquier otro navegador, la versión moderna. xDDD
Es que en FF y Chrome ya lo tengo funcionando, pero en IE se descojona por completo y no consigo solventarlo. Y no es cuestión de perder clientes por no dar soporte a ciertos navegadores.
Durante un instante he pensado en hacer que si el cliente entra con IE, se muestra la versión antigua de la web, y si entra con cualquier otro navegador, la versión moderna. xDDD
Para mi es la mejor solucion
^ es sin duda la mejor solución, no puedes acabar anclado en el pasado debido a esa mi*rda de navegador. Muestra la versión antigua de la web a IE, y pon un banner en el que aconsejas el uso de Chrome o FF para poder disfrutar de la nueva versión de la misma.
Estoy rediseñando algunas secciones de H-G, sobre todo la forma en la que se muestran los listados de productos, y he decidido pasar de tablas y ponerlo todo con CSS.
supongo que ya te lo habra dicho alguien, pero tan malo es poner todo con tablas, como todo sin tablas. las tablas son para lo que son mostrar datos en forma tabular.
hay mucho adoctrinamiento de que las tablas son malas y que hay que hacer todo con divs y css, pero los extremismos son malos hacia cualquier sentido.
Dicho eso: que es eso tan complicado que estas haciendo que no tiene compabililidad segun que navegador? hay un buen porcentaje de compatibilidad salvo que estes haciendo cosas muy especificas.
Aiken
supongo que ya te lo habra dicho alguien, pero tan malo es poner todo con tablas, como todo sin tablas. las tablas son para lo que son mostrar datos en forma tabular.
hay mucho adoctrinamiento de que las tablas son malas y que hay que hacer todo con divs y css, pero los extremismos son malos hacia cualquier sentido.
Dicho eso: que es eso tan complicado que estas haciendo que no tiene compabililidad segun que navegador? hay un buen porcentaje de compatibilidad salvo que estes haciendo cosas muy especificas.
AikenDe hecho, no es nada especial. Simplemente en Internet explorer se descoloca por compleo, no me respeta los height y tampoco la disposición exacta de los DIV (se montan unos sobre otros). Probado en Firefox, Chrome y ahora mismo en Opera, en todos se ve perfecto. En el único que falla es en Internet Explorer 8.
Estoy pensando en volver a las tablas y meter los div organizados por tablas. De esa manera he visto que funciona perfecto en todos los navegadores que he probado.
También he recibido por MP alguna proposición para echarme una mano. Muchas gracias a todos. :brindis:
Es que en FF y Chrome ya lo tengo funcionando, pero en IE se descojona por completo y no consigo solventarlo. Y no es cuestión de perder clientes por no dar soporte a ciertos navegadores.
Durante un instante he pensado en hacer que si el cliente entra con IE, se muestra la versión antigua de la web, y si entra con cualquier otro navegador, la versión moderna. xDDD
Mucha mejor solucion lo de discriminar por user agent, que violar el estandar por una cuota minoritaria.
Y mientras tinees esa solucion puedes adaptar el nuevo estilo para IE, y volver a discriminar por user agent en el servidor
Saludos
Voy a decir algo con lo que no estoy de acuerdo... pero... gracias microsoft!! por vosotros muchos programadores web tienen algo de qué vivir!! vivan IE y me paso los estándares por allí mismo!!
Por lo demás, me parece tan malo presentar la web vieja para ie como hacerlo tomando IE como base, por lo general, si quieres mantener todo lo más colocado posible, haz la menor maquetación posible en html, y la mayor en CSS. IE adoptó CSS más decentemente que html.
Presentar la web vieja para IE es la forma de decirle a MS y a los usuarios de IE que se pongan las pilas. Un programador web no debería de tener que andar de aquí para allá saltando por aros y haciendo las cosas de una forma 'especial' solo para conseguir que funcionen de una forma 'normal' en un navegador - supuestamente - estándar, la programación web por su naturaleza, requiere de una cierta velocidad de realización y periodos cortos de adaptación.
Pero es cuestión de gustos, hay gente a la que le gusta que le atraviesen la piel con clavos al rojo :)
Yo personalmente me calentaba el tarro lo justo en estas cosas, presentaba la web nueva, pero toda funcionalidad que requería ( excesivo ) trabajo adicional para que funcionase de una forma aparentemente normal quedaba desactivada.
josepzin
23/03/2013, 09:50
Me está saltando el AVAST al entrar a esta página... ¿?
Es por mi firma?
Si es así puedo asegurar que no es un virus, es un script php que convierte en imagen las ultimas noticias de UBML. De hecho siempre lo he utilizado sin problemas :loco:
josepzin
23/03/2013, 11:39
Efectivamente, la url empieza con ubml. A ver si le puedo explicar al Avast que no eres peligroso :P
No se a quien contratan para programar los antivirus pero estas falsas detecciones son patéticas, mi firma solo formatea discos duros en fines de semana :lol:
josepzin
23/03/2013, 12:41
Parece que no es cosa de tu script sino de ubml, ya que entrando a http://ubml.net salta el aviso, ¿qué es esa web?? puede que esté contaminada
Prueba ahora please :)
UBML.net es UnBarrilMedioLleno, ahora con un dominio bien cortito y alegre :lol:
josepzin
23/03/2013, 13:16
Allí sigue... :/
Pues ni idea, voy a tener que hacer algunas pruebas :loco:
Estopero
23/03/2013, 13:37
Prueba ahora please :)
UBML.net es UnBarrilMedioLleno, ahora con un dominio bien cortito y alegre :lol:
Xcode! lo que reporta avast no es el script sino tu web en general, que ha sido reportada como sitio dañino. Teniendo en cuenta que es un wordpress (Lo es no?) yo trataría que pasarle algún análisis online antes de estar seguro del todo que no te han inyectado código de algún tipo.
Sobre la guerra contra los navegadores antiguos... yo estoy de acuerdo en que hay que dejarlos morir XD, pero cuando el no hacerlo te puede suponer una venta menos... ahí ya se habla en otros términos :)
Y las tablas no van bien en todos los navegadores! ni si quiera en el propio navegador funcionan de la misma forma siempre. Aprender CSS cuesta un pelín de trabajo acostumbrado a las tablas pero luego se agradece y mucho :D. El cssreset recomendado por wild kyo ayuda mucho a que el resultado se vea bien en más navegadores :), pero si ya has metido hacks, al aplicarlo te puede explotar la página XD, primero hay que cargar el cssreset y luego avanzar sobre él :D
Voy a ver, mi instalación tiene retales de instalaciones anteriores, me sorprende que funcione de hecho :lol:
Edit: Antivirus pasado a WP, y nada... Hmz. Lo que estoy viendo es un falso positivo en Websense Threatseaker.... Voy a investigar O_o
Voy a decir algo con lo que no estoy de acuerdo... pero... gracias microsoft!! por vosotros muchos maquetadores web tienen algo de qué vivir!! vivan IE y me paso los estándares por allí mismo!!
Por lo demás, me parece tan malo presentar la web vieja para ie como hacerlo tomando IE como base, por lo general, si quieres mantener todo lo más colocado posible, haz la menor maquetación posible en html, y la mayor en CSS. IE adoptó CSS más decentemente que html.
Fixed
Powered by vBulletin® Version 4.2.5 Copyright © 2025 vBulletin Solutions Inc. All rights reserved.