Estilos CSS se heredan con cambio de clase [IE]

jeybi · #1 (**permalink**) 11/03/2009, 01:15

Saludos, estoy creando un slideShow de noticas, hasta el momento todo marcha muy bien, solo hay un relativamente pequeño problema:

1. Tengo un DIV con clase JSNOACTIVO
2. Al terminar de cargar la pagina (onload) mi Script.js cambia la clase de el DIV por JSACTIVO

Lo que busco con esto, como se puede deducir, es una version accesible cuando no haya javascript, utilizando CSS.

En firefox, opera, safari, todo anda bien, me cambia la clase y carga los estilos correspondientes al java script activo. Sin embargo, el IE6/7 al cambiar la clase a JSACTIVO, de alguna manera 'hereda' los estilos de JSNOACTIVO y se me combinan con los de JSACTIVO, la clase JSNOACTIVO se aplica mientras el ONLOAD no se ejecuta (1-2 segundos).

En teoria lo que deberia pasar seria, en el cambio de clase, desechar todos los estilos definidos para JSNOACTIVO, y cargar los estilos JSACTIVO, cosa que pasa en todos los demas navegadores.

He probado que cambiando la clase del DIV directamente (en el HTML) a JSACTIVO el IE, debido a que en ningun momento carga los estilos de JSINACTIVO, muestra todo correctamente.

Esto me llevo a la terrible conclusion de que IE no desecha todos los estilos a la hora de un refresco de la pagina. O bien puede que mi hoja de estilos no este correcta, cosa que estoy 99% seguro que no.

En fin, queria saber si a alguien le ha pasado este problema y que medidas tomo al respecto. Algo que se me ocurre es que en la clase JSACTIVO defina reglas por cada regla que hay en JSINACTIVO, anulando asi, la 'herencia'.

PD: Casi me olvido del link, esto es lo que llevo programado:
http://kazibi.x10hosting.com/Alpool/...lide_show.html

Pueden checarlo con JS activo e inactivo, el inactivo no funciona en IE6, solo IE7, aun tengo que hacer una hoja de estilos para esa version.

Saludos!

David · #2 (**permalink**) 11/03/2009, 08:52

¿No será mejor usar el tag <noscript> en este caso para mostrar el contenido que quieres si Javascript está desactivado?

jeybi · #3 (**permalink**) 11/03/2009, 12:51

Vaya, gracias!

Probe dividiendo mi hoja en 2 y añadidiendo JSINACTIVO en una etiqueta noscript y me fue perfecto. No sabia que se podia hacer eso con las hojas de estilos.

El codigo me quedo asi:

Código html:

Ver original<script type="text/javascript">
document.write('<link rel="stylesheet" type="text/css" href="css/slides.css"/>');
</script>
<noscript><link rel="stylesheet" type="text/css" href="css/nocssSlides.css"/></noscript>

Todo perfecto, carga una cuando JS activo y otra cuando No activo. Ahora creo que esto a de ser un problema del dia a dia, hay alguna forma mejor para hacer eso de una mejor manera? Realmente el codigo quedo asi:

Código html:

Ver original<script src="js/slide_show.js"></script>
<noscript><link rel="stylesheet" type="text/css" href="css/nocssSlides.css"/></noscript>

Con el document.write en el script, como sea, me interesa saber que alternativas hay.

Panino5001 · #4 (**permalink**) 11/03/2009, 13:59

Esta sería otra opción, pero me parece mejor usar noscript:

Código PHP:

  <!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"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>test</title> 
<link href="rojo.css" rel="stylesheet" type="text/css" /> 
<link id="noJS" href="negro.css" rel="stylesheet" type="text/css" /> 
<script> 
onload=function(){ 
    document.getElementById('noJS').disabled=1; 
} 
</script> 
</head> 
 
<body> 
</body> 
</html>

Si no hay javascript, la segunda hoja de estilos sobreescribe la primera. Si hay javascript, la segunda es deshabilitada y sólo queda activa la primera (igual, mejor usar noscript).

jeybi · #5 (**permalink**) 11/03/2009, 17:15

Uhm ok, dejare el noscript, pero no hay forma de que me valide?

Esta prohibido insertar una etiqueta link dentro de una noscript, mas aun poner el noscript en el head, esto ultimo con cambiarlo de lugar basta. Que codigo utilizan ustedes habitualmente? Cargan diferentes hojas o diferentes markups?

programeitor · #6 (**permalink**) 12/03/2009, 15:30

Cita:

Esta prohibido insertar una etiqueta link dentro de una noscript

no esta prohibido, esta desaconsejado por el consorcio w3c. no tiene potestad para prohibir nada, al final de cuentas son los navegadores los que deciden.

#7 (**permalink**) 12/03/2009, 16:44

Tampoco es que esté desaconsejado. Es que, según la definición que estás poniendo tú mismo al decir que usas el DTD de XHTML 1.0 Transitional, no debe ir ahí. Si tú mismo dices "trata este documento así, con estas normas" y luego no cumples esas normas, entonces ni prohibiciones ni consejos, simplemente intentas que el navegador adivine tus pensamientos.

programeitor · #8 (**permalink**) 12/03/2009, 20:48

Bueno ,diferentes opiniones. que no valide al estandar w3c no es que no se vea la pagina, los navegadores no adivinan el pensamiento, hasta ahi podiamos llegar ,pero tampoco son cuadrados, y saben interpretar lo que les ordenas siempre que tenga un sentido para ellos, por supuesto. Los estandares son para poner los libros... ¿o eso son los estantes?