Incompatibilidad con Explorer: CSS para el

[Rebe_Lunitari]

Hola, buenas.

Vereis, he diseñado una pagina web y se ve perfectamente en Firefox, Safari y Chrome (salvando las minusculas diferencias sin importancia). La cuestion es que al ser usuaria de Mac, no pude ver el proceso de la pagina en I.Explorer.

Ahora, cuando el diseño esta finalizado, me encuentro con varios problemas al abrirlo en Explorer:

-Ignora todo color que tenga una transparencia: el fondo de mi div de contenido principal es semitransparente para que se vean las imagenes del background de la pagina. Lo mismo me ocurre con el formulario: sus campos son semitransparentes. (Se que esto puede solucionarse colocando una imagen de fondo semitransparente.)

-Ignora los textos/titulos que lleven una sombra. Así como un div con un resplandor.

-Ignora el plugin de Jquery Scrollpane para que la barra de desplazamiento vertical tenga un color personalizado. Simplemente se ve un "hueco" blanco.

Estuve investigando acerca de como acomodarlo para que se vea en Explorer haciendo los cambios minimos, ya que en el resto de exploradores se ve perfectamente bien. Y la solucion que más me convenció, era crear una hoja de estilos especifica para IE. Segun lo que encontré, tengo que crear una hoja para IE, y "llamarla" desde cada pagina, apra que se cargue en caso de que se vea con ese explorador.

Lo hice así: Tras el <meta> cargué los estilos, y después de estos, los scripts que necesito para el funcionamiento de la pagina. En los estilos, coloqué este codigo:

Código:

<link rel="stylesheet" href="reset.css" media="all" />
<link rel="stylesheet" href="css/circodelmar.css" type="text/css" />
<link rel="stylesheet" href="css/superfish.css" media="screen" type="text/css" />
<link rel="stylesheet" href="css/jquery.jscrollpane.css" media="all" type="text/css" />
<!--[if IE]>
   <link rel="STYLESHEET" type="text/css" href="circodelmar-ie.css" />
<![endif]-->

¿Alguien tiene alguna idea de porque aún así no me funciona?
¿Alguna otra sugerencia para hacerlo compatible?

Y por ultimo, abro el Explorer mediante el WineBottler en el Mac, pero lo que yo veo es diferente a lo que ve un usuario normal de IE. ¿Alguna manera de usar el Explorer en Mac más efectiva?

Gracias!!!

[sobrelouis123]

Te explico lo que pasa: IE es un navegador PORQUERÍA.

[joseoliveras]

Hola, lo primero es saber con que versión de IE estamos batallando.

A partir de aquí hay varias soluciones.
Corregir alguno de esos errores mediante JavaScript o simplemente asumir que algunos IE no soportan esas características, que presumo que son de CSS3.

Saludos

[Rebe_Lunitari]

Buenas! Bueno, pues en principio yo lo miro con el IE7, aunque como ya dije, la manera en q lo veo desde el mac no es fiable. No puedo decirte que versión utilizan los demas usuarios que han visto las anomalias, pero en al menos un caso juraría que es la 8.

Los problemas con los colores semitransparentes son con "background-color" y con "text-shadow". Esta ultima ya me di cuenta que tiene problemas en IE en general, y que al parecer IE9 tampoco lo admitira. He odio hablar de filtros para cumplir con esa funcion pero...

Investigare y cuando sepa sobre versiones, os digo. Gracias!

[Rebe_Lunitari]

Confirmado: IE7 y IE8

[kseso?]

Iniciado por rebe_lunitari

los problemas con los colores semitransparentes son con "background-color" <- ¿qué está utilizando en en valor? ¿rgba?
y con "text-shadow". Esta ultima ya me di cuenta que tiene problemas en ie en general, y que al parecer ie9 tampoco lo admitira. He odio hablar de filtros para cumplir con esa funcion pero...
dos de esos filtros:

.elemento {filter: Glow(color=#000,strength=3);}
.elemento2 {filter: Dropshadow(color=#ffff00,offx=5,offy=5);}

pero no espere la misma calidad que text-shadow.
más info:

sobre los filtros
con mootools

[Rebe_Lunitari]

Hola!

Pues si, ahora que lo dices, uso CSSEdit para mis hojas de estilos, y cuando aplico la transparencia, el color pasa de hexadecimal a rgba. Deduzco que IE no admite ese color. ¿No hay un modo de hacerlo manteniendo cierta transparencia?

Y los filtros... si, vi que la calidad no es la misma, pero en realidad me serviria. Solamente uso el sombreado en ciertos titulos, que pierden claridad al perder la sombra (Son letras naranjas sobre fondo azulado), y pequeños textos resaltados.

Veo mas sencillo de usar los filtros que los mootols. De todos modos, seria posible hacer lo que pregunte? Adjuntar una hoja de estilos que solo se use cuando se abra en IE?

[kseso?]

Use los comentarios condicionales para llamar a dicha hoja de estilos sólo para ie.
En ella declare sólo las propiedades que necesite/quiera modificar para ie.
Puede cambiar los valores rgba por opacity.
El efecto aunque no exactamente igual, sí será parecido.
Incluso cambiar los colores, dentro de la misma gama, pero con más contraste...

Recuerde que hoy se maneja el concepto de degradación elegante (graceful degradation)* más que el que se vea igual.

*Aunque no me gusta en exceso el término.

[Rebe_Lunitari]

Entiendo entonces, que en lugar de poner:

Código:

background-color: rgba(1,148,190,0.5);

Debo poner:

Código:

background-color: #0194be
background-opacity: 50%

No estoy muy segura de la semantica ahi...

Y respecto a la hoja de estilos, entonces solamente añado en esa hoja los aspectos que deseo acondicionar a IE.

Pero ¿como lo llamo en los comentarios? No tengo mucha idea de esto, entonces lo hice segun vi por ahí, pero no me ha funcionado. Esto es lo que puse:

Código:

<link rel="stylesheet" href="reset.css" media="all" />
<link rel="stylesheet" href="css/circodelmar.css" type="text/css" />
<link rel="stylesheet" href="css/superfish.css" media="screen" type="text/css" />
<link rel="stylesheet" href="css/jquery.jscrollpane.css" media="all" type="text/css" />
<!--[if IE]>
   <link rel="STYLESHEET" type="text/css" href="circodelmar-ie.css" />
<![endif]-->

¿Cual es el problema?

[joseoliveras]

Disculpa. he tenido problemas con el login en el foro.
Mirate esto para el tema de las transparencias:
http://jsfiddle.net/joseoliveras/SnRDK/
El truco está en

Código CSS:

filter: alpha(opacity=50);
 

[Rebe_Lunitari]

Vale, le echare un ojo.

Nadie puede ayudarme a incluir la hoja CSS especifica?

[goya]

yo tengo el mismo problema con IE9 , arme un slider simple con unas fotos , funciona en todo opera,firefox,safari,chrome menos en ie9 hay algun Jquery compatible con el ie9

[joseoliveras]

Prueba con

Código CSS:

<link rel="stylesheet" type="text/css" href="main.css" />
<!--[if gte IE 7]><link rel="stylesheet" type="text/css" href="ie7_8.css" /><![endif]-->
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="ie6.css" /><![endif]-->
 

Now, if the visitor is using IE7 or greater (gte = greater than or equal to), the ie7_8.css file will be loaded and overwrite our main.css rules. Ditto ie6.css.

Este es el artículo:
http://www.daobydesign.com/blog/tips/css-html/using-conditional-comments-to-catch-ie/

Yo no suelo usarlo, solo uso condicionales en algunas reglas:
http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-how-to-target-ie6-ie7-and-ie8-uniquely-with-4-characters/

[Rebe_Lunitari]

Vale, me apunto eso tambien.

De todos modos, hoy lo abri en otro ordenador, con IE8... y se veia todo bien salvo los textos sombreados! Incluso el resplandor de la caja principal y el scrollpane que perdia estilo en otras ocasiones.

La diferencia que he encontrado es que cada ordenador en que probe usa un sistema operativo diferente: XP, Vista y Win7.

¡No es posible que exista un explorador con tantitimos agujeros!!!

[goya]

me quede casi toda la noche buscando y no llege a nada, probare lo de las etiquetas pero el tema espesifico es que interpreta los css pero no los Jquery del slider si la propiedad overflow: hidden; , lo que me da que pensar .. no sera este nabegador espesifico.

si alguien tiene ie9 puede entrar a www.cactuschile.cl y ver si le funciona el slider ?? yo lo porbe del otro note que tengo con ie9 y funciona entonces ahora quede con la duda de si es mi ie9 o el codigo :(

gracias