Foros del Web » Creando para Internet » CSS »

Como usar el comentario condicional para IE anterior a 7

Estas en el tema de Como usar el comentario condicional para IE anterior a 7 en el foro de CSS en Foros del Web. Hola, Tengo un web reciente que se ve perfecto en en Opera, Firefox y IE7, solo que en versiones 6 y anteriores, la ultima capa ...
  #1 (permalink)  
Antiguo 15/01/2007, 12:26
Avatar de bhagat  
Fecha de Ingreso: julio-2002
Ubicación: Granada
Mensajes: 469
Antigüedad: 15 años, 4 meses
Puntos: 7
Como usar el comentario condicional para IE anterior a 7

Hola,

Tengo un web reciente que se ve perfecto en en Opera, Firefox y IE7, solo que
en versiones 6 y anteriores, la ultima capa no se muestra correctamente porque le he puesto position:fixed y ya sabemos que no lo interpretan.

el web es este

http://www.thegardenoflight.net/esp/que.htm

la hoja CSS esta (todavía necesita una limpieza)

http://www.thegardenoflight.net/CSS/Jardindeluz3-c.css

El DIV que me da el problema es este:

#RocasFondo{
background: url(../imagenes/BACK/rocks-mitad.gif) bottom left fixed no-repeat;
position:fixed;
bottom:0px;
left:0px;
z-index: 7;
width: 550px;
height: 145px;
margin: 0 ; /* original 0 0 -50px 0 */
padding: 0;
visibility: visible;
}

Como podría poner un condicional,
<!--[if IE 6]>
código
<![endif]-->
para que en versiones anteriores no se vea este DIV. y se vea otro alternativo u otra opción similar.

La teoría la conozco, en la practica he hecho varios intentos pero no me funcionan

Otra opción sería con sniffer de browser de JavaSript pero me parece mas complicada.

Agradezco las ayudas de antemano.

Gracias
__________________
Por prudencia, la palabra SIEMPRE,
no la deberiamos usar NUNCA

Bhagat Dominguez
www.percusioncreativa.com
  #2 (permalink)  
Antiguo 15/01/2007, 12:42
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Como usar el comentario condicional para IE anterior a 7

Pues yo probaría a poner en el html el div alternativo <div id="alter">... en su sitio, luego en la hoja de estilo normal pondría:

#alter {
visibility: hidden;
}

y luego

<!--[if IE < 7]>
#RocasFondo{
visibility: hidden;
}
<![endif]-->

A ver si hay suerte.

Mikel.
  #3 (permalink)  
Antiguo 15/01/2007, 13:39
Avatar de bhagat  
Fecha de Ingreso: julio-2002
Ubicación: Granada
Mensajes: 469
Antigüedad: 15 años, 4 meses
Puntos: 7
Re: Como usar el comentario condicional para IE anterior a 7

no entiendo lo que dices
Cita:
#alter {
visibility: hidden;
}

y luego

<!--[if IE < 7]>
#RocasFondo{
visibility: hidden;
}
<![endif]-->
lo que quiero es que se vea #RocasFondo si el explorador es IE7, y que se vea un div alternativo si es IE6 o inferior, pero parece por lo que escribes si fuese IE7 no se vería este DIV

Tampoco entiendo porque el div alternativo sería con visibilidad oculta, entonces no se vería ninguno.

Me puedes explicar te lo agradezco
__________________
Por prudencia, la palabra SIEMPRE,
no la deberiamos usar NUNCA

Bhagat Dominguez
www.percusioncreativa.com
  #4 (permalink)  
Antiguo 15/01/2007, 16:24
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Como usar el comentario condicional para IE anterior a 7

Me explico: este condicional
<!--[if IE < 7]>
significa "si es menor que IE7", lo que significa que IE7, FF y los demás no se ven afectados, sólo las versiones IE anteriores al 7.

Por otro lado dices:
Cita:
Como podría poner un condicional,
<!--[if IE 6]>
código
<![endif]-->
para que en versiones anteriores no se vea este DIV. y se vea otro alternativo u otra opción similar.
por eso, lo primero que le digo a ese div es que no se vea en versiones anteriores a IE7

<!--[if IE < 7]>
#RocasFondo{
visibility: hidden;
}
<![endif]-->

y después hago el selector alternativo para esas versiones anteriores, pero que no se vea para IE7, FF y el resto

#alter {
visibility: hidden;
}

Y para acabar he cometido un error y se me ha olvidado poner que sí se vea para los anteriores a IE7

<!--[if IE < 7]>
#alter {
visibility: visible;
}
<![endif]-->

lo que posiblemente te ha provocado la confusión.
Resultando:

Código:
#alter {
visibility: hidden;
}
<!--[if IE < 7]>
#RocasFondo{
visibility: hidden;
}
#alter {
visibility: visible;
}
<![endif]-->
Con esto te contestaba a la duda que señalo en negrita de cómo poner otro div alternativo para los anteriores a IE7. Si lo que preguntabas era en realidad cómo simular el efecto fixed para IE6 y anteriores no entendí la cuestión.

Si es así confírmamelo.

Mikel.
  #5 (permalink)  
Antiguo 15/01/2007, 17:19
Avatar de bhagat  
Fecha de Ingreso: julio-2002
Ubicación: Granada
Mensajes: 469
Antigüedad: 15 años, 4 meses
Puntos: 7
Re: Como usar el comentario condicional para IE anterior a 7

Si ahora si lo entiendo, (creo) ya lo aplicaré, y te diré el resultado.

lo que me liaba fue ese error de hidden donde era visible

muchas gracias, espero que mañana con la cabeza mas fresca lo entienda aun mejor.

Un abrazo cordial
__________________
Por prudencia, la palabra SIEMPRE,
no la deberiamos usar NUNCA

Bhagat Dominguez
www.percusioncreativa.com
  #6 (permalink)  
Antiguo 16/01/2007, 06:05
Avatar de bhagat  
Fecha de Ingreso: julio-2002
Ubicación: Granada
Mensajes: 469
Antigüedad: 15 años, 4 meses
Puntos: 7
Pregunta Re: Como usar el comentario condicional para IE anterior a 7

no me funciona ¿que está mal?

he escrito este código en la hoja de estilos:

Cita:
<!--[if IE 6]>
#RocasFondo{
visibility: hidden;
}
<![endif]-->

#RocasFondo{
background: url(../imagenes/BACK/rocks-mitad.gif) bottom left fixed no-repeat;
position:fixed;
bottom:0px;
left:0px;
z-index: 7;
width: 550px;
height: 145px;
margin: 0 ; /* original 0 0 -50px 0 */
padding: 0;
visibility: visible;
}
En teoría y como primer paso antes de crear un div alternativo, se supone que con este código, se ocultaría la visibilidad de la capa solo para ie6 o anteriores.

Y lo que me ocurre es que me oculta el DIv #RocasFondo, en todos los navegadores (ie6 ie7 ff opera)

¿que está mal?
__________________
Por prudencia, la palabra SIEMPRE,
no la deberiamos usar NUNCA

Bhagat Dominguez
www.percusioncreativa.com
  #7 (permalink)  
Antiguo 16/01/2007, 06:33
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Como usar el comentario condicional para IE anterior a 7

Prueba poniendo:

<!--[if IE 6]>
<style>
#RocasFondo{
visibility: hidden;
}
</style>
<![endif]-->

Ayer no lo puse porque lo dí por sobreentendido. Disculpa.

Pero con eso se ocultaría sólo para IE6, no para los anteriores. Para los anteriores debes poner el signo "menor que" (<), por eso ayer te ponía:

<!--[if IE <7]>

que quiere decir "menor que IE7"

Ya dirás.
Mikel.
  #8 (permalink)  
Antiguo 16/01/2007, 06:50
Avatar de bhagat  
Fecha de Ingreso: julio-2002
Ubicación: Granada
Mensajes: 469
Antigüedad: 15 años, 4 meses
Puntos: 7
Re: Como usar el comentario condicional para IE anterior a 7

Pues sigue sin funcionar

ahora tengo una duda, porque escribes:

Cita:
<!--[if IE 6]>
<style>
#RocasFondo{
visibility: hidden;
}
</style>
<![endif]-->
¿Volver escribir style en una hoja de estilos o te refieres a que escriba este código en el documento HTML ?

también lo probé (incluyéndolo en el html) y sigue sin funcionar

debe haber algo que se (me/nos) escapa
__________________
Por prudencia, la palabra SIEMPRE,
no la deberiamos usar NUNCA

Bhagat Dominguez
www.percusioncreativa.com
  #9 (permalink)  
Antiguo 16/01/2007, 08:47
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Como usar el comentario condicional para IE anterior a 7

Bueno, discúlpame; no había meditado bien la respuesta anoche.
El código que debes usar es:

Código:
  <style type="text/css">
<!--
.Estilo5 {
color: #000066;
font-weight: bold;
}
.Estilo6 {color: #000066}
#alter {
display: none;
}
-->
  </style>
<!--[if lt IE 7]>
<style>
#RocasFondo{
display: none;
}
#alter {
display: block;
}
</style>
<![endif]-->
La primera parte es para indicarte dónde colocarlo, por eso muestro un poco de código que ya tienes puesto tú (<style type="text/css">
<!--
.Estilo5 {... ) etcétera.

Luego, justo donde termina el div de las rocas (<div id="RocasFondo"></div)
coloca el alternativo, es decir:

Código:
<div id="RocasFondo"></div>
<div id="alter">Este es el div alternativo para IE6 y
anteriores</div>
No me paré a pensar en que querías quitar la roca por completo y sustituirla por otro div, y puse visibilidad cuando debía poner display, para que no ocupe sitio.
Y la segunda hermosa gamba, es que estaba usando el caracter < (menor que), en lugar de su correspondiente entidad (lt). En fin, perdona por el despiste. Si hubiera probado el código antes de escribirte me habría dado cuenta de que no estaba escribiendo bien las cosas.

Espero que ahora te funcione bien.

Mikel.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:59.