Rizando el rizo...

[Ekbrilo]

Dado que algunos problemas de diseño CSS pueden resolverse creando un estilo para cada navegador, y uniendo a esto la cuestión de estilos diferentes para la visualización en pantalla y para la impresión de una página, pregunto:

¿Cómo se puede (si es que se puede) armonizar ambas cosas? Dicho de otro modo: si quiero que una página tenga un estilo para IE, otro para Firefox y otro para Opera, y que además tenga un estilo para pantalla y otro para impresión, ¿cómo sería el código CSS y su orden? Y en el caso de aplicarse a un solo documento, ¿se necesitan forzosamente archivos externos, o todo eso -los estilos para cada navegador, para pantalla y para impresión- podrían incluirse en la cabecera de esa página?

[DragonX]

no entiendo para que queres que tenga estilos diferentes para cada navegador?

[kseso?]

Hola Ekbrilo
Desde mi bisoñez en estos temas, pero haciendo memoria de otros posts de este foro:
No es necesario definir una estilo para cada navegador. En ciertos casos sí que se necesitan algunos "hacks" (¿se escribe así?) al objeto de obtener el mismo resultado en alguno de ellos. Esto es, que por alguna particularidad, fallo o forma de interpretar alguna propiedad, hay que definir alguna cosilla en especial para un navegador o versión en concreto.
Sobre el hecho de vincular el estilo a una hoja externa o incluirla en la misma página, creo que los que saben aconsejan el primer método, .css por un lado y .html por otro. Pero siempre hay excepciones, y un día de estos, Mikmoro comentaba que había tenido que incluir código css en la página para que un menú fuese al 100%.
Espero te sirva como base para seguir descubriendo.
Un saludo

[Carxl]

Hola Ekbrilo, cómo vas??

Teóricamente y lo que muchos aconsejan es que hagas tu estilo para cualquier navegador, osea una solo hoja y en lo posible evitando hacer "hacks" (si se escribe así kseso? ). Tampoco... utilizar estilos locales.

En cuanto a lo de peresentar la página de una manera en pantalla y otra en impresión, lo haces con el atributo media del tag link. Te tocaría leer mas sobre eso

Espero te sirva

[Ekbrilo]

Os agradezco vuestras opiniones, y paso a responderlas, o más bien a matizar mi exposición inicial.

DragonX, el motivo de crear un CSS diferente para cada navegador (al menos para los tres principales) no es otro que ahorrar tiempo en la resolución de problemas de diseño. Se pierde muchísimo tiempo (a mí me pasa) intentando solucionar cualquier majadería irritante que afea una página en determinado navegador, mientras que en otro se ve impecable. Creo que es una solución práctica, pues hay veces en que intentar corregir el fallo a base de pruebas lo único que hace es amargarte, perder el tiempo y, encima, comprobar que el defecto sigue ahí. De ahí la idea de atajar problemas con CSS distintos. Hay gente que insiste en el consejo de probar, insistir, etc; pero de esa manera puedo tardar meses en solucionar una pijadilla, y yo no quiero perder tiempo con acertijos de código.

kseso, sé que el método recomedado es el archivo CSS externo; lo que pasa es que si se trata de un solo documento no sé si vale la pena hacerlo. Por supuesto es válido y funciona igual con una página que con mil a la vez; pero si es una sola página la implicada, igual el archivo externo es una medida un poco excesiva (digo yo, no lo sé...)

Carxl, Mikmoro me explicó la manera de lograr un código para pantalla y otro para impresión; lo que no sé es cómo podría estructurarse armónicamente con CSS diferentes para cada navegador.


Saludos a todos.

[Ekbrilo]

Parece difícil la cosa, ¿no?

[hectorborges]

Aunque tu página sólo vaya a utilizar una clase CSS lo correcto es colocarla en un archivo aparte y no en el head del HTML.... o al menos desde la filosofía del web 2.0 que mucha razón tiene en recomendarlo puesto que ayuda a garantizar factores de calidad del software como mantenibilidad, flexibilidad, reusabilidad y facilidad de prueba..... en pro de un buen desarrollo de software SIEMPRE vale la pena tener el CSS en un archivo aparte .

Ahora vamos al meollo del asunto... es cierto que hay que evitar usar hacks para corregir los estilos segun el navegador, pero hay ocaciones en que sencillamente es imposible lograr que se vea igual en todos sin hacer correcciones.... el principio en el que me baso cuando hago un website es que firefox se apega más a los estándares que IE, y si desarrollas correctamente en firefox en la mayoría de los exploradores obtendrás el resultado deseado EXCEPTO en nuestro amigo IE.... la buena noticia es que Microsoft (quizas a sabiendas de su gran debilidad en este aspecto) ha provisto de los comentarios condicionales, que permiten agregar hojas de estilo específicas para IE (incluso especificas para ciertas versiones)... ¿pero cómo funciona esto?

Bien los estilos de CSS son interpretados secuencialmente por el browser y almacenados en una especie de caché desde donde se usan, así que si colocas una misma propiedad dos veces, es el último valor el que quedará asignado. El truco con los comentarios condicionales es agregar luego de nuetra hoja de estilos estándar una segunda hoja específica que sobreescriba las propiedades necesarias para corregir los defectos que hayan en IE.... el comentario va mas o menos así:

Código:

<!--[if IE]><link rel="stylesheet" href="hateIE.css" type="text/css" /><![endif]-->

Por experiencia se que un buen CSS que funcione para firefox no necesitará más que unas pocas correcciones para funcionar en IE... la mayoría de ellas probablemente sean para coregir el modelo de cajas de IE que agrega espacio a los márgenes de los divs flotantes. También te recomiendo el uso de alguna hoja CSS reset... para anular algunas diferencias entre browsers antes de empezar....

Espero sea de utilidad!!... saludos

Héctor Borges
www.arepahosting.com
Valencia - Venezuela

[Ekbrilo]

Te agradezco la explicación, hectorborges; ahora bien, lo extraño del caso que planteo es que funciona correctamente en IE. Por el contrario, con Firefox debo modificar los valores del posicionamiento de ese elemento menor para que aparezca en la esquina inferior derecha del div grande; si mantengo los valores que funcionan con IE, el elemento menor se ve junto al div grande, pero fuera de él.

Un saludo

[Mikmoro]

No lo entiendo.

En este hilo http://www.forosdelweb.com/f53/posic...9/#post2452381

al que finalmente no respondiste si te servía o no, creo que te contesté con un código compatible para IE y FF, sin necesidad de hacks ni comentarios condicionales para el posicionamiento que buscabas.

Mikel.

[Ekbrilo]

Tienes razón, Mikmoro, disculpa que no te contestase; probé el código que me dices y no me funcionó. Estaba tan enfrascado en la decepción de no poder solucionar el asunto que hasta se me olvidó postear de nuevo (cosa que habitualmente suelo hacer). En medio de ese olvido y de mi irritación (irritación con el problema, se entiende), pensé que lo mejor sería crear un estilo para IE y otro para Firefox -y eventualmente para Opera-.

Saludos y perdona mi lapsus.

[Mikmoro]

No es problema, pero, ¿cómo es que ese código no funciona como quieres?

Enséñame si puedes el código y qué es exactamente lo que quieres conseguir, porque ya me picas la curiosidad y no lo entiendo. Lo del posicionado que comentábamos es bien sencillo, y no entiendo que no funcione eso.

Mikel.

[Ekbrilo]

Oído cocina, Mikmoro; estos días ando bastante liado, -causas ajenas a mi voluntad, que suele decirse en estos casos-; pero al primer momento libre que tenga te paso más datos, a ver si damos con la solución al entuerto.

Un saludo y gracias por tu paciencia.

[Ekbrilo]

Bueno, lo prometido es deuda, Mikmoro, así que aunque sea más tarde de lo esperado aquí estoy de nuevo. El código que me pasaste sitúa efectivamente el div menor dentro del grande, en concreto en el extremo inferior izquierdo. Antes de detallar más códigos, te diré que intenté -sin conseguirlo- hacer dos cosas con el que tu me diste. La primera, probar a colocar el div menor en el extremo opuesto, o sea, en la esquina inferior derecha. La segunda, disponer bajo el div grande (pero fuera de él, en el body) otros dos elementos -probé divs, botones, imágenes...-, de manera que quedasen alineados correctamente bajo él. En ambos casos usé el mismo número de píxeles para el posicionamiento. El resultado para top es correcto en IE y Firefox, pero el left no coincide; el que se ajusta para IE se muestra excesivo para Firefox, y si lo reduzco hasta ajustarlo para este segundo navegador queda insuficiente en el primero. Por eso planteaba la posibilidad de usar un estilo diferente para cada navegador.

Un saludo.

[Mikmoro]

Iniciado por Ekbrilo

El código que me pasaste sitúa efectivamente el div menor dentro del grande, en concreto en el extremo inferior izquierdo.

Hola de nuevo.

Mmmm... me extraña que lo situe en el extremo interior izquierdo, porque yo te ponía:

bottom: 0px;
right: 0px;

es decir, obligatoriamente inferior derecho.

De todas maneras, si sigues con el problema, pon lo que estás usando y lo que quieres conseguir, a ver si samos con la solución.

[Ekbrilo]

Bueno, además de plantearme algunos ejercicios para "soltarme" un poquillo más con esto del CSS, una de las cosas que se me ocurrió al trastear con ese código era la posibilidad de incluir una imagen dentro de un textarea.