[Ovillo] Problema con IE y orden de las clases en archivo CSS
___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Problema con IE y orden de las clases en archivo CSS
Bueno, en favor tuyo diré que a mi, personalmente, tampoco me gusta mucho.
;)
Pero es que en general intento evitar hacer cosas extrañas en los CSS. Nunca
se sabe que efectos colaterales puedan traer.
En mi descarga diré que es totalmente válido, compatible entre navegadores,
recupera un ¿fallo? de IE y creo que mucho más sencillo de implementar para
Bernat que tener que cambiar todas las clases del código.
Ahora, también es verdad que yo no únicamente he buscado una solución al
problema que planteaba, si no también me he entretenido buscándole una
alternativa a este presunto fallo de IE, por si a mi o a alguien se le pueda
presentar en un futuro. De hecho he aprovechado otro bug de IE, al aplicar
clases múltiples, como hack.
Y para finalizar, pues que para llegar a ciertas composiciones, etc, etc,
etc... siempre nos vemos en la obligación de utilizar hacks más o menos
incordiantes, es nuestro día a día. Para una vez que sale uno que es
correcto según los estándares (amén del Star Hack, aún pendiente de
calificación como digo yo, jejeje) déjame que sea yo el pionero y su
profeta, no? ;)
Un abrazo, David Merino Ogando.
On 1/3/06, Ramon Pravia [EMAIL PROTECTED] wrote:
Maikel Naigt escribió (Tue, 3 Jan 2006 16:54:23 +0100):
/* Este ID llevará los valores comunes del ID #fotosup */ #fotosup
{ height: 400px; }
/* Estos patrones serán los que cambiarán la imagen de fondo */ /*
ATENCION, EL ORDEN DEBE SER COMO VIENE AQUÍ */
#fotosup.foto1 { background-image: url(imatges/superior-grup.jpg);
} #fotosup.foto2 { background-image: url(imatges/superior-
activitats.jpg); } #fotosup.foto3 { background-image:
url(imatges/superior-peses.jpg); }
...y este el código que debe salir para cada foto. Advierte el
orden en que pongo las clases múltiples porque por obligación tiene
que estar así para que funcione como esperas. Digamos que me he
puesto a investigar y he conseguido sacar algo en claro, pero no
tengo tiempo ni ganas en este momento para averigüar el por qué
exacto (siempre puedes rellenar un momento de ocio con este
pasatiempo ;) ) Por supuesto, tal y como pongo más arriba, el orden
del código CSS también tiene que serguir ese orden.
FOTO 1
div id=fotosup class=foto1/div
FOTO 2
div id=fotosup class=foto1 foto2/div
FOTO 3
div id=fotosup class=foto1 foto2 foto3/div
Buff... esto sí que no me gusta en absoluto, lo siento.
Estás asignando 3 clases totalmente equivalentes a un elemento, de manera
que la última declarada en la cascada es la que prevalece. ¿No sería
complicarse mucho más de lo necesario?
saludos
--
Ramón
demasiado viejo para ser una joven promesa,
demasiado joven para ser una vieja gloria,
pero aún así trabajando duro para Simplelógica: apariencia, experiencia y
comunicación en la web
http://simplelogica.net # (+34) 98 522 12 65
http://simplelogica.net/caoticoneutral/
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
[Ovillo] Problema con IE y orden de las clases en archivo CSS
Hola,
Tengo un div con una imagen de fondo. Esa imagen cambia según la clase
que le aplique al div:
CSS:
#fotosup.foto1 {
background-image: url(imatges/superior-grup.jpg);
}
#fotosup.foto2 {
background-image: url(imatges/superior-activitats.jpg);
}
#fotosup.foto3 {
background-image: url(imatges/superior-peses.jpg);
}
HTML:
div id=fotosup class=foto1/div
En todos los navegadores me funciona bien en todos los casos, pero en
IE sólo me muestra la imagen cuando el div tiene la clase .foto1, pero
si hago el css así:
#fotosup.foto3 {
background-image: url(imatges/superior-peses.jpg);
}
#fotosup.foto1 {
background-image: url(imatges/superior-grup.jpg);
}
#fotosup.foto2 {
background-image: url(imatges/superior-activitats.jpg);
}
entonces me respeta los casos que tienen la clase .foto3. Es decir, IE
solamente se fija en la primera clase en el orden en que esté en el
css, y pasa de las demás.
¿A qué se debe?
Gracias.
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Problema con IE y orden de las clases en archivo CSS
Hola Bernat
Bernat Lleonart escribió (Tue, 3 Jan 2006 12:25:09 +0100):
CSS:
#fotosup.foto1 {
background-image: url(imatges/superior-grup.jpg); }
#fotosup.foto2 {
background-image: url(imatges/superior-activitats.jpg); }
#fotosup.foto3 {
background-image: url(imatges/superior-peses.jpg); }
Creo que no tiene que ver con el problema de explorer, pero no estás
utilizando bien id's y clases, de hecho las estás empleando al revés.
fotosup debería ser la clase, porque es la que aplicas a todos los
elementos, es decir, todos los elementos son del tipo (de la clase) fotosup,
y luego cada uno de ellos tiene su propia identidad (foto1, foto2, foto3).
Después, estás empleando un selector #fotosup.foto1 en el que dices que el
elemento tiene que tener la id fotosup y la clase foto1. No sé si explorer
puede estar haciéndose algo de lío con este selector, que por otra parte no
es demasiado habitual y no sé hasta qué punto es recomendable. Además
seguramente no será necesario, sobre todo si asignas bien tus id's y tus
clases, porque si a cada elemento le das una id única, para identificarlo en
el selector no necesitarías más que referirte a su id, sin preocuparte de la
clase.
Saludos
--
Ramón
demasiado viejo para ser una joven promesa,
demasiado joven para ser una vieja gloria,
pero aún así trabajando duro para Simplelógica: apariencia, experiencia y
comunicación en la web
http://simplelogica.net # (+34) 98 522 12 65
http://simplelogica.net/caoticoneutral/
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Problema con IE y orden de las clases en archivo CSS
2006/1/3, Ramon Pravia [EMAIL PROTECTED]: Hola Bernat Hola Ramón Creo que no tiene que ver con el problema de explorer, pero no estás utilizando bien id's y clases, de hecho las estás empleando al revés. fotosup debería ser la clase, porque es la que aplicas a todos los elementos, es decir, todos los elementos son del tipo (de la clase) fotosup, y luego cada uno de ellos tiene su propia identidad (foto1, foto2, foto3). Estoy utilizando el id fotosup para una cabecera que aparece una sola vez en cada página, y aparte de la imagen de fondo, tiene otra serie de propiedades, comunes a todas las páginas. La imagen de fondo de este id quiero que sea diferente en cada página, por eso la quiero cambiar mediante la clase que asigno al div. Después, estás empleando un selector #fotosup.foto1 en el que dices que el elemento tiene que tener la id fotosup y la clase foto1. No sé si explorer puede estar haciéndose algo de lío con este selector, que por otra parte no es demasiado habitual y no sé hasta qué punto es recomendable. De todas maneras, aunque no sea habitual, supongo que no es incorrecto utilizarlo ¿no? Además seguramente no será necesario, sobre todo si asignas bien tus id's y tus clases, porque si a cada elemento le das una id única, para identificarlo en el selector no necesitarías más que referirte a su id, sin preocuparte de la clase. Entonces, ¿debería crear un id diferente (#fotosup1, #fotosup2...) para cada página, con la imagen de fondo diferente para cada uno? luego ¿tendría que reescribir las propiedades comunes del id en cada uno de ellos? Saludos Gracias ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Problema con IE y orden de las clases en archivo CSS
Bernat Lleonart escribió (Tue, 3 Jan 2006 13:44:20 +0100):
2006/1/3, Ramon Pravia [EMAIL PROTECTED]:
Creo que no tiene que ver con el problema de explorer, pero no
estás utilizando bien id's y clases, de hecho las estás empleando
al revés. fotosup debería ser la clase, porque es la que aplicas
a todos los elementos, es decir, todos los elementos son del tipo
(de la clase) fotosup, y luego cada uno de ellos tiene su propia
identidad (foto1, foto2, foto3).
Estoy utilizando el id fotosup para una cabecera que aparece una
sola vez en cada página, y aparte de la imagen de fondo, tiene otra
serie de propiedades, comunes a todas las páginas. La imagen de
fondo de este id quiero que sea diferente en cada página, por eso
la quiero cambiar mediante la clase que asigno al div.
Hola de nuevo.
De acuerdo, no había entendido bien cómo lo estabas haciendo, disculpa. En
cualquier caso, si quieres cambiar la imagen de fondo para la cabecera en
cada página, yo optaría por darle una id o una clase al body, de forma que
la css te quedaría así:
#fotosup{
/* propiedades comunes */
}
body#seccion1 #fotosup{
background-image:url(imagen1.jpg);
}
body#seccion2 #fotosup{
background-image:url(imagen2.jpg);
}
Eso es como yo lo haría, lo que no significa que sea lo mejor ;) La otra
opción es hacer lo que te decía, todas las cabeceras tendrían la clase
fotosup, donde tendrían todas las propiedades comunes, y luego cada una de
ellas su id, de manera que la imagen de fondo la podrías definir para cada
una de las id, sin necesidad de reescribir las reglas comunes para cada una
de ellas. El html te quedaría:
div class=fotosup id=foto1
y la css así:
.fotosup{
/* propiedades comunes */
}
#foto1{
background-image:url(imagen1.jpg);
}
#foto2{
background-image:url(imagen2.jpg);
}
Todo esto te lo digo porque es más correcto utilizar una clase para definir
las propiedades comunes a varios elementos y una id para las propiedades más
específicas de un elemento. En este caso el elemento es siempre el mismo,
sólo que en distintos contextos, por eso me parecería más coherente la
primera opción.
Sobre el uso de un selector como el que tú empleas, no sé si será
incorrecto, ya te digo que no suele ser habitual (personalmente no lo he
utilizado nunca), y no sé si podría dar problemas. El caso es que es un tipo
de selector del que no he encontrado mucha documentación, he echado un
vistacillo a la especificación a ver si se me había pasado por alto y no lo
he visto... no sé. Si alguien tiene más información, que lo diga :)
Saludos ;)
--
Ramón
demasiado viejo para ser una joven promesa,
demasiado joven para ser una vieja gloria,
pero aún así trabajando duro para Simplelógica: apariencia, experiencia y
comunicación en la web
http://simplelogica.net # (+34) 98 522 12 65
http://simplelogica.net/caoticoneutral/
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Problema con IE y orden de las clases en archivo CSS
2006/1/3, Maikel Naigt [EMAIL PROTECTED]: FOTO 1 div id=fotosup class=foto1/div FOTO 2 div id=fotosup class=foto1 foto2/div FOTO 3 div id=fotosup class=foto1 foto2 foto3/div Bueno, esto sí que no me lo esperaba :) Bueno, espero que te haya sido de ayuda y, si te apetece y profundizas en todas las variantes y sus por qués aquí estaremos para que nos ilumines un poquillo más ;) Un saludo, David Merino Ogando. Gracias por tu ayuda. ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Problema con IE y orden de las clases en archivo CSS
Maikel Naigt escribió (Tue, 3 Jan 2006 16:54:23 +0100):
/* Este ID llevará los valores comunes del ID #fotosup */ #fotosup
{ height: 400px; }
/* Estos patrones serán los que cambiarán la imagen de fondo */ /*
ATENCION, EL ORDEN DEBE SER COMO VIENE AQUÍ */
#fotosup.foto1 { background-image: url(imatges/superior-grup.jpg);
} #fotosup.foto2 { background-image: url(imatges/superior-
activitats.jpg); } #fotosup.foto3 { background-image:
url(imatges/superior-peses.jpg); }
...y este el código que debe salir para cada foto. Advierte el
orden en que pongo las clases múltiples porque por obligación tiene
que estar así para que funcione como esperas. Digamos que me he
puesto a investigar y he conseguido sacar algo en claro, pero no
tengo tiempo ni ganas en este momento para averigüar el por qué
exacto (siempre puedes rellenar un momento de ocio con este
pasatiempo ;) ) Por supuesto, tal y como pongo más arriba, el orden
del código CSS también tiene que serguir ese orden.
FOTO 1
div id=fotosup class=foto1/div
FOTO 2
div id=fotosup class=foto1 foto2/div
FOTO 3
div id=fotosup class=foto1 foto2 foto3/div
Buff... esto sí que no me gusta en absoluto, lo siento.
Estás asignando 3 clases totalmente equivalentes a un elemento, de manera
que la última declarada en la cascada es la que prevalece. ¿No sería
complicarse mucho más de lo necesario?
saludos
--
Ramón
demasiado viejo para ser una joven promesa,
demasiado joven para ser una vieja gloria,
pero aún así trabajando duro para Simplelógica: apariencia, experiencia y
comunicación en la web
http://simplelogica.net # (+34) 98 522 12 65
http://simplelogica.net/caoticoneutral/
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
