CSS no compatibles para los distintos navegadores

lemmy2011 · #1 (**permalink**) 23/02/2011, 06:19

Hola a todos! Tengo una duda... de concepto. Ya veo que es lo que hay. Pero es la curiosidad del principiante. Los CSS, entiendo que son hojas de estilo que, aplicadas a los distintos elementos de nuestra web, se muestran por pantalla con unos determinados atributos visuales. Vale.

Pero, yo aplico estas hojas y, dependiendo del navegador donde lo mire, el elemento en cuestión se distinto. Concretamente estaba configurando un CSS para lista tipo <select> y no se parece en ninguno de los navegadores.

Entonces, ¿Qué sentido tienen los CSS? ¿Amargarnos la vida? ;P ( es broma ). Es decir, ¿únicamente sirven para aplicar las mismas normas visuales a todos los elementos que le asignemos el CSS? Que a ver, no es poco. Pero, si esos atributos no son compatibles para todo los navegadores, ¿los CSS no resultan un poco pobres? Por que, vale, a nivel de programación es genial. A todas mis listas les pongo un determinado CSS, y de golpe pongo todos sus atributos visuales. Con lo cual, es útil a nivel programación. Pero lo que importa es el resultado a nivel usuario, que es quien realmente juzga una web. Si yo tengo una lista que se ve muy bien en IE, pero en FF no tiene nada que ver, los usuarios que usen IE verán una lista muy linda. En cambio los que usen FF dirán "vaya lista más fea!!".

Es la reflexión ( seguramente equivocada ) de un novato. Pero, si los CSS no están compatibilizados para todos los navegadores, o bien, emplean estándares para todos los navegadores, las CSS no sirven para mucho. Bueno, sí, para el programador. Pero aquí, el verdaderamente importante no es el programador, es el usuario.

Vosotros que sabéis muchísimo más que yo, y que por lo tanto vuestro criterio tiene más peso, esto que digo ¿es cierto?

Saludos!

chwc · #2 (**permalink**) 23/02/2011, 06:57

Mira, cuando programes una pagina usa el estilo estandar compatible con w3c, es decir que se ve igual en FF,chrome,opera,safari y IE9 (este ultimo responde a los estandares)
haz que se vea linda en los estandares, y mediante php, verificas la version del navegador, si es ie 6,7 o 8 le aplicas un determinado estilo que corrije los errores de tal navegador, es decir, cuando comienzes a crear una web, Ni te preocupes como va a quedar en IE, solo preocupate por los navegadores que visualizan el estilo segun el estandar, luego cuando todo te quedo perfectamente diseñado, corriges los errores de IE, asi que el css no esta mal desarrollado, la culpa la tiene IE que en sus versiones viejas no se ve correctamente.

Saludos, pronto IE obligara a actualizar a su version 9(CSS estandar).

lemmy2011 · #3 (**permalink**) 23/02/2011, 07:33

Ok. Gran respuesta. Me ha quedado claro. Pero, y yendo a un ejemplo en concreto, cómo puedo hacer para que esta lista se vea igual en todos los navegadores ( dejando de lado IE, como tu dices. Por cierto, cosa arriesgada, teniendo en cuenta que lo usa seguramente el 80% de la gente. Pero entiendo lo que dices y es bien lógico ). Este es el css:

.css_lista {
width:auto;
height:24px;
font-family: Tahoma, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
line-height: normal;
font-weight: normal;
text-transform: normal;
color: #050505;
text-decoration: none;
padding-left:2px;
padding-right:3px;
padding-top:3px;
padding-bottom:3px;
border: solid 1px;
border-color:#A6B9C8;
}

la definición de la web es ( que igual está aquí el error, no lo sé ):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="es">

Y, la lista en cuenstión la defino como:

<td align="left" width="630"><select name="lst_tipo" class="css_lista" onchange="javascript:fun_refresca(); ">...

A mi, esta lista se me ve distinta todos los navegadores. Querría que se viese tal como muestra FF.

Nuevamente, mucha gracias.

chwc · #4 (**permalink**) 23/02/2011, 07:58

Bueno, primero te recomendarias que no uses tablas y aprendas a reemplazarlos por divs.
Segundo que IE tiene alrededor del 50% de usuarios, pero 80% de ello usan IE8 que no se ve tan mal.
Aca no puedo ver como se veria en IE por que en este momento estoy usando un livecd de linux por que se me rompio el Disco duro, pero al estilo te recomiendo agregarle un reset al principio,
leete esto:http://www.librosweb.es/css_avanzado/capitulo2.html
y te recomiendo leer el libro http://www.librosweb.es/css_avanzado/

Saludos

lemmy2011 · #5 (**permalink**) 23/02/2011, 10:02

Ok! Lo tendré en cuenta. Es que creo que he empezado la casa pro el tejado. He desarrolado una web, dejando de banda el tema del diseño, pensando que sería trabajo costoso, pero sistemático. No pensaba que habría tanto jaleo. La siguiente, trataré de substituir los <table> por <div> Eso me queda claro. Y el artículo de la prioridad de CSS, muy interesante también. Pero por desgracia, loq ue pensaba al principio, al menos en el tema de las listas, lo sigo pensando. He entrado en facebook. Y, según el navegador, las listas se muestran de una manera u otra. Y, vamso, supongo que los desarrolladores de facebook serán unos figuras. así que entiendo que no hay nada que hace. Por ejemplo, la propiedad: padding-top/bottom

padding-top:5px; quiere decir que, entre el borde superior de la lista y "lo que haya dentro" va a dejar 5 píxeles. Pues bien, FF interpreta ese "lo que haya dentro de la lista" incluye la propia flecha del desplegable. En cambio opera sólo tiene en cuenta el contenido de la lista. No el propio botón que desplega la lista. Además, para Safari, por ejemplo, la propiedad height:26px no le hace caso. Te paso cómo se me ve en los distintos navegadores. ( se me ev bien en Firefox y en Chrome )

¿hay alguna manera que la lista se vea como se me ve en FF, pero para todos los navegadores?

sanxuan · #6 (**permalink**) 23/02/2011, 10:09

En vista del problema, y sin haber hecho ninguna prueba, creo que la mejor opción podría ser usar line-height en lugar de padding.

Retiro lo dicho en el renglón anterior. Después de comprobar la posibilidad puedo asegurar que al menos en Firefox no funciona. Parece que vas a tener que utilizar algún tipo de condicional para usar un CSS u otro si es realmente importante en tu página. No se me ocurren otras posibilidades que las que has usado tú.

lemmy2011 · #7 (**permalink**) 23/02/2011, 10:52

No, si de hecho tampoco es de vital importancia que quede de una manera o de otra. Lo que pasa que estoy definiendo los CSS y veo que, al menos en este caso, no se ve igual según sea el navegador.

De ahí venía un poco mi reflexión. Es decir, para que pegarme un trabajo en dejar unos CSS que me gusten y que se vea que están trabajados, si después entro con el Opera de turno ( por ejemplo ) y se ve una castaña. Prefiero pues definirme algo menos "ambicioso" pero que sepa que todo el mundo verá lo mismo.

Y de ahí crítica inicial para el tema de los CSS. Está fenomenal para los programadores, que no hemos de definir las mismas propiedades 200 veces. Pero, como cada navegador interpreta algo distinto, el usuario puede ver elementos distintos según el navegador que use. Parece pues mejor definirse CSS "justitos" y así no habrá problema. Ojo, hablo del elemento en cuestión, el tipo <select> pero si me da problemas este, entiendo que puede pasar con cualquiera.

Gracias por tu tiempo!

kseso? · #8 (**permalink**) 23/02/2011, 11:36

¿Nadie ha reparado en que ha ido a escoger precisamente uno de los elementos del html que menos propiedades admiten? Me refiero al select.
¿Quiere personalizarlo?
Simule el selct con una lista.

Que por cierto, nadie ni nada le obliga a utilizar css. Si no lo quiere emplear, es muy libre de hacerlo así.

Pero antes de teorizar, creo que primero debería adquirir unas nociones mínimas.
Un buen lugar: www.librosweb.es

lemmy2011 · #9 (**permalink**) 23/02/2011, 12:14

No, no... veo que me ha entendido usted mal. El tema que he abierto, era en tono siempre de pregunta. Admitiendo desde el principio que soy un profano en el tema de los CSS. Aunque, gracias a las recomendaciones y comentarios de este foro, así como de artículos y tutoriales que circulan por internet, trato de ponerme al día. En todo momento pregunto, por que desconozco. Y especulo, pesperando rectificación. En ningún caso pretendo saber más que nadie ni lanzar teorías... ni mucho menos!! Vamos, que si he parecido un pedante o he molestado a alguien con mis torpes palabras pido perdón. Entiendo que puede pasar. Entiendo que alguien que ha estudiado a fondo el tema de CSS y venga uno que no tiene ni idea a decir cosas absurdas, puede molestar. Lo siento, simplemente quería dejarme asesorar por quien me quisiera orientar. Y, de hecho, les estoy agradecido a todos pues han sido de gran ayuda. Y dicho esto, tomo nota de "librosdelweb" :)

Muchas gracias!!

ArturoGallegos · #10 (**permalink**) 23/02/2011, 13:39

Cita:

Iniciado por kseso?

¿Nadie ha reparado en que ha ido a escoger precisamente uno de los elementos del html que menos propiedades admiten? Me refiero al select.
¿Quiere personalizarlo?
Simule el selct con una lista.

Que por cierto, nadie ni nada le obliga a utilizar css. Si no lo quiere emplear, es muy libre de hacerlo así.

Pero antes de teorizar, creo que primero debería adquirir unas nociones mínimas.
Un buen lugar: www.librosweb.es

Tranquilo compañero no se nos esponje...

como ya ha dicho el sr. lemmy2011 acaba de empezar y va tomando cartas en el asunto para solventar sus problemas, y veo que como todos alguna vez ha tropezado al juzgar y querer personalizar el bendito <select>

estoy seguro compañero Kseso? que usted también callo en eso alguna vez ñ.ñ

pero bueno sr. lemmy2011 como ya le indicaron material de lectura solo me queda aclararle que el <select> tiene sus mañas y no siempre vale la pena esforzarse personalizarlo ya que directamente con CSS es realmente poco lo que se puede hacer... sin embargo en la mayoría de los elementos html obtendrá una buena presentación casi idéntica en la mayoría de los navegadores utilizando CSS, salvo por el ya mencionado IE que siempre ha sido y seguirá siendo por un buen tiempo el dolor de cabeza para todos...

kseso? · #11 (**permalink**) 23/02/2011, 15:03

@lemmy2011
Lamento si mis palabras le han sugerido un ataque o menosprecio a usted o a su exposición.
Ya le anticipo que no era esa mi intención y siento que así las haya entendido.
Creo que todo se debe a lo conciso que fui en mi exposición y que la ha visto como un todo sin advertir de la existencia de las líneas en blanco que separa cada párrafo.
Pero lo aclaro para su tranquilidad y del resto (Ag666 incluido)

1º párrafo:

Cita:

¿Nadie ha reparado en que ha ido a escoger precisamente uno de los elementos del html que menos propiedades admiten? Me refiero al select.
¿Quiere personalizarlo?
Simule el selct con una lista.

El select y sus option no se pueden estilizar vía css excepto en "un par" de cosillas.
Para poder personalizarlo lo mejor es utilizar una lista /ul/li/a/.
Añado: no se cuando, pero es mi intención montarle un ejemplo algo recargado de estilos.

2º párrafo:

Cita:

Que por cierto, nadie ni nada le obliga a utilizar css. Si no lo quiere emplear, es muy libre de hacerlo así.

Vale, releído ahora veo que podía haberme esmerado un poco más y no haberlo personalizado en usted, para decirle eso, que el uso de css es optativo mientras se está en periodo de aprendizaje.

2º párrafo:

Cita:

Pero antes de teorizar, creo que primero debería adquirir unas nociones mínimas.
Un buen lugar: www.librosweb.es

Cita:

teorizar.

1. tr. Tratar un asunto solo en teoría. U. m. c. intr.

Real Academia Española © Todos los derechos reservados

y añado, además, de forma tan generalista y global como se ha hecho. Que para avanzar es mejor ir de casos concretos a lo abstracto.

Y perdón por la extensión. Pero quiero y espero que vea que mis palabras no eran un ataque hacia usted.
Y por si un casual algún tercero (no usted Ag666, otros) piensa lo contrario, aquí un ejemplo explicado de cómo pasar de tablas a css:
http://www.araudi.net/migracion/migr..._parte_II.html

lemmy2011 · #12 (**permalink**) 24/02/2011, 05:36

Hola! No!! Nada de eso!! Si yo ya sé cómo funciona el tema de mais, foros, comentarios, etc... que uno lo dice con la mejor intención, pero puede parecer lo que no es. Vamos, yo no me sentí mal por su comentario. En absoluto!! Además aquí estamos todos del mismo lado: jeje los que sabéis y los que tratamos de aprender :) Por cierto, intersantísimo artículo el que nos pasa. Por desgracia... otra cosa a mejorar! Pues yo trabajo siempre con tablas. La estructura de la web la hago mediante tablas. Y veo que eso es un error. Como ya me comentó previamente otra persona, mejor usar DIV. Deficitivamente, empecé la casa por el tejado! Además no ponía los encabezados:

<!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">

Que veo que es necesario! Y el tema de <select> Ok! Os tomo la palabra. No me complicaré la vida personalizándolo.

Muchísimas gracias a todos!!

lemmy2011 · #13 (**permalink**) 24/02/2011, 06:28

Por cierto! ( voy a ser nombrado el pesado del foro ) una cosa muy rápida. Yo tengo definidos una serie de estilos para textos. css_texto1, css_text2, etc... entonces asigno estos CSS a <input> o a párrafos (<p>) del estilo

<input id="id_i" class="css_texto1">
<p id="id_p" class="css_texto1">

¿Lo correcto sería tener un CSS propio para el elemento input y otro para el párrafo? Es que así duplicaría mis CSS. Teniendo uno para el input y otro para el párrafo. Yo lo que hago es aprovechar los CSS. Y, por ejemplo, para los input hago esto:

<input id="id_i" class="css_texto1" style="width:600px;">

Por decirlo de una manera, aprovecho la caractersiticas del texto a nivel de fuente, grosor, tamaño de letra etc con css_texto1, y además le aplico una caracterísiticas adicionales ( style="width:600px;" ). ¿Es correcto trabajar así?

sanxuan · #14 (**permalink**) 24/02/2011, 07:41

Si no es suficiente con las reglas definidas para id y para class, puedes añadir dentro de class tantas clases como necesites.
Por ejemplo, definiendo éste CSS:
.texto1{font-size:small;}
.rojo{color:red;}
.azul{color:blue}
puedes hacer combinaciones como:
<p id="identificador" class="texto1 rojo">Un párrafo rojo</p>
<p id="identificador2" class="texto1 azul">Un párrafo azul</p>

El uso de style="" en general no es recomendable porque es dificil de depurar el código CSS en caso necesario. Obliga a buscar dónde está definida una determinada propiedad a lo largo de todos los ficheros del sitio para poder cambiarla.

lemmy2011 · #15 (**permalink**) 24/02/2011, 08:37

Ok! Me queda claro.

Pero, en el caso particular que interese aplicar un CSS a un <input> cuyas características a nivel del CSS sean:

- Definición de la fuente: nombre, tamaño, color, etc...
- Ancho del campo ( width )

Si, esa definición de fuente ( nombre, tamaño, color, etc... ) ya está incluída en un CSS ( "css_texto1", por ejemplo ) y además teniendo en cuenta que Ancho del campo no siempre será el mismo, no debería hacerse así:

<input type="text" id="id_i" class="css_texto1" style="width:50px; ">
<input type="text" id="id_i" class="css_texto1" style="width:70px; ">
<input type="text" id="id_i" class="css_texto1" style="width:90px; ">

Por que sino, que debería hacerse... ¿definir tantos CSS distintos según los distintos anchos de campo que haya en la web?

sanxuan · #16 (**permalink**) 24/02/2011, 08:58

Desde luego que puede hacerse así. Mi experiencia me aconseja hacerlo de otra forma por la razón que te expuse. Si usas un identificador (id) que no deberías repetir, puedes colocar ahí el ancho:
#id_1{width:50px;}
#id_2{width:70px;}

lemmy2011 · #17 (**permalink**) 24/02/2011, 09:06

Genial! Muchas gracias de nuevo! Lo he probado como dices y va de perlas!

jeje si os hubiera conocido antes... ;)

lemmy2011 · #18 (**permalink**) 24/02/2011, 09:32

Una última cuestión... yo no ponía ninguna cabecera en mis páginas. Pero, a raíz del tema de mi incursión en el mundo del CSS, leí que había que poner una cabecera. De hecho aconsejaban esta:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Pero ahora he leído en otra web que aconsejan esta otra:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

¿Tu cuál usas?

cristian_cena · #19 (**permalink**) 24/02/2011, 22:52

Si necesitas que tu sitio se vea exactamente igual en todos los navegadores y en sus distintas versiones este plugin escrito en jquery es lo que buscas. Es la mejor solución que encontre. Si alguien tiene otra que la postee.

- Leé su documentación, es super fácil.
- Crea una hoja de estilos general
- Crea una hoja de estilos particular para cada caso que necesites.

y listo. espero te sea útil tanto como a mi.

Saludos.

lemmy2011 · #20 (**permalink**) 25/02/2011, 04:34

Genial! Le daré un vistazo a ver cómo lo puedo utilizar...

Muchas gracias!!

cristian_cena · #21 (**permalink**) 25/02/2011, 07:36

lemmy, créeme es realmente muy sencillo de usar, pero cualquier cosa no te salga avisame y te paso un .rar con un ejemplo. Mas al menos inténtalo asi lo aprendes por tu cuenta que es mejor.
Saludos.

jomaruro · #22 (**permalink**) 27/02/2011, 03:34

Hola:

Cita:

Iniciado por chwc

... y mediante php, verificas la version del navegador, si es ie 6,7 o 8 le aplicas un determinado estilo que corrije los errores de tal navegador...

¿Y desde cuando es necesario usar PHP para eso? ¿Para que son entonces los comentarios condicionales?

Saludos.

sanxuan · #23 (**permalink**) 27/02/2011, 17:09

Si piensas usar HTML en lugar de XHTML usa ésta otra cabecera:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Hay bastantes más y cada una se adapta a un tipo de documento. Yo suelo decantarme por XHTML estricto, pero dependerá de lo que incluyas en tu documento.